麻烦老师看下轮播图的问题

为什么我这个轮播图鼠标移入的方向不同，会出现不一样的BUG？找不到问题在哪里。当鼠标从底部移入的时候没有错误，但是从右侧滑入的时候确是有问题的？？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>幕淘网</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/jquery.js"></script>
</head>

<body>
    <div id='box'>
        <header id='nav-head'>
            <div class='nav-head-list'>
                <ul class='nav-left'>
                    <li class='downlist'><a href="#" class="loning">亲,&nbsp;&nbsp;请登录</a></li>
                    <li class='downlist'><a href="#">免费注册</a></li>
                    <li class='downlist'><a href="#">手机逛幕淘</a></li>
                </ul>
                <ul class='nav-right'>
                    <li class='downlist downshow'><a href="#" class='downlist-link'>我的幕淘<i class='ico'></i></a>
                        <ul class='downlist-list downleft'>
                            <li class='my-list-item'><a href="#" class='downlist-item'></a>我的订单</li>
                            <li class='my-list-item'><a href="#" class='downlist-item'></a>未支付的</li>
                            <li class='my-list-item'><a href="#" class='downlist-item'></a>已支付的</li>
                        </ul>
                    </li>
                    <li class='downlist downshow'><a href="#" class='downlist-link'>收藏夹</a><i class='ico'></i>
                        <ul class='downlist-list downleft'>
                            <li class='my-list-item'><a href="#" class='downlist-item'>收藏的宝贝</a></li>
                            <li class='my-list-item'><a href="#" class='downlist-item'>足迹</a></li>
                        </ul>
                    </li>
                    <li class='downlist downshow'><a href="#" class='downlist-link'>商品分类</a>
                        <p class='ico'></p>
                        <ul class='downlist-list downleft'>
                            <li class='my-list-item'><a href="#" class='downlist-item'>商品分类1</a></li>
                            <li class='my-list-item'><a href="#" class='downlist-item'>商品分类2</a></li>
                            <li class='my-list-item'><a href="#" class='downlist-item'>商品分类3</a></li>
                            <li class='my-list-item'><a href="#" class='downlist-item'>商品分类4</a></li>
                        </ul>
                    </li>
                    <li class='downlist downshow'><a href="#" class='downlist-link'>卖家中心</a>
                        <p class='ico'></p>
                        <ul class='downlist-list downleft'>
                            <li class='my-list-item'><a href="#" class='downlist-item'>上架的宝贝</a></li>
                            <li class='my-list-item'><a href="#" class='downlist-item'>已出售的宝贝</a></li>
                            <li class='my-list-item'><a href="#" class='downlist-item'>已审核的宝贝</a></li>
                            <li class='my-list-item'><a href="#" class='downlist-item'>我的订单</a></li>
                            <li class='my-list-item'><a href="#" class='downlist-item'>我的发货</a></li>
                            <li class='my-list-item'><a href="#" class='downlist-item'>我的客服</a></li>
                        </ul>
                    </li>
                    <li class='downlist downshow'><a href="#" class='downlist-link'>联系客服</a>
                        <p class='ico'></p>
                        <ul class='downlist-list downright'>
                            <li class='my-list-item'><a href="#" class='downlist-item'>卖家客服</a></li>
                            <li class='my-list-item'><a href="#" class='downlist-item'>买家客服</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class='nav-logo'>
                <div class='imglogo'></div>
                <div class='textlogo'></div>
            </div>
            <div class='search'>
                <input type="text" name='search' class='search-list'>
                <button class='search-btn'>搜索</button>
            </div>
            <div class='shopcar'>
                <div class='carimg'></div>
                <div class='shopText'>购物车</div>
            </div>
        </header>
        <div id='bodyer'>
            <div class='menu-list'>
                <ul class='menu-nav'>
                    <li class='menuright menuleft'><a href="#" class='item'>商品分类</a>
                        <ul class='LeftmenuItem'>
                            <li class='leftlist'><a href="#" class='leftitem'>家用电器</a></li>
                            <li class='leftlist'><a href="#" class='leftitem'>手机、运营商、数码</a></li>
                            <li class='leftlist'><a href="#" class='leftitem'>电脑、办公</a></li>
                            <li class='leftlist'><a href="#" class='leftitem'>家居、家具、家装、厨具</a></li>
                            <li class='leftlist'><a href="#" class='leftitem'>男装、女装、童装、内衣</a></li>
                            <li class='leftlist'><a href="#" class='leftitem'>化妆、清洁、宠物</a></li>
                            <li class='leftlist'><a href="#" class='leftitem'>运动户外、钟表</a></li>
                            <li class='leftlist'><a href="#" class='leftitem'>汽车、汽车用品</a></li>
                            <li class='leftlist'><a href="#" class='leftitem'>母婴、玩具乐器</a></li>
                            <li class='leftlist'><a href="#" class='leftitem'>食品、酒类、生鲜、特产</a></li>
                            <li class='leftlist'><a href="#" class='leftitem'>医药保健</a></li>
                            <li class='leftlist'><a href="#" class='leftitem'>图书、音箱、电子书</a></li>
                            <li class='leftlist'><a href="#" class='leftitem'>彩票、旅行、充值、票务</a></li>
                            <li class='leftlist'><a href="#" class='leftitem'>理财、众筹、白条、保险</a></li>
                        </ul>
                    </li>
                    <li class='menuright'><a href="#" class='item'>数码城</a></li>
                    <li class='menuright'><a href="#" class='item'>天黑黑</a></li>
                    <li class='menuright'><a href="#" class='item'>团购</a></li>
                    <li class='menuright'><a href="#" class='item'>发现</a></li>
                    <li class='menuright'><a href="#" class='item'>二手特价</a></li>
                    <li class='menuright'><a href="#" class='item'>名品汇</a></li>
                </ul>
            </div>
            <div class='banner banner-wh'>
                <div id='bannerbox' class='bannerbox'>
                    <img src="./img/banner01.png" alt="" class='bannerimg'>
                    <img src="./img/banner02.png" alt="" class='bannerimg'>
                    <img src="./img/4444.jpg" alt="" class='bannerimg'>
                    <img src="./img/banner01.png" alt="" class='bannerimg'>
                </div>
                <ul id='leftrightBtn'>
                    <p class='leftbtn'>left</p>
                    <p class='rightbtn'>right</p>
                    </ul>
                <div class='slider'>
                    <ul id='slideritem'>
                        <li class='sliderlist'>1</li>
                        <li class='sliderlist'>2</li>
                        <li class='sliderlist'>3</li>
                    </ul>
                </div>
            </div>
            <div class='banner-right'>
                <div class='banne-news banner-wh'>
                    <h3 class='title'>幕快报 <a href="#" class='bannerNews-more'>更多&nbsp;&nbsp;></a></h3>
                    <a href="#" class='content-list'> <span>[特惠]</span>精选图书满150减50</a>
                    <a href="#" class='content-list highlight'><span>[公告]</span>因广州图书仓库搬迁配送延迟</a>
                    <a href="#" class='content-list'><span>[特惠]</span>爆款手机12期免息 抽奖赢电视</a>
                    <a href="#" class='content-list'><span>[公告]</span>广东、福建受台风影响配送延迟</a>
                    <a href="#" class='content-list'><span>[特惠]</span>大闸蟹领券399减180</a>
                </div>
                <table class='banner-tab banner-wh'  border="0" cellspacing="1" cellpadding="0">
                    <tr class='tab-border tr1'>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr class='tab-border tr2'>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr class='tab-border tr3'>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
                <div class='banner-down-pic banner-wh'></div>
            </div>
        </div>


    </div>
    <!-- <footer id='foot'></footer> -->
