javascript - 修改脚本使其更像实际的横幅 slider

Question

我正在尝试找出如何修改我在 stackoverflow 上找到的这段代码，使其更像实际的 slider 。

http://jsfiddle.net/5Lc7cc7u/

1)如果在最后一个 slider 图像上，我希望下一个 slider 返回到第一张幻灯片。

2)如果在第一个 slider 图像上，我希望返回到最后一个 slider 图像。

3)有没有一种简单的方法可以添加淡入淡出，以便我可以在幻灯片和淡入淡出之间进行选择？

谢谢!

JavaScript:

$( "#move_left_button" ).click( function() {
        move_left();
} );

$( "#move_right_button" ).click( function() {
        move_right();
} );

function move_left() {
    if( get_acct_left() >= -480 ) {
        $( "#moving_part" ).animate( {
            left: "-=480px"
        }, 1000, function() {
            if( get_acct_left() <= -480 * 2 ) {
                $( "#moving_part" ).attr( "data-direction", "to_right" );
            }
        } );
    }
}
function move_right() {
    if( get_acct_left() < 0 ) {
        $( "#moving_part" ).animate( {
            left: "+=480px"
        }, 1000, function() {
            if( get_acct_left() >= 0 ) {
                $( "#moving_part" ).attr( "data-direction", "to_left" );
            }
        } );
    }
}

function get_acct_left() {
    return parseInt( $( "#moving_part" ).css( "left" ) );
}

function move_to_next() {
    if( $( "#moving_part" ).attr( "data-direction" ) === "to_left" ) {
        move_left();
    } else {
        move_right();
    }
}

setInterval( move_to_next, 4000 );

HTML:

<div id="images_holder">
    <div id="move_left_button">LEFT</div>
    <div id="move_right_button">RIGTH</div>
    <div id="moving_part" data-direction="to_left">
        <div class="image_holder">
            <span>image 1</span>
            <img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
        </div>
        <div class="image_holder">
            <span>image 2</span>
            <img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
        </div>
        <div class="image_holder">
            <span>image 3</span>
            <img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
        </div>
    </div>
</div>

CSS:

#images_holder {
    position: relative;
    overflow: hidden;
    width: 480px;
    height: 360px;
    color: red;
}
#moving_part {
    position: absolute;
    top: 0;
    width: 1440px; /* image_width * number_of_images */
    height: 360px;
    left: 0;
}
.image_holder {
    float: left;
    width: 480px;
    height: 360px;
    position: relative;
}
.image_holder span {
    position: absolute;
    top: 20px;
    left: 200px;
}

#move_left_button {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}
#move_right_button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
}

Answer 1

jsBin demo

无论是谁编写了您共享的代码...这完全是一个错误。
一些建设性原因:

• z-index通过正确格式化 HTML，以更自然的顺序放置元素，可以避免元素位置的改变。

 <OVERLAY element>    >> BUT WHY?
 <underlay element>   
 -------------------------------
 <underlay element>  
 <OVERLAY element>    >> CORRECT

• 无法在 CSS 内对滑动 DIV 宽度 进行硬编码。 应该是动态的
• 当用户操作图库时，幻灯片间隔应停止。 清除图库悬停时的间隔
应避免
• 意大利面条式代码。数幻灯片。计算宽度。 将逻辑分成函数。
• 图片应具有 alt带有图像描述的属性。那alt用户可以从每一个像样的 CMS 编辑器中使用该属性。那么为什么不使用该数据而不是对其进行硬编码呢？ (只是一个建议)
• 不要为淡入淡出效果创建单独的代码。通过正确的 HTML 和 CSS 设置，只需几行 jQuery 即可更改图库效果(请参阅下面示例中的 var efx)以及相关的 animate。代码。
• “良好的 UI = UX 提升”。所有用户都已经习惯了广泛(正确)使用的图库动画逻辑，如果您单击 NEXT按钮>使容器向左移动。 (PREV 相反)

在这里，只需更改 efx变量并看到它发生:

