javascript - 一个轮播图片的功能，效果不是很理想，麻烦帮忙看看哪里逻辑出问题了？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 一个轮播图片的功能，效果不是很理想，麻烦帮忙看看哪里逻辑出问题了？

伊谢尔伦 2017-04-11 10:34:34

[JavaScript讨论组]

332

我直接代码吧：

图片能跑（默认向前或者默认向后，单独的跑一点问题没有），就是在默认向后跑的情况下，按了上一张（触发向前跑）就出问题--理论上应该是向前跑，然后再在当前的位置再默认向后跑，可是它仍然是以未触发向前跑之前的顺序向后跑，那么反应在页面上的效果就是感觉按了想前一次的时候，再次向后跑的时候，它会中间跳过一次（这一次被向前所占用了），不知道我的意思表述明白没有，请问大神，该怎么解决这个情况？

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(5)

怪我咯2017-04-11 10:36:34 5楼

mark后面看看，如果实在急用，推荐superslide，非常方便。

赞 +0

添加回复

PHP中文网2017-04-11 10:36:34 4楼

直接丢给你之前写的轮播题主自己看下吧一共两个轮播 jQ的地址换下 img路径换下

<head>
    <meta charset="UTF-8">
    <title>123</title>
    <script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
    <style type="text/css">
        html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img{margin: 0;padding: 0;font-family: "微软雅黑";}
        a{text-decoration: none;}
        a img{border: 0;}
        html{font-size: 62.5%;font-family: "微软雅黑";}
        .clearfix:before{clear: both;display: table;content: "";visibility: hidden;height: 0;}
        .clearfix:after{clear: both;display: table;content: "";visibility: hidden;height: 0;}
        .heart{padding: 0 5em;margin: 0 auto;}
    </style>
