图像滑块有时无法正常工作

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

工作正常，如何重现错误？

 '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 个解决方案

解决方案1
0 2017-08-28 19:11:16

图像滑块有时无法正常工作

问题描述

1 个解决方案

解决方案1 0 2017-08-28 19:11:16

解决方案1
0 2017-08-28 19:11:16