</body>
<script src="./js/mk.js">
   
</script>

</html>
//CSS
*{margin:0;padding:0;text-decoration: none;list-style: none;}
#box{
    width: 1536px;
    /* width: 100%; */
}
#nav-head{
    width: 1200px;
    height: 165px;
    margin:0px auto;
   background-color: #F4F5F9;
}
#nav-head>.nav-head-list{
    height: 38px;
    border-bottom:1px solid #cdd0d4 ;
}
.nav-left .loning{
    color:red;
}
.nav-head-list .nav-right{
    float:right;
}
.nav-right .ico{
    width: 10px;
    height: 10px;
    display: inline-block;
    background: url(../img/dropdown-arrow.png) no-repeat;
    vertical-align: middle;
    margin:0px 10px 0px 8px;
}
.nav-head-list .downlist {
    float: left;
    line-height: 38px;
    text-align: center;
    font-size: 9px;
    padding:0px 10px 0px 9px;
    position: relative;
    border-left:1px solid #f3f5f7;
    border-right:1px solid #f3f5f7;
}
.nav-right .downlist-list{
    float: right;
}
.nav-right .downlist:hover .ico{
    background: url(../img/dropdown-arrow-active.png) center no-repeat;
}
.nav-right .downlist:hover{
    border-left:1px solid #cdd0d4;
    border-right:1px solid #cdd0d4;
    background-color: #fff;
}

