问

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

可乐加芬达61158 发布于 2022-11-13 11:28

html

我直接代码吧：

轮播

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

5 个回答

https://github.com/gonewithfa... 题主可以简单的看一下我的哦，js一百六十行左右

2022-11-13 12:09 回答

woorain_77b002
没必要那么复杂吧

2022-11-13 12:09 回答

mobiledu2502906525
粗看了一下，按了向前之后，I是不是应该减一？

2022-11-13 12:09 回答

众大文化_724

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

<head>
    <meta charset="UTF-8">
    <title>123</title>
    <script type="text/javascript" src="js/jquery-3.0.0.min.js?1.2.1" ></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>

2022-11-13 12:09 回答

兆华2502940257

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

2022-11-13 12:09 回答

qweqwe

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签