<分区>
这个网站是如何让 slider 像这样工作的？
我正在自己制作一个，但您可以看到大约 1/4 的下一张/上一张图像让我感到疑惑。我所做的只是循环时间为 0 的下一个/上一个，但下一个/上一个图像的淡出让我感到疑惑。
有人对如何处理此方法有建议吗？
提前致谢。
Jsfiddle 不是原创的，因为它是 wordpress php(制作速度很快)，所以我无法发布它:
jsfiddle.net/RkgrG/40/(没有足够的代表链接抱歉)
最佳答案
试试这个:
pastebin.com/ga3CGtH4
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.carousel.min.js"></script>
</head>
<body>
<style>
#home-rotator-container { width:100%; overflow:hidden; position:relative; }
#home-rotator .cycle-slideshow { width:3300px; }
#home-rotator .cycle-slideshow img { width: 1100px; height: 400px; }
#home-rotator .cycle-slideshow {
position:absolute;
top:0;
left:0;
}
</style>
<div id="home-rotator-container">
<div id="home-rotator">
<div class="cycle-slideshow" data-cycle-fx="carousel" data-cycle-speed="800" data-cycle-carousel-visible="3">
<img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach4.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach5.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach6.jpg">
</div>
</div><!-- /#home-rotator -->
</div><!-- /#home-rotator-container -->
<script type="text/javascript">
// function that determines offset
function positionRotator()
{
var rotator_size = 1100;
var initial_width = $(window).width();
var offset = (rotator_size - ((initial_width - rotator_size) / 2)) * -1;
$("#home-rotator .cycle-slideshow").css("left",offset);
}
// do initial positioning
positionRotator();
// re-position if screen is resized
$(window).resize(function() {
positionRotator();
});
</script>
</body>
</html>
编辑: 如果您更改尺寸，请记住也更改偏移量:
var rotator_size = 1100;
关于jquery - 他们是如何让 slider 像这样工作的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21306409/