Question

我们当前正在使用图片滑块在首页中投放广告。但是，我们在滑块内旋转图像时遇到问题。滑块现在从右向左移动，但是在加载最后一个图像后，第一个图像不是从右返回，而是从左第一个图像返回，然后向后滑动。需要修改什么才能实现仍与右侧连接的滑块？

我使用了下面的代码。 jquery slide div within a div

[html]

<div class="ads">
 <div class="movable">
  <div id="ss1">
   <a href="..." target="_blank"><img src="..."></a>
  </div>
  <div id="ss2">
   <a href="..." target="_blank"><img src="..."></a>
  </div>
  <div id="ss3">
   <a href="..." target="_blank"><img src="..."></a>
  </div>
 </div>
</div>

[jquery]

$(function() {
$('.ads').each(function() {
    var $gal = $(this),
        $movable = $(".movable", $gal),
        $slides = $(">*", $movable),
        N = $slides.length,
        C = 0,
        itv = null;
    function play() { itv = setInterval(anim, 2000); }
    function stop() { clearInterval(itv); }
    function anim() {
        C = ($(this).is(".prev") ? --C : ++C) < 0 ? N - 1 : C % N;
        $movable.css({ transform: "translateX(-" + (C * 100) + "%)" });
    }
    $(".prev, .next", this).on("click", anim);
    // $gal.hover(stop, play);
    play();
  });
});

[css]

.ads {
 top: auto;
 right: 2%;
 bottom: 3%;
 position: absolute;
 width: 25vw;
 height: 25vw;
 max-width: 400px;
 max-height: 400px;
 z-index: 11;
}

.ads .slide_img {
 position: absolute;
 width: 100%;
 height: 100%;
}

.slide_img img {
 width: 25vw;
 height: 25vw;
 max-width: 500px;
 max-height: 500px;
}

.ads #nav_slide {
 width: 100%;
 bottom: 12%;
 height: 11px;
 position: absolute;
 text-align: center;
 z-index: 98;
 cursor: default;
}

.slide_img {
 z-index: -1;
}

.xbtn {
 position: relative;
 right: 2%;
 bottom: 99%;
 text-align: right;
 color: rgba(255, 255, 255, 0.2);
}

.xbtn p {
 position: relative;
 line-height: 20px;
}

button:focus {
 outline: none;
}

无限重复的图像滑块

0 个答案: