我的轮播图为什么不按设置的时间滚动，而且鼠标移上去也不停止
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<link rel="stylesheet" type="text/css" media="screen" href="work.css" />
<style>*{
margin: 0;
padding: 0;
border: none;
font-size: 14px;
}
a{
text-decoration: none;
}
ul{
list-style-type: none;
}
.main{
width: 1200px;
height: auto;
background: #f3f5f7;
margin: 0 auto;
}
.top{
height: 45px;
width: 100%;
padding-top: 10px;
}
.top-left{
margin-left: 20px;
height: 45px;
float: left;
}
.top-left a{
color: black;
display: inline-block;
height: 30px;
line-height: 30px;
margin-right: 20px;
}
.top-right{
float: right;
height: 30px;
margin-right: 30px;
}
.top-right1{
display: inline-block;
line-height: 30px;
width: 80px;
position: relative;
}
.top-right1:hover{
background: white
}
/* .top-right1 img{
transform: rotateX('90')
} */
.top-right1 ul{
display: none;
position: absolute;
top: 30px;width: 80px;
background: white;
}
.top-active ul{
display: inline
}
.search{
margin-top: 10px;
height: 100px;
}
.search .buy{
float: right;
height: 40px;
line-height: 40px;
background: red;
vertical-align: middle;
text-align: center;
width:150px;
margin-right: 30px;
margin-top: 20px;
}
.search input{
height: 40px;
}
.search .search-input{
margin-left: 300px;
width: 300px;
}
.search img:nth-child(1){
/* margin-top: 20px; */
margin-left: 30px;
}
.search-btn{
width: 50px;
background: black;
color: white;
}
.nav{
width: 100%;
height: 50px;
background: black;
float: right;
line-height: 50px;
}
.nav ul{
/* display: inline-block; */
/* float: right */
height: 50px;
/* color: #f3f5f7 */
margin-left: 400px;
}
.nav ul li{
display: inline-block;
list-style-type: none;
width: 100px;
/* float: left */
}
.nav ul li a{
color: #f3f5f7
}
.banner-middle{
width: 730px;
height: 500px;
margin: 0 auto;
position: relative;
/* top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -450px; */
/* text-align: center; */
}
.slider{
width: 730px;
height: 500px;
position: relative;
}
.img-block{
width: 730px;
height: 500px;
display: none;
float: left;
}
.img-active{
display: block;
}
.prev{
height: 80px;
width: 40px;
background: url(../img/pre2.png) no-repeat center center;
position: absolute;
top: 50%;
left: 0;
margin-top: -40px;
}
.next{
height: 80px;
width: 40px;
background: url(../img/arrow.png) no-repeat center center ;
position: absolute;
top: 50%;
right: 0;
margin-top: -40px;
}
a:hover{
background-color: #333;
opacity: 0.8;
filter:alpha(opacity=80);
}
.dots {
position: absolute;
bottom: 24px;
right: 0;
text-align: right;
padding-right: 24px;
line-height: 12px;
}
.dots span {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-left: 8px;
background-color: rgba(7, 17, 27, 0.4);
cursor: pointer;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}
.dots span.active{
box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
background-color: #ffffff;
}</style>
</head>
<body>
<div class="main">
<!-- 顶部代码实现 -->
<div class="top">
<div class="top-left">
<a href="#">亲，请登录</a>
<a href="#">免费注册</a>
<a href="#">手机逛慕陶</a>
</div>
<div class="top-right">
<div class="top-right1 ">
我的慕陶
<img src="素材/icon/21.png" alt="">
<ul>
<li>我的我的</li>
<li>我的我的</li>
</ul>
</div>
<div class="top-right1">
收藏夹啊
<img src="素材/icon/21.png" alt="">
<ul>
<li>我的我的</li>
<li>我的我的</li>
</ul>
</div>
<div class="top-right1">
商品分类
<img src="素材/icon/21.png" alt="">
<ul>
<li>我的我的</li>
<li>我的我的</li>
</ul>
</div>
<div class="top-right1">
买家中心
<img src="素材/icon/21.png" alt="">
<ul>
<li>我的我的</li>
<li>我的我的</li>
</ul>
</div>
<div class="top-right1">
联系客服
<img src="素材/icon/21.png" alt="">
<ul>
<li>我的我的</li>
<li>我的我的</li>
</ul>
</div>
</div>
</div>
<!-- 搜索栏实现 -->
<div class="search">
<img src="素材/logo.png" alt="">
<input type="text" placeholder="灵魂美食一元钱" class="search-input">
<input type="button" value="搜索" class="search-btn">
<div class="buy">
<img src="素材/icon/26.png" alt="">
<span>购物车 | 0</span>
<img src="素材/icon/23.png" alt="">
</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>
<div class="main">
<div class="banner">
<div class="banner-left">
</div>
<div class="banner-middle">
<div class="slider">
<div class="img" id="img">
<a href="#">
<img src="素材/focus-carousel/1.jpg" alt="" class='img-block img-active'>
</a>
<a href="#">
<img src="素材/focus-carousel/2.jpg" alt="" class='img-block '>
</a>
<a href="#">
<img src="素材/focus-carousel/3.jpg" alt="" class='img-block'>
</a>
<a href="#">
<img src="素材/focus-carousel/4.jpg" alt="" class='img-block'>
</a>
<a href="#">
<img src="素材/focus-carousel/5.jpg" alt="" class='img-block'>
</a>
</div>
</div>
<a href="javascript:void(0)" class="button prev" id="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>
<div class="dots" id="dots">
<span class="active"></span>
<span>
</span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="banner-right">
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="work.js"></script>
<script src="work.js"></script>
</body>
</html>$(function () {
//让顶部导航栏有状态
var topRight = $('.top-right1');
console.log(topRight)
for (i in topRight) {
topRight.eq(i).hover(function () {
$(this).addClass('top-active')
})
topRight.eq(i).mouseout(function(){
topRight.removeClass('top-active')
})
}
//轮播图
var img = $('.img a img'),
span = $('.dots span'),
slider = $('.slider'),
k = 0,
len = img.length,
timer = null,
// btn = $('button'),
prev = $('.prev'),
next = $('.next');
//切换图片函数
function changeimg() {
img.removeClass('img-active');
span.removeClass('active');
img.eq(k).addClass('img-active')
span.eq(k).addClass('active')
}
//当鼠标移开时定时切换
slider.mouseout(function () {
timer = setInterval(function () {
k++;
console.log(k)
if (k >= len) {
k = 0
}
changeimg()
}, 5000)
})
slider.mouseout()
//当鼠标覆盖图片是解除定时。。
//这边如果我用hover的话，会出错误，不知道为什么
slider.mouseover(function () {
console.log(1)
if (timer)
clearInterval(timer)
})
//点击按钮奇幻图片，上一张
prev.on('click', function () {
k--
if (k < 0) {
k = len - 1
}
changeimg()
})
//点击按钮奇幻图片，下一张
next.on('click', function () {
k++
if (k >= len) {
k = 0
}
changeimg()
})
//点击圆点切换图片
for (var i = 0; i < len; i++) {
span.eq(i).attr('id', i)
console.log(typeof (span.eq(i).attr('id')))
span.eq(i).on('click', function () {
k = $(this).attr('id');
console.log(k)
changeimg();
})
}
})0
收起
正在回答 回答被采纳积分+1
2回答
慕无忌6236884
2018-07-15 17:39:15
我看了下控制台，好像我不管做什么操作，都会一下子触发两次？我也没做什么啊
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星