jQuery(function( $ ){

  var efx  = "fade",              // "slide" || "fade"
      animationTime = 600,        // Modify mSeconds as desired
      pauseTime     = 4000,
      $gal = $("#images_holder"), // Cache your elements
      $mov = $("#moving_part"),
      $sli = $mov.find("> div"),
      $btn = $("#prev, #next"),
      $dsc = $("#description"),
      w = $gal.width(),           // Calculate the gallery width!
      n = $sli.length,            // Get the number of slides
      c = 0,                      // Counter // Start index
      itv;                        // Interval

  $mov.width(w*n);                // Dynamically set the width

  // SETUP (fade or slide?)
  if(efx==="fade") $sli.css({position:"absolute", left:0}).fadeOut(0).eq(c).fadeIn(0);

  function populateDescription() {
    $dsc.text( $sli.eq(c).find("img").attr("alt") );
  }

  function anim() {
    c = c<0 ? n-1 : c%n;          // loop-back counter if exceeds
    populateDescription();
    if (efx==="fade") {
      $sli.fadeOut(animationTime).eq(c).stop().fadeIn(animationTime);
    }else if(efx==="slide") {
      $mov.stop().animate({left: -c*w});
    }
  }

  function auto() {
    $btn.stop().fadeOut(); // Hide buttons while autosliding
    $dsc.stop().fadeOut(); // Hide descriptions while autosliding
    itv = setInterval(function(){
      ++c;                 // Increment (just like we do on NEXT click)
      anim();              // and animate!
    }, pauseTime);         // Do every "pause" mSeconds
  }

  function pause() {
    $btn.stop().fadeIn();
    $dsc.stop().fadeIn();
    return clearInterval( itv );      // Clear any ongoing interval!
  }

  $gal.hover(pause, auto);

  $btn.on("click", function(){
    c = this.id==="next" ? ++c : --c; // If next>increment, else decrement
    anim();                           // Animate!
  });


  populateDescription();              // Init the first slide description
  auto();                             // Start the autoslide!

});

#images_holder {
  background: red;
  position:   relative;
  overflow:   hidden;
  height:     360px;
  width:      480px;
}
#moving_part {
  position: absolute;
  height:   inherit;
  left:     0;
}
#moving_part > div {
  position: relative;
  height:   inherit;
  width:    480px;
  float:    left;
}
#moving_part > div img{
  width:  100%;
}
#prev, #next {
  position: absolute;
  cursor:   pointer;
  top:      47%;	
  display:  none; /* hide initially */
  -webkit-user-select: none;
  user-select: none;
}
#next{
  right: 0px;
}
#description{
  color:      #fff;
  background: rgba(0,0,0,0.4);
  text-align: center;
  position:   absolute;
  padding:    15px;
  right:      0;
  left:       0;
  display:    none; /* hide initially */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="images_holder">
  <div id="moving_part">
    <div>
      <img alt="Image 1" src="//placehold.it/400x300/c7a&text=1">
    </div>
    <div>
      <img alt="Image description 2" src="//placehold.it/400x300/ac7&text=2">
    </div>
    <div>
      <img alt="Image 3" src="//placehold.it/400x300/7ca&text=3">
    </div>
  </div>

  <div id="prev">PREV</div>
  <div id="next">NEXT</div>
  <div id="description">Test</div>
</div>

要添加navigation buttons上面的代码？ 没问题:
由于我们使用函数的方式，这很容易做到。设计您的span CSS 内的按钮，HTML 内只需创建一个父元素，如 <div id="navigation"></div> .
使用 jQuery，我们将自动附加 span按钮:

var $nav = $("#navigation"); // Our buttons parent
var $navBtns;                // Later, our SPAN buttons
var spans = "";
for(var i=0; i<n; i++) {     // `n` is the number of slides!
    spans += "<span>"+ (i+1) +"</span>";
}
// Finally append our generated buttons:
$nav.append( spans );
// Retrieve the created buttons and do something on click
$nav.find("span").on("click", function(){
   c = $(this).index(); // Set our counter to the clicked SPAN index
   anim();              // Animate. That easy.
});

Demo with navigation buttons