JQ实现轮播图

最新推荐文章于 2022-09-08 00:27:36 发布

-多巴胺-

最新推荐文章于 2022-09-08 00:27:36 发布

阅读量927

点赞数

分类专栏：代码

本文链接：https://blog.csdn.net/weixin_43012505/article/details/89455145

版权

代码专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<script>
        $(function(){
            var t;
            var index= 0;
            t=setInterval(play,5000);
            //自动轮播
            function play(){
                
            // setTimeout(function(){
                //自动运行
                index++;
            if (index > 3) {
                index = 0
            }
            $(".left-icon li").eq(index).find("span").addClass("white");
            $(".left-icon li").eq(index).siblings().find("span").removeClass("white");
            $(".left-img li").eq(index).fadeIn().siblings().fadeOut();
            $(".left-tit li").eq(index).fadeIn().siblings().fadeOut();
            //},5000)
            }
            //向左
            $("#toleft").click(function(){
            index--;
            if (index < 0){
                index=3;
            }
            //判断index<0的情况为：开始点击#toright  index=0时  再点击 #toleft 为负数了 会出错
            $(".left-icon li").eq(index).find("span").addClass("white");
            $(".left-icon li").eq(index).siblings().find("span").removeClass("white");
            $(".left-img li").eq(index).fadeIn().siblings().fadeOut();
            $(".left-tit li").eq(index).fadeIn().siblings().fadeOut();
            })
            //向右
            $("#toright").click(function(){
            index++;
            if (index >= 4){
                index=0;
            }
            //判断index<0的情况为：开始点击#toright  index=0时  再点击 #toleft 为负数了 会出错
            $(".left-icon li").eq(index).find("span").addClass("white");
            $(".left-icon li").eq(index).siblings().find("span").removeClass("white");
            $(".left-img li").eq(index).fadeIn().siblings().fadeOut();
            $(".left-tit li").eq(index).fadeIn().siblings().fadeOut();
            });
            //鼠标经过停止
            $(".news-l").mouseenter(function() {
                $(".turn").show();
                console.log("t");
                clearInterval(t);
            });
            //鼠标离开继续
            $(".news-l").mouseleave(function() {
                $(".turn").hide();
                console.log('aaa');
                t = setInterval(play, 3000)
            });
        });
    </script>