jQuery instance -- write a carousel;

Ideas:

1. Write static first, the picture shows one other hidden, the corresponding number of small dots, these two are ul li tags, which are used to easily obtain the index index value in js later

2. Write CSS

3.js: Encapsulate a picture change function changePic(), select the picture display of the index and the small dot to turn blue, and remove the class style for other sibling elements.

　　Click event: Get the index value of the current element, and then call the picture change function changePic().

Static HTML:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" href="reset.css"/>
 7     <link rel="stylesheet" href="demo.css"/>
 8     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
 9     <script src='demo.js'></script>
10 </head>
11 <body>
12     <div class="content">
13         <ul class="pic">
14             <li class="current"><a href="#"><img src="timg.jpg" alt=""></a></li>
15             <li><a href="#"><img src="timg (1).jpg" alt=""></a></li>
16             <li><a href="#"><img src="timg (2).jpg" alt=""></a></li>
17             <li><a href="#"><img src="timg (3).jpg" alt=""></a></li>
18             <li><a href="#"><img src="timg (4).jpg" alt=""></a></li>
19         </ul>
20         <ul class="circle"><!-- 小圆点 -->
21             <li class="first"></li>
22             <li ></li>
23             <li ></li>
24             <li ></li>
25             <li ></li>
26         </ul>
27         <!-- 左右箭头 -->
28         <img class='left' src="e608.png" alt=""/>
29         <img class='right' src="e629.png" alt=""/>
30     </div>
31 </body>
32 </html>

js logic:

var index = 0;
$(function(){

	setInterval(function(){//Timer, change a picture every 4 seconds
        index++;
        if(index==5){
        	index=0
        };
        changePic();
    }, 4000);

	//Write a function to change the picture to change the picture according to the index value (encapsulation)
	function changePic(){
		$(".pic li").eq(index).addClass("current").siblings().removeClass("current");
		$(".circle li").eq(index).addClass("first").siblings().removeClass("first");
	};

	//Click the dot to get the index value
	$(".circle li").click(function() {
        index = $(this).index();
        console.log(index);
        changePic();
    });
    $(".left").click(function() {
        index--;
        if(index==-1){
        	index=5
        };
        console.log(index);
        changePic();
    });
    $(".right").click(function() {
        index++;
        if(index==5){
        	index=0
        };
        console.log(index);
        changePic();
    })

	
})

jQuery instance -- write a carousel;

Guess you like