轮播图，鼠标放上去再移开无法自动轮播
来源：5-2 作业题
qq_鸭绿桥第一帅哥_0
2019-02-21 20:56:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5-2</title>
<link rel="stylesheet" type="text/css" href="css/5-2zuoye.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="js/5-2zuoye.js"></script>
</head>
<body>
<!-- 大容器 -->
<div class="wrap">
<!-- 设置container是为了设置背景颜色 -->
<div class="container">
<!-- 顶部区 -->
<div class="header">
<ul class="headerleft">
<li class="dropdown-menu" id="one"><a href="#">亲，请登录</a></li>
<li class="dropdown-menu"><a href="#">免费注册</a></li>
<li class="dropdown-menu"><a href="#">手机逛慕淘</a></li>
</ul>
<ul class="headerright">
<li class="dropdown-menu1 menu1">
<a href="#">我的慕淘</a><img src="sucai/icon/21.png">
<ul class="dropdown-menu3">
<li>已买到的宝贝</li>
<li>我的慕淘</li>
</ul>
</li>
<li class="dropdown-menu1">
<a href="#">收藏夹</a><img src="sucai/icon/21.png">
<ul class="dropdown-menu3">
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</li>
<li class="dropdown-menu5"><a href="#">商品分类</a></li>
<li class="dropdown-menu1">
<a href="#">卖家中心</a><img src="sucai/icon/21.png">
<ul class="dropdown-menu3">
<li>免费开店</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>卖家培训中心</li>
<li>体验中心</li>
</ul>
</li>
<li class="dropdown-menu1">
<a href="#">联系客服</a><img src="sucai/icon/21.png">
<ul class="dropdown-menu3">
<li>消费者客服</li>
<li>卖家客服</li>
</ul>
</li>
</ul>
</div>
<!-- logo区 -->
<div class="logo clearfix">
<div class="logoleft"><a href="#"><img src="sucai/logo.png"></a></div>
<div class="logocenter">
<input type="text" placeholder="灵魂美食一元抢" class="sousuo">
<input type="button" value="搜索" class="btn">
</div>
<div class="logoright">
<div class="cart">
<div class="cart1"><img src="sucai/icon/26.png"> <span>购物车</span></div>
<div class="num"><span>0</span><img src="sucai/icon/23.png"></div>
</div>
<!-- 下拉菜单 -->
<div class="cartmenu">
<ul class="cartul">
<li class="cartli">
<img src="sucai/cart/1.png">
<span class="brand">adidas 阿迪达斯 训练 男子 ×</span><br />
<span class="price">￥335×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/2.png">
<span class="brand">玉兰油多效修护三部曲套装 ×</span><br />
<span class="price">￥199×2</span>
</li>
<li class="cartli">
<img src="sucai/cart/3.png">
<span class="brand">Apple iPhone 7 (A1660) ×</span><br />
<span class="price">￥6188×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/4.png">
<span class="brand">飞利浦面条机 HR2356/31 ×</span><br />
<span class="price">￥659×4</span>
</li>
<li class="cartli">
<img src="sucai/cart/5.png">
<span class="brand">罗技G29 力反馈游戏方向 ×</span><br />
<span class="price">￥2999×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/1.png">
<span class="brand">adidas 阿迪达斯 训练 男子 ×</span><br />
<span class="price">￥335×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/2.png">
<span class="brand">玉兰油多效修护三部曲套装 ×</span><br />
<span class="price">￥199×2</span>
</li>
<li class="cartli">
<img src="sucai/cart/3.png">
<span class="brand">Apple iPhone 7 (A1660) ×</span><br />
<span class="price">￥6188×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/4.png">
<span class="brand">飞利浦面条机 HR2356/31 ×</span><br />
<span class="price">￥659×4</span>
</li>
<li class="cartli">
<img src="sucai/cart/5.png">
<span class="brand">罗技G29 力反馈游戏方向 ×</span><br />
<span class="price">￥2999×1</span>
</li>
</ul>
</div>
<div class="shop">最新加入的商品</div>
<div class="shop1">共27件商品 <span>共计￥0.00</span> <button>去购物车</button></div>
</div>
</div>
</div>
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#">数码城</a></li>
<li><a href="#">天黑黑</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">发现</a></li>
<li><a href="#">二手特价</a></li>
<li><a href="#">名品汇</a></li>
</ul>
</div>
<!-- banner区 -->
<div class="banner">
<!-- 商品分类 -->
<div class="menu-content">
<br>
<div class="menu-item i1">
<img src="sucai/icon/18.png">
商品分类
</div>
<div class="menu-item">
<a href="#">
<span>家用电器></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家用电器></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家用电器></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家用电器></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家用电器></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家用电器></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家用电器></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家用电器></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家用电器></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家用电器></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家用电器></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家用电器></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家用电器></span>
</a>
</div>
</div>
<!-- 轮播图 -->
<div class="banner1">
<a href="#">
<div class="banner-slide slide1 slide-active"></div>
</a>
<a href="#">
<div class="banner-slide slide2"></div>
</a>
<a href="#">
<div class="banner-slide slide3"></div>
</a>
<a href="#">
<div class="banner-slide slide4"></div>
</a>
<a href="#">
<div class="banner-slide slide5"></div>
</a>
</div>
<!-- 上一张、下一张按钮 -->
<a href="javascript:void(0)" class="button prev"></a>
<a href="javascript:void(0)" class="button next"></a>
<!-- 圆点导航 -->
<div class="dots">
<span class="active" id="0"></span>
<span id="1"></span>
<span id="2"></span>
<span id="3"></span>
<span id="4"></span>
</div>
<!-- 生活服务 -->
</div>
<!-- 右导航 -->
<div class="rightsidebar"></div>
<!-- 楼层区 -->
<div class="louceng"></div>
<!-- 友情链接 -->
<div class="lianjie"></div>
<!-- 页脚 -->
<div class="footer"></div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
/* 大容器 */
.wrap{
width: 100%;
}
/* container */
.container{
width: 100%;
background: #f3f5f7;
/* overflow: hidden; */
/* zoom: 1; */
}
/* header区 */
.header{
width: 70%;
margin: 0 auto;
border-bottom: 1px solid #C0C0C0;
height: 44px;
}
.headerleft,.headerright{
/* overflow: hidden; */
/* zoom: 1; */
height: 44px;
line-height: 44px;
}
.headerleft{
float: left;
}
.headerright{
float: right;
}
.dropdown-menu{
float: left;
font-size: 10px;
padding-left: 15px;
}
.dropdown-menu a,.dropdown-menu1 a,.dropdown-menu5 a{
color: gray;
}
#one a{
color: red;
}
.dropdown-menu a:hover,.dropdown-menu1 a:hover,.dropdown-menu5 a:hover{
color: red;
}
.dropdown-menu1,.dropdown-menu5{
box-sizing: border-box;
float: left;
font-size: 10px;
padding-left: 15px;
width: 120px;
/* text-align: center; */
}
.dropdown-menu5{
width: 120px;
display: block;
}
.dropdown-menu1{
position: relative;
height: 44px;
}
.dropdown-menu3{
position: absolute;
top: 43px;
display: none;
cursor: pointer;
}
.dropdown-menu1:hover{
display: block;
border: 1px solid #C0C0C0;
background: white;
border-bottom: none;
/* margin-bottom: -2px; */
}
.dropdown-menu1:hover .dropdown-menu3{
display: block;
position: absolute;
z-index: 2;
background: white;
width: 120px;
border: 1px solid #C0C0C0;
box-sizing: border-box;
/* padding-left: 10px; */
left: -1px;
border-top: none;
}
.dropdown-menu3 li{
padding-left: 10px;
}
.dropdown-menu3 li:hover{
background: #cdd0d4;
}
/* logo区 */
.logo{
width: 70%;
margin: 0 auto;
/* overflow: hidden;
zoom: 1; */
margin-top: 50px;
}
.clearfix:after {
content:".";
display:block;
height: 0;
visibility: hidden;
clear:both;
}
.clearfix {zoom:1;}
.logoleft,.logocenter,.logoright{
float: left;
}
.logoleft{
padding-left: 160px;
box-sizing: border-box;
}
.logocenter{
position: relative;
box-sizing: border-box;
margin-left: 120px;
margin-right: 150px;
/* margin: 0 auto; */
}
.sousuo{
width: 530px;
height: 40px;
/* position: absolute; */
/* left: 0px; */
}
.btn{
width: 80px;
height: 43px;
background: black;
color: white;
border: none;
position: absolute;
left: 534px;
top: 0px;
}
/* 购物车 */
.cart{
width: 200px;
/* border: 1px solid red; */
overflow: hidden;
zoom: 1;
height: 50px;
line-height: 50px;
background: red;
box-shadow: 0 0 10px 0 rgba(8, 1, 3,0.3)
}
.cart1{
width: 120px;
border-right: 1px solid white;
padding-left: 15px;
box-sizing: border-box;
height: 30px;
margin-top: 10px;
line-height: 30px;
}
.cart:hover .cart1{
border-right: 1px solid #cdd0d4;
}
.cart1,.num{
float: left;
color: white;
}
.num{
box-sizing: border-box;
padding-left: 20px;
}
.cart span{
font-size: 10px;
}
.cart:hover{
background: white;
}
.cart:hover span{
color: red;
}
/* 购物车下拉菜单 */
.logo{
/* height: 500px; */
width: 95%;
}
.logoright{
position: relative;
height: 100px;
}
.cartmenu{
width: 250px;
position: absolute;
z-index: 1;
height: 265px;
overflow-y: scroll;
background: white;
top: 100px;
}
.cartul{
padding-left: 10px;
padding-right: 10px;
}
.cartli{
position: relative;
border-top: 1px solid gray;
/* padding-left: 10px;
padding-right: 10px; */
}
.cartmenu .brand{
font-size: 10px;
color: gray;
position: absolute;
top: 0;
}
.cartmenu .brand:hover{
color: red;
}
.price{
font-size: 10px;
position: absolute;
top: 25px;
left: 55px;
}
.shop{
position: absolute;
z-index: 3;
font-size: 10px;
background: white;
height: 50px;
line-height: 50px;
box-sizing: border-box;
padding-left: 20px;
width: 250px;
}
.shop1{
position: absolute;
z-index: 3;
top: 365px;
font-size: 10px;
background: white;
height: 70px;
line-height: 70px;
width: 250px;
}
.shop1 button{
background: red;
height: 40px;
width: 100px;
color: white;
border: none;
border-radius: 2px;
cursor: pointer;
}
.shop1 span{
font-size: 8px;
}
.cartmenu,.shop,.shop1{
display: none;
}
.logoright:hover .cartmenu{
display: block;
}
.logoright:hover .shop1{
display: block;
}
.logoright:hover .shop{
display: block;
}
.cartli:hover{
background: #f3f5f7;
}
/* 导航 */
.nav{
width: 100%;
background: #07111b;
height: 50px;
line-height: 50px;
box-sizing: border-box;
padding-left: 400px;
}
.nav a{
text-decoration: none;
font-size: 15px;
color: white;
}
.nav a:hover{
color: red;
}
.nav li{
float: left;
box-sizing: border-box;
padding-right: 60px;
}
/* banner区 */
/* 轮播图 */
.banner{
width: 100%;
/* height: 700px; */
/* overflow: hidden; */
position: relative;
}
.banner1{
width: 730px;
height: 454px;
position: relative;
/* overflow: hidden; */
left: 400px;
}
.banner-slide{
width: 730px;
height: 454px;
background-repeat: no-repeat;
position: absolute;
display: none;
}
.slide-active{
display: block;
}
.slide1{
background-image: url('../sucai/focus-carousel/1.png');
}
.slide2{
background-image: url('../sucai/focus-carousel/2.jpg');
}
.slide3{
background-image: url('../sucai/focus-carousel/3.jpg');
}
.slide4{
background-image: url('../sucai/focus-carousel/4.jpg');
}
.slide5{
background-image: url('../sucai/focus-carousel/5.jpg');
}
/* 上一张下一张按钮 */
.button{
position: absolute;
display: block;
width: 50px;
height: 100px;
}
.button:hover{
background-color: #333;
opacity: 0.8;
filter: alpha(opacity=80);
}
.prev{
background-image: url('../sucai/focus-carousel/pre2.png');
background-repeat: no-repeat;
background-position: center center;
left: 400px;
top: 50%;
margin-top: -50px;
}
.next{
background-image: url('../sucai/focus-carousel/pre.png');
background-repeat: no-repeat;
background-position: center center;
left: 1078px;
top: 50%;
margin-top: -50px;
}
/* 圆点导航 */
.dots{
position: absolute;
bottom: 14px;
right: 50%;
margin-right: -35px;
}
.dots span{
display: inline-block;
width: 12px;
height: 12px;
line-height: 12px;
border-radius: 50%;
background: rgba(7,17,27,0.4);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
margin-left: 8px;
cursor: pointer;
}
.dots span.active{
box-shadow:0 0 0 2px rgba(7,17,27,0.4) inset ;
background: white;
}
/* 商品分类 */
.menu-content{
position: absolute;
width: 150px;
height: 517px;
background: red;
top: -63px;
left: 250px;
line-height: 31px;
box-sizing: border-box;
padding-left: 10px;
color: white;
opacity: 0.8;
}
.menu-item span{
font-size: 10px;
color: white;
}
.i1{
width: 100%;
height: 31px;
box-sizing: border-box;
margin-top: -10px;
margin-bottom: 20px;
}
$(document).ready(function(){
// 顶部右侧下箭头图片切换
$('.dropdown-menu1').hover(function(){
$(this).children('img').attr('src','sucai/icon/24.png')
},function(){
$(this).children('img').attr('src','sucai/icon/21.png')
})
// logo区购物车图片切换
$('.cart').hover(function(){
$(this).find('.cart1 img').attr('src','sucai/icon/25.png');
$(this).find('.num img').attr('src','sucai/icon/24.png');
},function(){
$(this).find('.cart1 img').attr('src','sucai/icon/26.png');
$(this).find('.num img').attr('src','sucai/icon/23.png');
})
// 轮播图
var index=0,
timer=null,
pics=$('.banner1').find('div'),
dots=$('.dots').find('span'),
prev=$('.prev'),
next=$('.next'),
len=pics.length;
console.log(len);
function slideImg(){
// 鼠标放上去停止轮播，移开自动轮播
var main=$('.banner');
main.hover(function(){
if (timer) clearInterval(timer);
},function(){
timer=setInterval(function(){
index++;
if (index>=len) {
index=0;
}
changeImg();
},1000)
})
main.mouseleave();
// 点击圆点切换图片
for(d=0;d<len;d++){
dots.eq(d).click(function(){
index=$(this).attr('id');
changeImg();
})
}
// 下一张按钮，上一张按钮点击切换图片
next.click(function(){
index++;
if (index>=len) {
index=0;
}
changeImg();
})
prev.click(function(){
index--;
if (index<0) {
index=len-1;
}
changeImg();
})
}
// 切换图片
function changeImg(){
for(i=0;i<len;i++)
{
pics.eq(i).css({
'display':'none'
});
dots.eq(i).removeClass('active');
}
pics.eq(index).css({
'display':'block'
})
dots.eq(index).addClass('active');
}
slideImg();
})写回答
2回答
-
你好同学 ,这是因为代码中把移入移出控制图片轮播的事件加在了banner盒子上面 ,而这个盒子banner区域整体的一个大盒子 ,如下 :
所以当你鼠标移入轮播图但是还在banner盒子区域的时候 ,就没有办法触发离开事件 . 所以要如下调整:
代码中获取的应该是轮播图的盒子
希望对你有帮助 ,祝学习愉快 ,望采纳 .
0 -
qq_鸭绿桥第一帅哥_0
提问者
2019-02-21
老师，我发现有时刷新一下轮播图又正常了。请问老师是我的代码问题还是浏览器问题？
0
相似问题