Question

我是php新手，我的网站有问题。

我在java脚本中有一个图像滑块的代码，我已经设置滑块每秒后滑动但有时它会自动快速移动，然后鼠标悬停在事件上也不起作用。它很少发生。

这是我的java脚本代码

'use strict';

$(function(){
var width =300;

var pause =3000;
var currentSlide =1;

var $slider = $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');

var interval;

function startSlider(){
    interval = setInterval(function(){
        $slideContainer.animate({'margin-left':'-='+width},1000,function(){
            currentSlide++;
            if(currentSlide===$slides.length){
                currentSlide=1;
                $slideContainer.css('margin-left',0);
            }
        });
    },pause);
}
function stopSlider(){
    clearInterval(interval);

}
$slider.on('mouseenter',stopSlider).on('mouseleave',startSlider);
startSlider();

});

HTML代码

 <html>
<head>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/student/main.css">
<script src="http://localhost:8080/student/jquery-3.2.1.min.js"></script>
<script src="http://localhost:8080/student/main.js"></script>
</head>
<body>
<center>
<div class="container">
<div class="header">
<h1 class="text-muted">Some of the Beautiful Places</h1>
</div>
<div id="slider">
<ul class="slides">
<li class="slide"><img  src="http://localhost:8080/student/slides/a.jpg" class="zoom"/></li>
<li class="slide"><img  src="http://localhost:8080/student/slides/2.jpg" class="zoom"/></li>
<li class="slide"><img  src="http://localhost:8080/student/slides/3.jpg" class="zoom"/></li>
<li class="slide"><img  src="http://localhost:8080/student/slides/4.jpg" class="zoom"/></li>
<li class="slide"><img  src="http://localhost:8080/student/slides/5.jpg" class="zoom"/></li>
<li class="slide"><img  src="http://localhost:8080/student/slides/6.jpg" class="zoom"/></li>
<li class="slide"><img  src="#"/></li>
</div>
</div>
</div>
</center>
</body>
</html>

和css文件

#slider{
	width:300px;
	height:168px;
	 overflow:hidden; 
}

#slider .slides{
	display: inline-block;
	width : 6720px;
	height:168px;
	margin:0;
	padding:0;
}
#slider .slide{
	float:left;
	list-style-type:none;
	width:300px;
	height:168px;
}

Answer 1

工作正常，如何重现bug？

'use strict';

$(function(){
var width =300;

var pause =1000;
var currentSlide =1;

var $slider = $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');

var interval;

function startSlider(){
    interval = setInterval(function(){
        $slideContainer.animate({'margin-left':'-='+width}, 1000, function(){
            currentSlide++;
            if(currentSlide===$slides.length){
                currentSlide=1;
                $slideContainer.css('margin-left',0);
            }
        });
    },pause);
}
function stopSlider(){
    clearInterval(interval);

}
$slides.hover(stopSlider, startSlider);
startSlider();

});

#slider{
	width:300px;
	height:168px;
	 overflow:hidden; 
}

#slider .slides{
	display: inline-block;
	width : 6720px;
	height:168px;
	margin:0;
	padding:0;
}
#slider .slide{
	float:left;
	list-style-type:none;
	width:300px;
	height:168px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<div class="container">
<div class="header">
<h1 class="text-muted">Some of the Beautiful Places</h1>
</div>
<div id="slider">
<ul class="slides">
<li class="slide"><img  src="http://lorempixel.com/300/168" class="zoom"/></li>
<li class="slide"><img  src="http://lorempixel.com/300/168" class="zoom"/></li>
<li class="slide"><img  src="http://lorempixel.com/300/168" class="zoom"/></li>
<li class="slide"><img  src="http://lorempixel.com/300/168" class="zoom"/></li>
<li class="slide"><img  src="http://lorempixel.com/300/168" class="zoom"/></li>
<li class="slide"><img  src="http://lorempixel.com/300/168" class="zoom"/></li>
<li class="slide"><img  src="#"/></li>
</div>
</div>
</div>
</center>
</body>
</html>

图像滑块有时不能正常工作

1 个答案: