2016年5月13日 星期五

【jQuery】左右不間斷廣告

HTML 配置:




JS:

// 如果圖片太少再複製一批
$(".room-list").append($(".room-list").html());
// 圖寬度
$R_width = $(".room").outerWidth();
// 有間格要把間格加回去
$RU_wieth = $R_width + 12;
// 設定總長
$RL_width = $(".room").length * $RU_wieth;
$(".room-list").width($RL_width);
$(".room").width($R_width);
$_left = $RU_wieth * -1;
$_speed = 400; // 速度

// 將最後一個放到最前面
$(".room-list").find('.room:first').before($(".room-list").find('.room:last')).end().css({
 left: $_left
});

// 左邊按鈕
$('.photo-control-area .icon-prev').click(function(){
 $(".room-list").stop().animate({'left' : $_left - $RU_wieth}, $_speed, function () {
  $(".room-list").find('.room:last').after($(".room-list").find('.room:first')).end().css('left', $_left);
 });
});

// 右邊按鈕
$('.photo-control-area .icon-next').click(function(){
 $(".room-list").stop().animate({'left' : $_left + $RU_wieth}, $_speed, function () {
  $(".room-list").find('.room:first').before($(".room-list").find('.room:last')).end().css('left', $_left);
 });
});

沒有留言:

張貼留言