我有一个carousel项目由Webcenter Portal中的某个人实现。我有HTML代码,它的CSS文件和JS。
当旋转木马有5个图像并且自动滑动时,我现在遇到的问题。等待旋转木马到达第五个项目并观察它滚动回到第一个项目。当它向后滚动时,它会遍历所有图像,而不是直接转到第一个图像。
预期的行为是它必须从第5张幻灯片直接滚动到第1张幻灯片。我对这个特殊的JS没有多少经验,我想知道我需要在哪里检查这个特定的行为以及确切地做哪些更改。
答案 0 :(得分:0)
你的问题很简单。在第5张幻灯片后,下一张幻灯片应该是第1张并且继续。现在它进入第一阶段,但顺序相反,然后继续。通常
在此代码中,您将获得解决方案。
请尝试此代码。 jsfiddle
jquery代码
$('document').ready(function () {
var width = 750;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $('.slider');
var $slideContainer = $slider.find('ul');
var $slides = $slideContainer.find('li');
setInterval(function () {
$slideContainer.animate({
'margin-left': '-=' + width + 'px'
}, animationSpeed, function () {
currentSlide++;
if (currentSlide >= $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
});
html
<body>
<div id="container">
<div id="header">
<h3>J-Slider</h3>
</div>
<div class="slider">
<ul>
<li>
<img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.jpg">
</li>
<li>
<img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-13.jpg">
</li>
<li>
<img width="750px" height="400px" src="http://th08.deviantart.net/fs70/PRE/f/2014/071/5/5/blue_space_by_whendell-d79zabi.jpg">
</li>
<li>
<img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.jpg">
</li>
</ul>
</div>
</div>
</body>
CSS
body {
font-family:Gerogia;
font-size:15px;
}
#container {
width:930px;
margin:50px auto 10px auto;
border-left:#666 solid 3px;
border-right:#666 solid 3px;
background:#f5f5f5;
padding:20px 30px;
}
#header {
padding:10px 0;
border-bottom:#ccc solid 1px;
overflow:hidden;
text-align:center;
}
h3 {
font-size: 30px;
text-transform: uppercase;
letter-spacing: 2px;
}
.slider {
width: 750px;
height: 400px;
padding-top: 10px;
margin-left: 75px;
overflow: hidden;
}
.slider ul {
width:8000px;
list-style-type:none;
}
.slider li {
float: left;
}