Home > Article > Web Front-end > How to create image carousel effect with js

How to create image carousel effect with js

PHP中文网Original: 2017-06-22 14:43:521701browse

This article mainly introduces the code to implement the js image carousel effect. The article explains each step in detail and notes precautions, paving the way for the smooth implementation of the js image carousel effect. Friends who are interested in the carousel effect You can refer to

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

## Specific ideas:

1. Page loading, obtaining the entire container, all li for numerical indexes and ul for picture lists, defining variables for timers, and variables for storing the current index index

2. Add a timer, increment the index every 2 seconds, and call the switching image function once.

Tips: 1. The index cannot continue to increase without limit. , need to make a judgment
2. When calling the picture switching function, you need to pass the incremented index as a parameter
3. Define the picture 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 the 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 the ul where the picture is placed = -index*The height of a single picture (all pictures must be of the same 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 li's that contain numbers and add indexes to them , switch to the corresponding picture 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(&#39;wrap&#39;),
 pic=document.getElementById(&#39;pic&#39;).getElementsByTagName("li"),
 list=document.getElementById(&#39;list&#39;).getElementsByTagName(&#39;li&#39;),
 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>
 <p class="wrap" id=&#39;wrap&#39;>
 <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>
 </p>
</body>
</html>

The above is the detailed content of How to create image carousel effect with js. For more information, please follow other related articles on the PHP Chinese website!

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：How to use jQuery to dynamically modify hyperlinksNext article：How to use jQuery to dynamically modify hyperlinks

See more

How to create image carousel effect with js

Related articles