</head>
<body>
    <!--轮播1-->
    <p class="carousel-01">
        <!--轮播可视窗口-->
        <p class="imgWindow">    
            <!--轮播左右翻页器-->
            <!--<p class="crsControl crsControl-left">    
                <span>&lang;</span>
            </p>    
            <p class="crsControl crsControl-right">
                <span>&rang;</span>
            </p>-->
            <!--轮播左右翻页器End-->
            <!--轮播主体-->
            <p class="allImg clearfix" style="left: 0px;">        
                <a href="#" class="imgs"> 
                    <img src="images/0711/001.jpg" alt="001">
                    <h1>1st</h1>
                </a>
                <a href="#" class="imgs"> 
                    <img src="images/0711/006.jpg" alt="002"> 
                    <h1>2nd</h1>
                </a>
                <a href="#" class="imgs"> 
                    <img src="images/0711/003.jpg" alt="003"> 
                    <h1>3rd</h1>
                </a>
                <a href="#" class="imgs"> 
                    <img src="images/0711/004.jpg" alt="004"> 
                    <h1>4th</h1>
                </a>
                <a href="#" class="imgs"> 
                    <img src="images/0711/005.jpg" alt="005"> 
                    <h1>5th</h1>
                </a>
            </p>
            <!--轮播主体End-->
        </p>
        <!--轮播可视窗口End-->
    </p>
    
    <style type="text/css">
        /*轮播主体*/
        p.carousel-01{width: 60%;margin-left: auto;margin-right: auto;margin-top: 50px;}
        p.carousel-01 .imgWindow{background: #008000;height: 100%;overflow: hidden;position: relative;}
        p.carousel-01 .allImg{width: 500%;height: 100%;position: relative;}
        p.carousel-01 .allImg a.imgs{display: block;float: left;width: 20%;height: 100%;position: relative;cursor: default;}
        p.carousel-01 .allImg a.imgs img{width: 100%;height: 100%;}
        p.carousel-01 .allImg a.imgs h1{color: #FFFFFF;font-size: 5rem;position: absolute;top: 70%;left: 50%;transform: translateX(-50%);cursor: pointer;}
        /*左右翻页*/
        /*p.carousel-01 .crsControl{position: absolute;top: 0;z-index: 1000;height: 100%;width: 10%;cursor: pointer;}
        p.carousel-01 .crsControl-left{left: 0;background-image: linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.001));}
        p.carousel-01 .crsControl-right{right: 0;background-image: linear-gradient(270deg,rgba(255,255,255,.5),rgba(255,255,255,.001));}
        p.carousel-01 .crsControl span{color: #FFFFFF;font-size: 5rem;text-align: center;position: absolute;top: 40%;left: 50%;transform: translate(-50%);}*/
    </style>
    
    <script type="text/javascript">
        
        //自动轮播
        function carouselFst(){
            crsFst = setInterval(function(){
                var picsNum = $('.imgWindow .allImg').attr('style'); 
                picsNum = picsNum.substr(7,1);
                if(picsNum == 'p'){
                    $(".imgWindow .allImg").animate({left:'-100%'},600);
                }else if(picsNum == 4){
                    $(".imgWindow .allImg").animate({left:'0'},600)
                }else{
                    picsNum = parseInt(picsNum);
                    picsNum = picsNum + 1;
                    $(".imgWindow .allImg").animate({left:'-'+picsNum+'100%'},600);
                }
            },2000);
        }
        
        //鼠标悬浮停止轮播
        $(function crsAll(){
            carouselFst();
            $('.imgWindow').hover(function(e){
                clearInterval(crsFst);
            },carouselFst)
        })

    </script>
    <!--轮播1end-->
    
    <!--选中时的背景颜色和字体颜色-->
    <p class="selected">选中时的背景颜色和字体颜色</p>
    <style type="text/css">
        p.selected::selection{background: #FF6600;color: #FFFFFF;}
        p.selected{text-align: center;margin-top: 20px;font-size: 30px;}
    </style>
    <!--选中时的背景颜色和字体颜色 end-->
    
    <!--轮播-2start-->
    <p class="carousel-02">
        <!--轮播可视窗口-->
        <p class="carousel-window">
            <!--轮播左右翻页器-->
            <p class="crsControl crsControl-left" onclick="pagePrev()">    
                <span>&lang;</span>
            </p>    
            <p class="crsControl crsControl-right" onclick="pageNext()">
                <span>&rang;</span>
            </p>
            <!--轮播左右翻页器 End-->
            <!--序号选择器-->
            <p class="banner-number">
                <span class="carousel-bot-control" title="1" onclick="btn01(0)">1</span>
                <span class="carousel-bot-control" title="2" onclick="btn01(1)">2</span>
                <span class="carousel-bot-control" title="3" onclick="btn01(2)">3</span>
                <span class="carousel-bot-control" title="4" onclick="btn01(3)">4</span>
                <span class="carousel-bot-control" title="5" onclick="btn01(4)">5</span>
            </p>
            <!--序号选择器 End-->
            <!--BANNER-->
            <a href="#">
                <img id="carousel-show" src="images/0711/001.jpg" alt="carousel-img0" />
                <h1 id="carousel2H1">banner01</h1>
            </a>
            <!--BANNER End-->
        </p>
        <!--轮播可视窗口 End-->
    </p>
    
    <style type="text/css">
        p.carousel-02{width: 60%;margin-left: auto;margin-right: auto;margin-top: 50px;min-width: 570px;}
        p.carousel-02 .carousel-window{position: relative;}
        p.carousel-02 .carousel-window a{display: block;cursor: default;}
        p.carousel-02 .carousel-window img{width: 100%;}
        p.carousel-02 .carousel-window h1#carousel2H1{color: #FFFFFF;font-size: 5rem;position: absolute;top: 70%;left: 50%;transform: translateX(-50%);cursor: pointer;}
        /*left&right*/
        p.carousel-02 .crsControl{position: absolute;top: 0;z-index: 1000;height: 100%;width: 10%;cursor: pointer;}
        p.carousel-02 .crsControl-left{left: 0;background-image: linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.001));}
        p.carousel-02 .crsControl-right{right: 0;background-image: linear-gradient(270deg,rgba(255,255,255,.5),rgba(255,255,255,.001));}
        p.carousel-02 .crsControl span{color: #FFFFFF;font-size: 5rem;text-align: center;position: absolute;top: 40%;left: 50%;transform: translate(-50%);}
        p.carousel-02 .crsControl span::selection{background: rgba(255,255,255,0);}
        /*control*/
        p.carousel-02 .banner-number{text-align: center;position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);}
        p.carousel-02 .banner-number .carousel-bot-control{color: #FFFFFF;font-size: 2rem;padding: 0 1rem;cursor: pointer;display: inline-block;}
    </style>
    
    <script type="text/javascript">
        
        var carouselImgs = new Array();
            carouselImgs[0] = 'images/0711/001.jpg';
            carouselImgs[1] = 'images/0711/006.jpg';
            carouselImgs[2] = 'images/0711/003.jpg';
            carouselImgs[3] = 'images/0711/004.jpg';
            carouselImgs[4] = 'images/0711/005.jpg';
        
        var banner = document.getElementById('carousel-show');
        var bannerTitle = document.getElementById('carousel2H1');
        var count = 0;
        function carouselDemo(){
            carousel2 = setInterval(function(){
                var imgNow = document.getElementById('carousel-show').getAttribute('alt');
                var imgNum = imgNow.substr(12,1);
                imgNum = parseInt(imgNum);
                imgNum++;
                if(imgNum == 5){
                    imgNum = 0;
                    count = imgNum + 1;
                    banner.setAttribute('src',carouselImgs[imgNum]);
                    banner.setAttribute('alt','carousel-img'+imgNum);
                    bannerTitle.innerHTML="banner0"+count;
                }else{
                    count = imgNum + 1;
                    banner.setAttribute('src',carouselImgs[imgNum]);
                    banner.setAttribute('alt','carousel-img'+imgNum);
                    bannerTitle.innerHTML="banner0"+count;
                }
            },2000); 
        }
        
        //鼠标悬浮停止轮播
        $(function(){
            carouselDemo();
            $('p.carousel-02 .carousel-window').hover(function(e){
                clearInterval(carousel2);
            },carouselDemo)
        })
        
        //prev
        function pagePrev(){
            var imgNow = document.getElementById('carousel-show').getAttribute('alt');
            var imgNum = imgNow.substr(12,1);
            imgNum = parseInt(imgNum);
            imgNum--;
            if(imgNum < 0){
                imgNum = 4;
                count = imgNum + 1;
                banner.setAttribute('src',carouselImgs[imgNum]);
                banner.setAttribute('alt','carousel-img'+imgNum);
                bannerTitle.innerHTML="banner0"+count;
            }else{
                count = imgNum + 1;
                banner.setAttribute('src',carouselImgs[imgNum]);
                banner.setAttribute('alt','carousel-img'+imgNum);
                bannerTitle.innerHTML="banner0"+count;
            }
        }
        
        //next
        function pageNext(){
            var imgNow = document.getElementById('carousel-show').getAttribute('alt');
            var imgNum = imgNow.substr(12,1);
            imgNum = parseInt(imgNum);
            imgNum++;
            if(imgNum > 4){
                imgNum = 0;
                count = imgNum + 1;
                banner.setAttribute('src',carouselImgs[imgNum]);
                banner.setAttribute('alt','carousel-img'+imgNum);
                bannerTitle.innerHTML="banner0"+count;
            }else{
                count = imgNum + 1;
                banner.setAttribute('src',carouselImgs[imgNum]);
                banner.setAttribute('alt','carousel-img'+imgNum);
                bannerTitle.innerHTML="banner0"+count;
            }
        }
        
        //control
        var controlBtn = document.getElementsByClassName('carousel-bot-control');
        function btn01(num){
            var controlNum = controlBtn.item(num).getAttribute('title');
            controlNum = parseInt(controlNum);
            bannerTitle.innerHTML="banner0"+controlNum;
            controlNum = controlNum - 1;
            banner.setAttribute('src',carouselImgs[controlNum]);
            banner.setAttribute('alt','carousel-img'+controlNum);
        }

    </script>
    <!--轮播-2end-->
</body>

赞 +0

添加回复