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

<div id="content">
            <ul class="c-pic">
                <li class="c-p-li c-p-li1">
                    <div class="p-li-r">
                        <div class="top-video">
                            <video src="img/v1.mp4" controls></video>
                            <div class="v-icon"></div>
                        </div>
                    </div>
                </li>
                <li class="c-p-li c-p-li2"></li>
                <li class="c-p-li c-p-li3"></li>
            </ul>
            <ul class="tab">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

接下来是js部分

//轮播图部分   点击事件  播放
//  记得在HTML中引入jquary
(function(){
    $(function(){
        $(".v-icon").click(function(){
            $(this).hide();
//            $("video").play();  play()原生js中才能调用  jquary的api不支持调用
//            $("video")[0].play();      //[0]表示转化为原生js  因为上面的原因 所以需要加个0
            $("video").show()[0].play();
        })
        $("video").click(function(){
            this.pause();
        })
    })
//tab
    $(function(){
        var $tab = $(".tab li"),  //获取三个小圆点
            index = 0,
            $pli = $(".c-pic li"),   //获取图片
            timer;
        $pli.eq(index).addClass("on");
        $tab.eq(index).addClass("on"); //初始化样式
        //tab的点击事件函数
        $tab.click(function(){  //点击的时候  执行
            var This =$(this).index();
            if(index !== This){
                change(function(){
                    index = This
                })
            }
        })
    //定时器   记得要在前面var定义一下  下面是原生js，所以不用$()
        fn();
        function fn(){
            timer = setInterval(function(){
                change(function(){
                    index = ++index%$tab.length;
                })
            },2000)   //2000是时间  毫秒 
        }
        function change(tim){ //接收tim参数  
            $pli.eq(index).fadeOut(500).removeClass("on");  //移除on  300是时间 毫秒
            $tab.eq(index).removeClass("on");
            tim();  //tim执行
            $pli.eq(index).fadeIn(500).addClass("on");
            $tab.eq(index).addClass("on");
        }
        //清除定时器
        $("#content").hover(function(){  //鼠标移到小按钮上时，停止计时
            clearInterval(timer)
        },function(){
            fn();
        })
    })
})();