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>

 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 //tab16 ????$(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 = This29 ????????????????})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 })();