.downlist-list{
    position: absolute;
    background-color: #fff;
    border-left:1px solid #cdd0d4;
    border-right:1px solid #cdd0d4;
    border-bottom:1px solid #cdd0d4 ;
    display: none;
}
.downleft{
    left:-1px;
    right:auto;
}
.downright{
    right:-1px;
    left:auto;
}
.my-list-item{
    width: 60px;
    height: 25px;
    line-height: 20px;
    white-space: nowrap;
}
.my-list-item:hover{
    background-color: #f3f5f7;
}
.nav-right .downlist:hover .downlist-link{
    color:red;
}
.nav-logo{
    width: 137px;
    height: 49px;
    margin:35px 144px 40px 13px;
    float: left;
}
.nav-logo .imglogo{
    width: 48px;
    height: 48px;
    float: left;
    background: url(../img/logo.png) no-repeat;
}
.nav-logo .textlogo{
    width: 76px;
    height: 48px;
    float: left;
    margin-left:13px;
    background: url(../img/textLogo.png) no-repeat;
}
.search{
    width: 678px;
    height: 41px;
    float: left;
    margin:37px 50px 47px 0px;
}
.search-list{
    width: 606px;
    height: 41px;
    border:none;
    float: left;
}
.search-btn{
    width: 72px;
    height: 41px;
    border:none;
    background-color: #000;
    color:#fff;
    float: left;
}
.shopcar{
    width: 160px;
    height: 42px;
    background-color:red;
    float: left;
    margin:37px 0px 47px 18px;
    line-height: 42px;
}
.carimg{
    width: 14px;
    height: 14px;
    background: url(../img/shopcar.png) no-repeat;
    margin:14px 14px 14px 14px;
    float: left;
}
.shopText{
    width: 82px;
    height: 14px;
    color:#fff;
    font-size: 14px;
    float: left;
}



