老师为什么移入banner区的右侧左侧和轮播图就会出现问题

首页课程实战体系课手记专栏慕课教程

来源：5-2 作业题

慕雪5599117

2019-03-01 17:12:31

<!DOCTYPE html>

<html>

<head>

<title>jquery大作业</title>

</head>

<body>

<a href="#">手机逛慕课</a>

</div>

<li>

<ul>

<li>已买到的宝贝</li>

</ul>

</li>

<li>

<ul>

<li>收藏的宝贝</li>

<li>收藏的店铺</li>

</ul>

</li>

<li>

</li>

<li>

<ul>

<li>已卖出的宝贝</li>

<li>出售中的宝贝</li>

<li>卖家服务市场</li>

<li>卖家培训中心</li>

</ul>

</li>

<li>

<ul>

<li>消费者客服</li>

</ul>

</li>

</ul>

</div>

<form>

</form>

</div>

<h3>最新加入的商品</h3>

<ul>

<li class="one"><img src="img/cart/1.png" /><div><p class="name">addidas 阿迪达斯训练男子</p><p>￥335 x 1</p></div><span>X</span></li>

<li><img src="img/cart/2.png" /><div><p class="name">玉兰油多效修护三部曲套装</p><p>￥199 x 2</p></div><span>X</span></li>

<li><img src="img/cart/3.png" /><div><p class="name">Appple iPhone 7(A1660)</p><p>￥6188 x 1</p></div><span>X</span></li>

<li><img src="img/cart/4.png" /><div><p class="name">飞利浦面条机HR56/31</p><p>￥659 x 4</p></div><span>X</span></li>

<li><img src="img/cart/5.png" /><div><p class="name">罗技G29力反馈游戏方向</p><p>￥2999 x 1</p></div><span>X</span></li>

<li><img src="img/cart/1.png" /><div><p class="name">addidas 阿迪达斯训练男子</p><p>￥335 x 1</p></div><span>X</span></li>

<li><img src="img/cart/2.png" /><div><p class="name">玉兰油多效修护三部曲套装</p><p>￥199 x 2</p></div><span>X</span></li>

<li><img src="img/cart/3.png" /><div><p class="name">Appple iPhone 7(A1660)</p><p>￥6188 x 1</p></div><span>X</span></li>

<li><img src="img/cart/4.png" /><div><p class="name">飞利浦面条机HR56/31</p><p>￥659 x 4</p></div><span>X</span></li>

<li><img src="img/cart/5.png" /><div><p class="name">罗技G29力反馈游戏方向</p><p>￥2999 x 1</p></div><span>X</span></li>

</ul>

</div>

<p>共27件商品共计￥0.00</p>

<form>

</form>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</div>

</div>

<a href="#">手机壳</a><a href="#">贴膜</a><a href="#">手机储存卡</a><a href="#">数据线</a><a href="#">充电器</a><a href="#">手机耳机</a><a href="#">创意配件</a><a href="#">手机饰品</a><a href="#">手机电池</a><a href="#">苹果周边</a><a href="#">移动电源</a><a href="#">蓝牙耳机</a><a href="#">手机支架</a><a href="#">车载配件</a><a href="#">拍照配件</a>

</div>

</div>

</div>

</div>

<a href="#">智能手环</a><a href="#">智能手表</a><a href="#">智能眼镜</a><a href="#">智能机器人</a><a href="#">运动跟踪器</a><a href="#">健康监测</a><a href="#">智能配饰</a><a href="#">智能家居</a><a href="#">体感车</a><a href="#">无人机</a><a href="#">其他配件</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

*{padding:0px;margin:0px;text-decoration:none;list-style:none;}

