Home > Article > Web Front-end > js image carousel effect implementation code_javascript skills

js image carousel effect implementation code_javascript skills

WBOYOriginal: 2016-05-16 15:32:431412browse

First of all, let me take a look at the js image carousel effect, as shown below

Specific ideas:

1. Load the page, get the entire container, all li for numerical index and ul for picture list, define the variable for timer, and the variable index for storing the current index
2. Add a timer, increment the index every 2 seconds, and call the switching image function
Tips:
1. The index cannot continue to increase without limit, and judgment needs to be made
2. When calling the switch image function, you need to pass the incremented index as a parameter
3. Define image switching function
Tips:
1. Traverse all li with numerical index and remove the classes on each li.
2. Find the corresponding li according to the passed index value, add a class to it and set it as the current highlight.
3. Calculate the top value of ul where the picture is placed based on the passed index value
4. Change the value of index so that it is equal to the passed parameter value
Note: The top value of ul where the picture is placed =-index*height of a single picture (all pictures must be of equal height)
4. When the mouse moves across the entire container, the picture stops switching, leave and continue
Tips:
1. Clear the timer when the mouse slides over the entire container
2. Continue to execute the timer when the mouse leaves and switch to the next picture
5. Traverse all the li's that contain numbers, add indexes to them, and switch to the corresponding pictures when the mouse rolls over.
When the mouse slides over, the picture switching function is called and the index of the li that slides over is passed.
The specific code is as follows:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{margin:0;
 padding:0;
 list-style:none;}
 .wrap{height:170px;
  width:490px;
  margin:60px auto;
  overflow: hidden;
  position: relative;
  margin:100px auto;}
 .wrap ul{position:absolute;} 
 .wrap ul li{height:170px;}
 .wrap ol{position:absolute;
   right:5px;
   bottom:10px;}
 .wrap ol li{height:20px; width: 20px;
    background:#ccc;
    border:solid 1px #666;
    margin-left:5px;
    color:#000;
    float:left;
    line-height:center;
    text-align:center;
    cursor:pointer;}
 .wrap ol .on{background:#E97305;
    color:#fff;}

 </style>
 <script type="text/javascript">
 window.onload=function(){
 var wrap=document.getElementById('wrap'),
  pic=document.getElementById('pic').getElementsByTagName("li"),
  list=document.getElementById('list').getElementsByTagName('li'),
  index=0,
  timer=null;

  // 定义并调用自动播放函数
 timer = setInterval(autoPlay, 2000);

  // 鼠标划过整个容器时停止自动播放
 wrap.onmouseover = function () {
  clearInterval(timer);
 }

  // 鼠标离开整个容器时继续播放至下一张
 wrap.onmouseout = function () {
  timer = setInterval(autoPlay, 2000);
 }
  // 遍历所有数字导航实现划过切换至对应的图片
 for (var i = 0; i < list.length; i++) {
  list[i].onmouseover = function () {
  clearInterval(timer);
  index = this.innerText - 1;
  changePic(index);
  };
 };

 function autoPlay () {
  if (++index >= pic.length) index = 0;
  changePic(index);
 }

  // 定义图片切换函数
 function changePic (curIndex) {
  for (var i = 0; i < pic.length; ++i) {
  pic[i].style.display = "none";
  list[i].className = "";
  }
  pic[curIndex].style.display = "block";
  list[curIndex].className = "on";
 }

 };

 </script> 
</head>
<body>
 <div class="wrap" id='wrap'>
 <ul id="pic">
  <li><img src="1.jpg" alt=""></li>
  <li><img src="2.jpg" alt=""></li>
  <li><img src="3.jpg" alt=""></li>
  <li><img src="4.jpg" alt=""></li>
  <li><img src="5.jpg" alt=""></li> 
 </ul>
 <ol id="list">
  <li class="on">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
 </ol>
 </div>
</body>
</html>

The above is the entire content of this article. I have shared with you the js image carousel effect implementation code. I hope you like it. You can change the images according to your own preferences and create your own image carousel effect.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Talk about the understanding of offsetleft compatibility_javascript skillsNext article：Talk about the understanding of offsetleft compatibility_javascript skills

See more

js image carousel effect implementation code_javascript skills

Related articles