Question

我有一个滑块，带有自动旋转脚本，当前它向前和向后滑动，我希望它以圆周运动旋转，任何想法......

HTML

<div class="slider">
<ul>
<li data-rel="1"><a href="#" title="Japani M Capsules"><img src="http://www.djensenphotography.com/images/anthony-_lake_shooting-.jpg" alt="Japani M Capsules" /></a></li>

<li data-rel="2"><a href="#" title="Japani M Capsules"><img src="http://www.djensenphotography.com/images/anthony-_lake_shooting-.jpg" alt="Japani M Capsules" /></a></li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

CSS

<style>
*{margin:0;padding:0}
.slider { float:left; width:500px; overflow:hidden; position:relative;}
.slider li { float:left; width:500px;list-style:none;}
.slider li img { max-width:100%; display:block;}
</style>

Jquery的

<script>
$(document).ready(function() {
//slider code
var slider_w = $('.slider').width();
var total_li = $('.slider li').length
var total_w = $('.slider').width()*total_li
$('.slider ul').width(total_w)

// Auto Rotaion Code
var counter = 1;
setInterval(function() {
    if (counter++ % 2) {
     $('.slider ul').animate({marginLeft:'-' + slider_w},500)
    } else {
     $('.slider ul').animate({marginLeft:'0'},500)
    }
}, 3000);

});
</script>

Answer 1

逻辑是你需要删除第一个孩子并将其附加在同一个列表中，如

setInterval(function() {
    $(".slider ul").animate({
        'marginLeft': '-=' + slider_w + 'px'
    }, 1000, function () {
        $(".slider ul li:first-child").appendTo(".slider ul");
        $(".slider ul").css({
            'marginLeft': '+=' + slider_w + 'px'
        });
    });
}, 3000);

然后它将作为循环列表工作（如果你阅读，请记住数据结构）

Working Demo

滑块在连续的圆形循环中

1 个答案: