jQery实例--写一个轮播图；

思路：

1.先写静态的，图片显示一个其余隐藏，小圆点对应数目，这两个都是ul li标签，用于后来在js中方便获取index索引值

2.写css

3.js:封装一个换图片函数changePic()，选取index的图片显示和小圆点变蓝，其余兄弟元素移除class样式。

　　点击事件：获取当前元素的index值，然后调用换图片函数changePic()。

静态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逻辑：

var index = 0;
$(function(){

	setInterval(function(){//定时器，每4秒换一张图片
        index++; 
        if(index==5){
        	index=0
        };
        changePic();
    }, 4000);

	//写一个换图片的函数 根据index值换图片（封装）
	function changePic(){
		$(".pic li").eq(index).addClass("current").siblings().removeClass("current");
		$(".circle li").eq(index).addClass("first").siblings().removeClass("first");
	};

	//点击小圆点获取index值
	$(".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();
    })

	
})

jQery实例--写一个轮播图；

猜你喜欢