用jQuery实现轮播图效果,js中的排他思想

---恢复内容开始---

jQuery实现轮播图不用单独加载。

思路:

a. 通过$("#id名");选择需要的一类标签,获得一个伪数组

b.由于是伪数组的原因,而对数组的处理最多的是遍历,所以会用到for(); 通过循环可以排除掉其他(包括自己)

c.遍历后可以单独改变自己的样式 

 1 <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
 2 <script>
 3  $(function(){
 4                 var index=1;
 5                 var lis=$(".num li");
 6                 var time=window.setInterval(function(){
 7                     $("#img1").attr("src","images/flash/"+index+".jpg");
 8                     index++;
 9                     if(index>4){
10                         index=1;
11                     }
12                 //排他思想
13                 for(var i=0;i<lis.length;i++){
14                     for(var j=0;j<lis.length;j++){
15                         lis[j].style.background="red";
16                         lis[j].style.color="white";
17                         lis[j].style.opacity=0.6;
18                     }
19                     lis[index-1].style.background="black";
20                     lis[index-1].style.color="blue";
21                 }
22                 },1000);
23             });
24         </script>

代码不知道还能简化不,有优化的地方,可以互相交流哦!

猜你喜欢

转载自www.cnblogs.com/yanpingping/p/10464094.html