#bodyer{
    background-color: #f3f5f7;
}
.black{
    height: 48px;
    background: #000;
    display: inline-block;
}
.menu-list{
    width: 100%;
    height: 48px;
    background-color: #000;
    display: inline-block;
}
.menuright{
    display: inline-block;
    margin-right:47px;
    line-height: 48px;
}
.menuleft{
    text-align: center;
    width: 208px;
    height: 563px;
    background-color: red;
    float: left;
    margin-left:168px;
    margin-top:-5px;
    opacity: 0.8;
}
.LeftmenuItem{
    text-align: left;
}
.LeftmenuItem li:nth-of-type(1){
    margin-top:27px;
}
.leftlist{
    margin-left:15px;
    font-size: 14px;
    line-height: 35px;
}
.leftlist:before{
    content:'';
    width: 10px;
    height: 15px;
    float: right;
    margin-right: 15px;
    margin-top:12px;
    background: url(../img/menu-active.png) 0px 1px no-repeat;
}
.leftitem,.item{
    color:#fff;
}
.banner-wh{
    margin-left:6px;
    float: left;
    background-color: #fff;
}
.banner{
    width: 728px;
    height: 516px;
    margin-left:382px;
    margin-top:6px;
    overflow: hidden;
}
.bannerbox{
    width: 2912px;
}
.bannerimg{
    float: left;
}
.leftbtn{
    width: 40px;
    height: 40px;
    background-color: rgb(7, 253, 77);
    position: absolute;
    top:450px;
    background: url(../img/left-right.png) no-repeat;
}
.rightbtn{
    width: 40px;
    height: 40px;
    position: relative;
    right:-688px;
    background-color: rgb(35, 208, 75);
    top:230px;
    background: url(../img/left-right.png) -30px 0px no-repeat;
}
.slider{
    display: inline-block;
    width: 728px;
    height: 30px;
    position: relative;
    top:-50px;
    text-align: center;
}
.slideritem{
    width: 100px;
    height: 30px;
    display: inline-block;
    text-align: center;
}
.sliderlist{
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: #fff;
    border-radius: 50%;
}
.banne-news{
    width: 246px;
    height: 194px;
    margin-top:6px;
    border:1px solid #d9dde1;
    border-bottom: none;
}
.bannerNews-more{
    float: right;
    margin-right:18px;
    font-size: 12px;
    color:#93999f;
}
.content-list{
    font-size: 12px;
    display: inline-block;
    margin-top:12px;
    margin-left:18px;
}
.content-list span{
    font-weight: bold;
}
.highlight{
    color:red;
}
.banner-tab{
    width: 248px;
    background:#d9dde1;
}
.tab-border td{
    background:#fff ;
}
.tab-border td:before{
    content: '';
    width: 24px;
    height: 40px;
    display: inline-block;
    margin:14px 12px 14px 17px;
    background: url(../img/1.png) no-repeat;
}
.banner-down-pic{
    width: 248px;
    height: 90px;
    background: url(../img/ad.png) no-repeat;
}
.title{
    color:#f01414;
    font-size: 16px;
    margin-top:18px;
    margin-left:18px;
}
//JS
var down=document.getElementById('nav-head').getElementsByClassName('downshow');
var downlist=document.getElementById('nav-head').getElementsByClassName('downlist-list')
for(var i=0;i<down.length;i++){
    (function(i){
      down[i].onmouseover=function(){
            downlist[i].style.display='block'
      },
      down[i].onmouseout=function(){
        downlist[i].style.display='none'
      }
    })(i)
}
//banner
var bannerbox=document.getElementById('bannerbox');
var bannerimg=document.getElementsByClassName('bannerimg');
var slideritem=document.getElementById('slideritem').getElementsByClassName('sliderlist');
var btn=document.getElementById('leftrightBtn').getElementsByClassName('leftbtn')
var left=0;
function run(){
  if(left<=-2184){
    bannerbox.style.marginLeft='0';
    left=0
  }
  var n=(left%728==0)?1000:0;
  var index=parseInt(Math.abs(left/728));
  changerImg();
  changeSlider(index);
  left--;
  time=setTimeout(run,n)
}
run();
//图片
function changerImg(){
  bannerbox.style.marginLeft=left+'px';
}
//圆点
function changeSlider(index){
    for(var i=0;i<slideritem.length;i++){
        slideritem[i].style.color='#000';
        slideritem[i].style.backgroundColor='#fff';
    }
    slideritem[index].style.color='#fff';
    slideritem[index].style.backgroundColor='#000';
}
//鼠标移动到图片
for(var i=0;i<bannerimg.length;i++){
  (function(i){
    bannerimg[i].onmouseover=function(){
      clearTimeout(time);
      left=(-i*728);
      changerImg();
      changeSlider(i)
    }
    bannerimg[i].onmouseout=function(){
        run();
    }
  })(i)
}
//鼠标移动到圆点
for(var i=0;i<slideritem.length;i++){
  (function(i){
    slideritem[i].onmouseover=function(){
      clearTimeout(time);
      left=-i*728;
      changerImg();
      changeSlider(i);
    }
    slideritem[i].onmouseout=function(){
      run();
    }
  })(i)
}
//左键
for(var i=0;i<btn.length;i++){
  (function(i){
      btn[i].onclick=function(){
        clearTimeout(time);
        i--
        left=-2184+(-i*728)
        changerImg();
        if(i<-3){
          i=-1
          }
        changeSlider(i+3)  
          if(left>0){
            bannerbox.style.marginLeft='-1456'+'px';
            left=0
          }
        }
  })(i)
}

weixin_慕移动6442865 2019-10-25

源自：实战：站点导航组件化 3-5 让菜单下拉

收起

3回答

好帮手慕星星回答被采纳获得+3积分 2019-10-27 10:21:02

同学你好，

老师这边测试左键是没有问题的。

建议在移入左右按钮的时候停止轮播，不要在点击的时候停止，避免点击的时候和自动轮播一起执行。如下：

再测试下，祝学习愉快！

收起回答

好帮手慕糖 2019-10-26 13:47:21

同学你好，改变分辨率是与外层100%，有关系的。分辨率这个指的是不同设备的大小。

但是缩放浏览器是会变的，因为这个缩放会改变原有的比例。一般不建议缩放。

另，当前我们先不考虑不同分辨率，响应式的问题，后面“阶段三”中会讲响应式布局哦。

希望能帮助到你，祝学习愉快！

收起回答

提问者 weixin_慕移动6442865 #1

再麻烦老师看下左右按键的问题，右键好像没问题，发现往左按的时候有点小BUG，不知道怎么处理。 //左键 for(var i=0;i<btnLf.length;i++){ (function(i){ btnLf[i].onclick=function(){ // clearTimeout(time); i-- left=-2184+(-i*728) changerImg(); if(i<-3){ i=-1 } changeSlider(i+3) if(left>0){ bannerbox.style.marginLeft='-1456'+'px'; left=0 } } })(i) } //右键 for(var i=0;i<btnRg.length;i++){ (function(i){ btnRg[i].onclick=function(){ // clearTimeout(time); i++ left=(-i*728) changerImg(); if(i>2){ i=0 } changeSlider(i) if(left>2184){ bannerbox.style.marginLeft='0'+'px'; left=0 } } })(i) }

2019-10-26 19:28:22