时间戳

首页 > 技术文章 > jQuery控制图片墙自动+手动淡入淡出切换

jQuery控制图片墙自动+手动淡入淡出切换

huizit1 2016-05-08 19:44 原文

先来看一下效果：http://39.105.101.122/myhtml/Jquery/img_switch/img_switch.html（甄嬛的眼睛有木有变大）

添加一个div（class=container），设置宽度和高度，这里设置了宽800px，高450px。添加居中的定位。在div里面添加一个ul(class="img")列表用来盛放图片，设置ul里面的li标签position为absolute，这时图片会重合在一起，同时设置display为none。图片设置宽度和高度与container相同。在container里面再添加一个ul列表用来盛放下面的一排数字，然后进行相应的定位和设置。添加两个div：left和right，分别是左右两个按钮，进行相应的定位和设置，里面的箭头分别是大于号和小于号。

实现原理：

当鼠标移动到对应的数字上面的时候，用$(this).index()获得数字所在容器里面的序号，然后将序号传递到eq()函数里面获得 li 标签，然后添加函数fadeIn();这样隐藏的图片就显示出来了，同时调用sibling().fadeOut()，让同级的兄弟节点隐藏起来，这样之前显示的图片就隐藏了起来。

添加setInterval()函数，让图片每隔相同的时间变换一次。

我觉得一个主要的问题就是自动切换和手动切换的冲突，当鼠标移动到图片上面的时候应该停止自动切换，在这里用的方法是：

给container添加hover函数，当鼠标移动到container里面的时候用clearInterval()函数去掉时间间隔函数，这样当鼠标移动到图片上面的时候，图片就不会切换了，当鼠标移出的时候添加setInterval()函数。这样图片就能继续切换了。

注意：i 和 t 需要设置成全局变量，这样不同的函数才能共用。i 表示当前显示图片的索引。t 是setInterval的ID。当鼠标移出的时候不用再var一个t了，只需：t=setInterval(time_fun,1500);即可。

eq(n):找到第n个元素

eg：$('li').eq(2).css('background-color', 'red');//设置第二个li标签的背景颜色为红色

index():找到该元素的索引值

 

有兴趣的研究一下代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>jquery_img_switch</title>
  6 </head>
  7 <style type="text/css">
  8 *{
  9     margin: 0;
 10     padding: 0;
 11 }
 12     .container{
 13         width: 800px;
 14         height: 450px;
 15         margin: 100px auto;
 16         position: relative;
 17     }
 18     .container .img{
 19         list-style: none;
 20         /*position: absolute;*/
 21     }
 22     .container .img li{
 23         position: absolute;
 24         display: none;
 25 
 26     }
 27     .container .img img{
 28         width: 800px;
 29         height: 450px;
 30     }
 31     .container .num{
 32         position: absolute;
 33         list-style: none;
 34         font-size: 0;
 35         bottom: 20px;
 36         width: 100%;
 37         text-align: center; 
 38     }
 39     .container .num li{
 40         width: 30px;
 41         height: 30px;
 42         background: rgba(255,255,255,0.5);
 43         border-radius: 50%;
 44         color: #000;
 45         display: inline-block;
 46         line-height: 30px;
 47         text-align: center;
 48         font-size: 20px;
 49         margin-right: 10px;
 50         cursor: pointer;
 51     }
 52     .left, .right{
 53         width: 50px;
 54         height: 60px;
 55         text-align: center;
 56         line-height: 60px;
 57         background-color: rgba(0,0,0,0.5);
 58         color: #fff;
 59         position: absolute;
 60         top: 50%;
 61         margin-top: -30px; 
 62         font-size: 40px;
 63         cursor: pointer;
 64     }
 65     .left{
 66         left: 20px;
 67     }
 68     .right{
 69         right: 20px;
 70     }
 71     .container .num .active{
 72         background: rgba(255,0,0,1);
 73         color: #fff;
 74     }
 75 </style>
 76 <script type="text/javascript" src="../jquery-2.2.1.min.js"></script>
 77 <script type="text/javascript">
 78     var i=0;
 79     var t;
 80     $(document).ready(function(){
 81         $(".container .img li").eq(i).fadeIn().siblings().fadeOut();    
 82 
 83         $(".container .num li").on("mouseover",active);
 84 
 85         t=setInterval(time_fun,1500);
 86 
 87         $(".container").hover(in_fun,out_fun);
 88 
 89         $(".container .left").on("click",left_fun);
 90         $(".container .right").on("click",right_fun);
 91     });
 92 
 93     function time_fun(){
 94         i++;
 95         if(i==10){
 96             i=0;
 97         }
 98         $(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
 99         $(".container .img li").eq(i).fadeIn(300).siblings().fadeOut(300);
100     }
101 
102     function in_fun(){
103        
104         clearInterval(t);
105     }
106     function out_fun(){
107         t=setInterval(time_fun,1500);
108     }
109     function active(){
111         $(this).addClass("active").siblings().removeClass("active");
112         $(".container .img li").eq($(this).index()).fadeIn(300).siblings().fadeOut(300);
113         i=$(this).index();
114     }
115     function left_fun(){
116         i--;
117         if(i==-1){
118             i=9;
119         }
120         $(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
121         $(".container .img li").eq(i).fadeIn(300).siblings().fadeOut(300);
122     }
123     function right_fun(){
124         i++;
125         if(i==10){
126             i=0;
127         }
128         $(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
129         $(".container .img li").eq(i).fadeIn(300).siblings().fadeOut(300);
130     }
131 </script>
132 <body>
133     <div class="container">
134         <ul class="img">
135             <li ><img src="../../Img/1.jpg"></li>
136             <li><img src="../../Img/2.jpg"></li>
137             <li><img src="../../Img/3.jpg"></li>
138             <li><img src="../../Img/4.jpg"></li>
139             <li><img src="../../Img/5.jpg"></li>
140             <li><img src="../../Img/6.jpg"></li>
141             <li><img src="../../Img/7.jpg"></li>
142             <li><img src="../../Img/8.jpg"></li>
143             <li><img src="../../Img/9.jpg"></li>
144             <li><img src="../../Img/10.jpg"></li>
145         </ul>
146         <ul class="num">
147             <li class="active">1</li>
148             <li>2</li>
149             <li>3</li>
150             <li>4</li>
151             <li>5</li>
152             <li>6</li>
153             <li>7</li>
154             <li>8</li>
155             <li>9</li>
156             <li>10</li>
157         </ul>
158         <div class="left"><</div>
159         <div class="right">></div>
160     </div>
161 </body>
162 </html>

 

推荐阅读