js图片轮播图

蹲街弑〆低调 提交于 2020-02-04 04:09:09

/*焦点图*/
        var Box='.carousel';//盒子
        var Menu=$(Box+' .l_cursor li');//圆点菜单
        var Con=$(Box+' .carouselChange li');//大图
        var Text=$(Box+' .text li');//图注文字
        var Prev=$(Box+' .Prev');//上一页
        var Next=$(Box+' .next');//下一页
        var Counts=$(Con).size();//获取li总数
        var nowIndex=0;
        var timer;
        /* 点击切换 */
        $(Menu).click(function(){
            var i=$(Menu).index(this)
            gotoPage(i);
        });
        /* 打开相应的标签 */
        function gotoPage(i){
            $(Menu).removeClass("current").eq(i).addClass("current");
            $(Con).fadeOut(200).eq(i).fadeIn(200);
            $(Text).hide().eq(i).fadeIn(200);
            nowIndex=i;
        };
        /* 下一页 */
        $(Next).click(function(){
            gotoR();
        });
        function gotoR(){
            nowIndex++;
            if(nowIndex > Counts-1){
                nowIndex=0;
            }
            gotoPage(nowIndex);
        };
        /* 上一页 */
        $(Prev).click(function(){
            nowIndex--;
            if(nowIndex < 0){
                nowIndex=Counts-1
            }
            gotoPage(nowIndex);
        });
        /* 自动轮播 */
        function setAuto(){
            if(Counts>1){
                timer=setInterval(gotoR,3000);
            };
        };
        setAuto();
        /* 鼠标经过暂停,离开继续轮播 */
        $(Box).hover(function(){
                    $(Prev).show();
                    $(Next).show();
                    if(timer){
                        clearInterval(timer);
                    }
                },
                function(){
                    $(Prev).hide();
                    $(Next).hide();
                    setAuto();
                });
        /*焦点图*/

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!