H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】一个轮播图片的功能,效果不是很理想,麻烦帮忙看看哪里逻辑出问题了?

我直接代码吧:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-touch-fullscreen" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <script src="js/commen.js" type="text/javascript"></script>
        <title>轮播</title>
        <style>
            body,
            html {
                margin: 0;
                height: 0;
                width: 100%;
                height: 100%;
                clear: both;
            }
            
            ul,
            li {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            
            .parent {
                height: 200px;
            }
            
            .carousel {
                width: 100%;
                height: 100%;
                max-height: 100%;
                overflow: hidden;
            }
            
            .carousel ul {
                height: 100%;
                max-height: 100%;
                width: auto;
                display: block;
                position: relative;
            }
            
            .car_list {}
            
            .carousel ul li {
                width: 100%;
                max-width: 100%;
                height: 100%;
                max-height: 100%;
                position: absolute;
                float: left;
            }
            
            .carousel ul li img {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div class="parent">
            <div class="carousel">
                <ul class="car_list">
                    <li class="car_item">
                        <img src="img/cof.jpg" />
                    </li>
                    <li class="car_item">
                        <img src="img/m_bar8.jpg" />
                    </li>
                    <li class="car_item">
                        <img src="img/m_bar9.jpg" />
                    </li>
                    <li class="car_item">
                        <img src="img/m_bar10.jpg" />
                    </li>
                    <!--<li class="car_item">
                        <img src="img/m_bar11.jpg" />
                    </li>
                    <li class="car_item">
                        <img src="img/m_bar12.jpg" />
                    </li>
                    <li class="car_item">
                        <img src="img/m_bar13.jpg" />
                    </li>-->
                </ul>
            </div>
        </div>
        <div class="dorp_btn">
            <input type="button" id="prove" value="<"/>
            <input type="button" id="next" value=">"/>
        </div>
        <script>
            window.onload = function() {
                var parent = document.getElementsByClassName("carousel")[0].parentNode;
                var list = document.getElementsByClassName("carousel")[0].children[0];
                var item = list.children;
                var LEN = item.length;
                var I = 1;
                var prove=document.getElementById("prove");
                var next=document.getElementById("next");
                
                var attrStyle = function(elem, attr) { //获取样式
                    if(elem.attr) {
                        return elem.style[attr];
                    } else if(elem.currentStyle) {
                        return elem.currentStyle[attr];
                    } else if(document.defaultView && document.defaultView.getComputedStyle) {
                        attr = attr.replace(/([A-Z])/g, '-$1').toLowerCase();
                        return document.defaultView.getComputedStyle(elem, null).getPropertyValue(attr);
                    } else {
                        return null;
                    }
                }
                if(parent.tagName != "BODY") {
                    var height = parseInt(attrStyle(parent, "height"));
                    var width = parseInt(attrStyle(parent, "width"));
                    setStyle(width, height);
                } else {
                    var width = window.screen.width;
                    var width = 100;
                    setStyle(width, height);
                }

                function setStyle(width, height) {
                    list.style.cssText = "width:" + len * width + "px;height:" + height + "px;";
                    for(var i = 0, len = item.length; i < len; i++) {
                        (function(i) {
                            item[i].style.cssText = "left:" + (i-1) * width + "px;" + "width:" + width + "px;";
                        })(i)
                    }
                }
                var timer = setTimeout(run, 1000);

                function run() {//默认是向后走
                    if(I < LEN + 1) {
                        runSetNext();
//                        runSetProve();
                    } else {
                        I = 1;
//                        runSetProve();
                        runSetNext();
                    }
                    I++;
                    setTimeout(run, 1000);
                }
                timer;

                function runSetNext() {//向后走
                    for(var i = 0, len = item.length; i < len; i++) {
                        if(I < LEN) { 
                            if((i - I) * width >= -width) {
                                item[i].style.cssText = "transform: translateX(0);transition:all 350ms;left:" + width * (i - I) + "px;";
//                                item[i].style.left=width * (i - I) + "px";
                            } else {
                                item[i].style.cssText = "transform: translateX(0);transition:all 350ms;left:" + width * ((len - I) + i) + "px;";
//                                item[i].style.left=width *((len - I) + i)+ "px";
                            }
                        } else if(I == LEN) {
                            if((i - I) * width >= -width) {
                                item[i].style.cssText = "transform: translateX(0);transition:all 350ms;left:" + width * (i - I) + "px;";
//                                item[i].style.left=width * (i - I) + "px";
                            } else {
                                item[i].style.cssText = "transform: translateX(0);transition:all 350ms;left:" + width * ((len - I) + i) + "px;";
//                                item[i].style.left=width *((len - I) + i)+ "px";
                            }
                        } else if(I == LEN + 1) {
                            if(width * (i - I) >= -width) {
                                item[i].style.cssText = "transform: translateX(0);transition:all 350ms;left:" + width * (i - I) + "px;";
//                                item[i].style.left=width * (i - I) + "px";
                            } else {
                                item[i].style.cssText = "transform: translateX(0);transition:all 350ms;left:" + width * ((len - I) + i) + "px;";
//                                item[i].style.left=width *((len - I) + i)+ "px";
                            }
                        }
                    }
                }
                function runSetProve(){//向前走
                    for(var i = 0, len = item.length; i < len; i++) {
                        if(I < LEN) {
                            if((i + I) * width <= (len-1)*width) {
                                item[i].style.cssText = "transform: translateX(-360px);transition:all 350ms;left:" + width * ((i + I)-1) + "px;";
                            } else {
                                item[i].style.cssText = "transform: translateX(-360px);transition:all 350ms;left:" + width * ((i-len - 1) + I) + "px;";
                            }
                        } else if(I == LEN) {
                            if((i + I) * width <= (len-1)*width) {
                                item[i].style.cssText = "transform: translateX(-360px);transition:all 350ms;left:" + width * ((i + I)-1) + "px;";
                            } else {
                                item[i].style.cssText = "transform: translateX(-360px);transition:all 350ms;left:" + width * ((i-len - 1) + I) + "px;";
                            }
                        } else if(I == LEN + 1) {
                            if((i + I) * width <= (len-1)*width) {
                                item[i].style.cssText = "transform: translateX(-360px);transition:all 350ms;left:" + width * ((i + I)-1) + "px;";
                            } else {
                                item[i].style.cssText = "transform: translateX(-360px);transition:all 350ms;left:" + width * ((i-len - 1) + I) + "px;";
                            }
                        }
                    }
                }
                next.onclick=function(){
                    return runSetNext();
                }
                
                prove.onclick=function(){
                    return runSetProve();
                }
                
            }
        </script>
    </body>

</html>

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

回答:

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

回答:

直接丢给你之前写的轮播 题主自己看下吧 一共两个轮播 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-->
    <div class="carousel-01">
        <!--轮播可视窗口-->
        <div class="imgWindow">    
            <!--轮播左右翻页器-->
            <!--<div class="crsControl crsControl-left">    
                <span>&lang;</span>
            </div>    
            <div class="crsControl crsControl-right">
                <span>&rang;</span>
            </div>-->
            <!--轮播左右翻页器End-->
            <!--轮播主体-->
            <div 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>
            </div>
            <!--轮播主体End-->
        </div>
        <!--轮播可视窗口End-->
    </div>
    
    <style type="text/css">
        /*轮播主体*/
        div.carousel-01{width: 60%;margin-left: auto;margin-right: auto;margin-top: 50px;}
        div.carousel-01 .imgWindow{background: #008000;height: 100%;overflow: hidden;position: relative;}
        div.carousel-01 .allImg{width: 500%;height: 100%;position: relative;}
        div.carousel-01 .allImg a.imgs{display: block;float: left;width: 20%;height: 100%;position: relative;cursor: default;}
        div.carousel-01 .allImg a.imgs img{width: 100%;height: 100%;}
        div.carousel-01 .allImg a.imgs h1{color: #FFFFFF;font-size: 5rem;position: absolute;top: 70%;left: 50%;transform: translateX(-50%);cursor: pointer;}
        /*左右翻页*/
        /*div.carousel-01 .crsControl{position: absolute;top: 0;z-index: 1000;height: 100%;width: 10%;cursor: pointer;}
        div.carousel-01 .crsControl-left{left: 0;background-image: linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.001));}
        div.carousel-01 .crsControl-right{right: 0;background-image: linear-gradient(270deg,rgba(255,255,255,.5),rgba(255,255,255,.001));}
        div.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-->
    <div class="carousel-02">
        <!--轮播可视窗口-->
        <div class="carousel-window">
            <!--轮播左右翻页器-->
            <div class="crsControl crsControl-left" onclick="pagePrev()">    
                <span>&lang;</span>
            </div>    
            <div class="crsControl crsControl-right" onclick="pageNext()">
                <span>&rang;</span>
            </div>
            <!--轮播左右翻页器 End-->
            <!--序号选择器-->
            <div 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>
            </div>
            <!--序号选择器 End-->
            <!--BANNER-->
            <a href="#">
                <img id="carousel-show" src="images/0711/001.jpg" alt="carousel-img0" />
                <h1 id="carousel2H1">banner01</h1>
            </a>
            <!--BANNER End-->
        </div>
        <!--轮播可视窗口 End-->
    </div>
    
    <style type="text/css">
        div.carousel-02{width: 60%;margin-left: auto;margin-right: auto;margin-top: 50px;min-width: 570px;}
        div.carousel-02 .carousel-window{position: relative;}
        div.carousel-02 .carousel-window a{display: block;cursor: default;}
        div.carousel-02 .carousel-window img{width: 100%;}
        div.carousel-02 .carousel-window h1#carousel2H1{color: #FFFFFF;font-size: 5rem;position: absolute;top: 70%;left: 50%;transform: translateX(-50%);cursor: pointer;}
        /*left&right*/
        div.carousel-02 .crsControl{position: absolute;top: 0;z-index: 1000;height: 100%;width: 10%;cursor: pointer;}
        div.carousel-02 .crsControl-left{left: 0;background-image: linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.001));}
        div.carousel-02 .crsControl-right{right: 0;background-image: linear-gradient(270deg,rgba(255,255,255,.5),rgba(255,255,255,.001));}
        div.carousel-02 .crsControl span{color: #FFFFFF;font-size: 5rem;text-align: center;position: absolute;top: 40%;left: 50%;transform: translate(-50%);}
        div.carousel-02 .crsControl span::selection{background: rgba(255,255,255,0);}
        /*control*/
        div.carousel-02 .banner-number{text-align: center;position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);}
        div.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();
            $('div.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>

回答:

粗看了一下,按了向前之后,I是不是应该减一?

回答:

没必要那么复杂吧

回答:

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

回答:

如果只是为了实现轮播的效果,远远没必要这么做的,即便是原生也有简单的办法。如果你愿意的话可以去我主页看看

本文地址:H5W3 » 【Web前端问题】一个轮播图片的功能,效果不是很理想,麻烦帮忙看看哪里逻辑出问题了?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址