.top{width:100%;height:41px;background:#f3f5f7;font-size:13px;}

.top .main{width:1100px;margin:0 auto;height:40px;line-height:40px;border-bottom:1px solid gray;}

.top .main .left{width:600px;height:40px;float:left;}

.top .main .left .login{color:red;margin-left:10px;}

.top .main .left a:hover{color:red;cursor:pointer;}

.top .main .right{width:500px;height:40px;float:left;}

.top .main .right .list:hover{cursor:pointer;}

.top .main .right .list>li{display:inline-block;float:left;margin-right:5px;width:85px;padding-left:10px;}

.top .main .right .list>li div{width:83px;margin-left:-10px;padding-left:10px;}

.top .main .right .list>li div:hover{color:red;}

.top .main .right .list ul{display:none;background:white;border:1px solid gray;margin-left:-10px;position:relative;z-index:1;}

.top .main .right .list ul li{line-height:30px;width:83px;padding-left:10px;}

.top .main .right .list ul li:hover{background-color:#cdd0d4;;}

.logo{width:100%;height:130px;background:#f3f5f7;}

.logo .main{width:1100px;height:130px;margin:0 auto;position:relative;font-size:13px;}

.logo .main .tu{padding-left:10px;padding-top:35px;}

.logo .main .tu:hover{cursor:pointer;}

.logo .main .form{width:560px;height:35px;position:absolute;left:50%;margin-left:-295px;top:50%;margin-top:-17.5px;}

.logo .main .form input{width:490px;height:35px;float:left;}

.logo .main .form button{width:65px;height:35px;color:white;background:black;border:none;float:left;}

.logo .main .form button:hover{cursor:pointer;}

.logo .main .cart{position:absolute;top:50%;left:880px;width:160px;height:35px;background:red;margin-top:-17.5px;line-height:35px;color:white;border-radius:2px;}

.logo .main .cart:hover{color:red;background-color:white;box-shadow:0px 0px 20px 0px rgba(8, 1, 3,0.3);}

.logo .main .cart .tu1,.tu2{margin:0px 12px;vertical-align:middle;}

.logo .main .cartMenu{width:305px;position:absolute;top:50%;margin-top:17.5px;left:880px;box-shadow:0 0 5px 2px rgba(8,1,3,0.3);border-radius:2px;background-color:white;z-index:999;}

.logo .main .cartMenu h3{font-size:13px;height:40px;line-height:40px;padding-left:17px;}

.logo .main .cartMenu .scroll{overflow:auto;height:290px;}

.logo .main .cartMenu .scroll li{width:267px;height:55px;position:relative;font-size:12px;border-bottom:1px solid #C0C0C0;margin:0 auto;}

.logo .main .cartMenu .scroll li:hover{background-color:#f3f5f7;}

.logo .main .cartMenu .scroll .one{border-top:1px solid #C0C0C0;}

.logo .main .cartMenu .scroll li img{margin-left:7px;width:50px;height:50px;padding-top:2.5px;}

.logo .main .cartMenu .scroll li div{position:absolute;top:10px;margin-left:66px;}

.logo .main .cartMenu .scroll li div .name:hover{color:red;cursor:pointer;}

.logo .main .cartMenu .scroll li span{position:absolute;top:12px;left:252px;}

.logo .main .cartMenu .last{width:303px;height:60px;line-height:60px;position:relative;}

.logo .main .cartMenu .last p{margin-left:13px;font-size:12px;}

.logo .main .cartMenu .last button{width:94px;height:40px;position:absolute;left:185px;top:50%;margin-top:-20px;background-color:red;border:none;color:white;border-radius:3px;}

.nav{width:100%;height:45px;background-color:#07111b;font-size:14px;color:white;}

.nav .navContent{width:1100px;height:45px;margin:0 auto;}

.nav .navContent ul{margin-left:20.5%;}

.nav .navContent ul li{float:left;line-height:45px;margin-right:50px;}

.nav .navContent ul li:hover{color:red;cursor:pointer;}

.banner{width:100%;height:600px;border:1px solid black;}

.banner .content{width:1100px;margin:0 auto;border:1px solid blue;position:relative;height:600px;border:1px solid orange;}

.banner .content .menu{width:195px;height:550px;font-size:14px;background-color:red;color:white;position:absolute;top:-50px;opacity:0.85;}

.banner .content .menu h3{height:50px;line-height:50px;font-size:15px;padding-left:18px;}

.banner .content .menu h3 img{vertical-align:middle;margin-right:8px;}

.banner .content .menu ul li{padding-left:14px;height:35px;line-height:35px;position:relative;}

.banner .content .menu ul li span{position:absolute;right:11px;}

.banner .content .commodity{height:585px;width:655px;position:absolute;left:195px;font-size:13px;overflow:hidden;}

.banner .content .commodity .assortment{background-color:white;height:580px;width:650px;border:1px solid gray;display:none;box-shadow:0px 0px 4px 1px rgba(8, 1, 3,0.3);}

.banner .content .commodity .assortment .con{margin-top:38px;position:relative;height:30px;}

.banner .content .commodity .assortment .con .title{width:80px;display:inline-block;font-weight:bold;}

.banner .content .commodity .assortment .con span{margin-left:11px;color:#C0C0C0}

.banner .content .commodity .assortment .con .title p{text-align:right;}

.banner .content .commodity .assortment .con .list{left:115px;margin-right:50px;position:absolute;top:0px;height:29px;}

.banner .content .commodity .assortment .con .list a{margin-right:10px;color:black;}

.banner .content .commodity .assortment .con .list a:hover{color:red;}

.banner .content .center{height:500px;width:650px;position:absolute;left:195px;}

.banner .content .center .lbt{margin-left:6px;margin-top:6px;width:644px;height:494px;position:relative;}

.banner .content .center .lbt .image{overflow:hidden;}

.banner .content .center .lbt .image img{width:644px;height:494px;display:none;}

.banner .content .center .lbt .image .show{display:block}

.banner .content .center .lbt .button{position:absolute;width:48px;height:82px;top:50%;margin-top:-41px;text-align:center;line-height:82px;}

.banner .content .center .lbt .prev{left:0px;}

.banner .content .center .lbt .next{right:0px;}

.banner .content .center .lbt .button:hover{background-color:black;opacity:0.8;}

.banner .content .center .lbt .button img{vertical-align:middle;}

.banner .content .center .lbt .dots{position:absolute;width:100px;height:20px;bottom:10px;left:50%;margin-left:-50px;}

.banner .content .center .lbt .dots .dot{margin-left:4px;width:10px;height:10px;border:1px solid white;background-color:gray;display:inline-block;border-radius:50%;}

.banner .content .center .lbt .dots .active{background-color:white;border:1px solid gray;}

.banner .content .right{height:494px;width:245px;position:absolute;left:852px;border:1px solid gray;top:6px;}

.banner .content .right .top{border:1px solid gray;height:170px;width:245px;}

.banner .content .right .middle{border:1px solid gray;height:200px;width:245px;}

.banner .content .right .bottom{border:1px solid gray;height:118px;width:245px;}

$(document).ready(function(){

/*顶部*/

var rightDiv=$('.right div');

rightDiv.hover(function(){

$(this).nextAll().css('display','inline-block');

$(this).parent().siblings().find('ul').css('display','none');

$(this).css({'border-left':'1px solid gray','border-right':'1px solid gray','background-color':'white'}).parent().siblings().find('div').css({'border':'none','background-color':'#f3f5f7'});

$(this).find('img').attr('src','img/icon/24.png');

},function(){

$(this).find('img').attr('src','img/icon/21.png');

});

$('.right ul').mouseleave(function(){

$('.list').find('ul').css('display','none');

rightDiv.css({'border':'none','background-color':'#f3f5f7'});

});

/*logo区*/

var cartMenu=$('.logo .cartMenu');

cartMenu.hide();

$('.cart').hover(function(){

$(this).find('.tu1').attr('src','img/icon/25.png');

$(this).find('.tu2').attr('src','img/icon/22.png');

$(this).find('span').css('color','#CDCDCD');

cartMenu.show();

},function(){

$(this).find('.tu1').attr('src','img/icon/26.png');

$(this).find('.tu2').attr('src','img/icon/23.png');

$(this).find('span').css('color','white');

cartMenu.hide();

});

cartMenu.hover(function(){

$(this).show();

},function(){

$(this).hide();

});

/*商品分类*/

var inde=0,

commodity=$('.commodity'),

assortment=$('.assortment'),

bannerLi=$('.banner .menu li');

bannerLi.hover(function(){

commodity.css('z-index','1');

$(this).css({'background-color':'white','color':'red'}).siblings().css({'background-color':'red','color':'white'});

inde=$(this).index();

if(inde==0||inde==10||inde==12){

assortment.eq(0).css('display','block').siblings().css('display','none');

}

if(inde==1||inde==4||inde==7||inde==9||inde==11||inde==13){

assortment.eq(1).css('display','block').siblings().css('display','none');

}

if(inde==2){

assortment.eq(2).css('display','block').siblings().css('display','none');

}

if(inde==3||inde==5||inde==6||inde==8){

assortment.eq(3).css('display','block').siblings().css('display','none');

}

assortment.hover(function(){

commodity.css('z-index','1');

$(this).css('display','block');

bannerLi.eq(inde).css({'background-color':'white','color':'red'});

},function(){

$(this).css('display','none');

bannerLi.css({'background-color':'red','color':'white'});

commodity.css('z-index','0');

})

},function(){

assortment.css('display','none');

$(this).css({'background-color':'red','color':'white'});

commodity.css('z-index','0');

})

/*轮播图*/

var index=0,

img=$('.center .image img'),

lbt=$('.center .lbt '),

len=img.length,

timer=null,

prev=$('.lbt .prev'),

next=$('.lbt .next'),

dot=$('.lbt .dot');

lbt.mouseleave(function(){

timer=setInterval(function(){

index++;

if(index==len){

index=0;

}

changeImg();

},1000);

});

lbt.mouseenter(function(){

if(timer){

clearInterval(timer);

}

});

lbt.mouseleave();

/*上一张下一张*/

prev.click(function(){

index--;

if(index==-1){

index=len-1;

}

changeImg();

});

next.click(function(){

index++;

if(index==len){

index=0;

}

changeImg();

})

/*小圆点*/

dot.click(function(){

index=$(this).index();

changeImg();

})

/*切换图片*/

function changeImg(){

img.eq(index).css('display','block').siblings().css('display','none');

dot.eq(index).addClass('active').siblings().removeClass('active');

}

})

写回答

1回答

Steve007

2019-03-01

已采纳

同学，你好。这里移入banner右侧，左侧和轮播图会出现问题，是因为这里banner右侧盒子设置的类名和顶部右侧类名相同，所以受到了给顶部右侧写的js的影响，这里进banner右侧的盒子换个类名就可以了，如图：

祝学习愉快！

0 学习 · 36712 问题

查看课程

相似问题

左侧楼层导航的实现以及右侧导航的动画效果该怎么实现

回答 3

轮播图左右按钮和小圆点防止连点bug的设置方法和原理

回答 2

轮播图，鼠标放上去再移开无法自动轮播

回答 2

老师，请问如何实现子菜单移入不隐藏，移出又隐藏

回答 2

轮播图为什么没显示

回答 1

打开慕课网App查看更多内容