jquary实现轮播图（省略了css样式）

 1 <div id="content">
 2             <ul class="c-pic">
 3                 <li class="c-p-li c-p-li1">
 4                     <div class="p-li-r">
 5                         <div class="top-video">
 6                             <video src="img/v1.mp4" controls></video>
 7                             <div class="v-icon"></div>
 8                         </div>
 9                     </div>
10                 </li>
11                 <li class="c-p-li c-p-li2"></li>
12                 <li class="c-p-li c-p-li3"></li>
13             </ul>
14             <ul class="tab">
15                 <li></li>
16                 <li></li>
17                 <li></li>
18             </ul>
19         </div>

接下来是js部分

 1 //轮播图部分   点击事件  播放
 2 //  记得在HTML中引入jquary
 3 (function(){
 4     $(function(){
 5         $(".v-icon").click(function(){
 6             $(this).hide();
 7 //            $("video").play();  play()原生js中才能调用  jquary的api不支持调用
 8 //            $("video")[0].play();      //[0]表示转化为原生js  因为上面的原因 所以需要加个0
 9             $("video").show()[0].play();
10         })
11         $("video").click(function(){
12             this.pause();
13         })
14     })
15 //tab
16     $(function(){
17         var $tab = $(".tab li"),  //获取三个小圆点
18             index = 0,
19             $pli = $(".c-pic li"),   //获取图片
20             timer;
21         $pli.eq(index).addClass("on");
22         $tab.eq(index).addClass("on"); //初始化样式
23         //tab的点击事件函数
24         $tab.click(function(){  //点击的时候  执行
25             var This =$(this).index();
26             if(index !== This){
27                 change(function(){
28                     index = This
29                 })
30             }
31         })
32     //定时器   记得要在前面var定义一下  下面是原生js，所以不用$()
33         fn();
34         function fn(){
35             timer = setInterval(function(){
36                 change(function(){
37                     index = ++index%$tab.length;
38                 })
39             },2000)   //2000是时间  毫秒 
40         }
41         function change(tim){ //接收tim参数  
42             $pli.eq(index).fadeOut(500).removeClass("on");  //移除on  300是时间 毫秒
43             $tab.eq(index).removeClass("on");
44             tim();  //tim执行
45             $pli.eq(index).fadeIn(500).addClass("on");
46             $tab.eq(index).addClass("on");
47         }
48         //清除定时器
49         $("#content").hover(function(){  //鼠标移到小按钮上时，停止计时
50             clearInterval(timer)
51         },function(){
52             fn();
53         })
54     })
55 })();

 

转载于:https://www.cnblogs.com/darkmoon/p/8044861.html