将脚本修改为更像实际的横幅滑块

时间：2015-04-22 12:18:38

标签： javascript jquery

我试图弄清楚如何修改我在stackoverflow上找到的代码，使其更像是一个实际的滑块。

http://jsfiddle.net/5Lc7cc7u/

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

2）如果在第一个滑块图像上，我希望背面返回到最后一个滑块图像。

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;
}

2 个答案:

答案 0 :(得分：0)

<强> jsBin demo

编码您共享的代码的人...... 这是一个总mi（e）ss。
一些建设性原因：

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

 <OVERLAY element>    >> BUT WHY?
 <underlay element>   
 -------------------------------
 <underlay element>  
 <OVERLAY element>    >> CORRECT
  • 在CSS中硬编码滑动DIV 宽度没有意义。 应该是动态的
  • 当用户操作图库时，应停止幻灯片间隔。 清除图库悬停上的间隔
  • 应该避免使用Spaghetti 代码。计算幻灯片。计算宽度。 将您的逻辑分为功能。
  • 图片应具有alt属性和图像说明。每个体面的CMS编辑器都可以使用alt属性。那么为什么不使用这些数据而不是硬编码呢？ （只是一个建议）
  • 请勿为淡入淡出效果创建单独的代码。通过适当的HTML和CSS设置，只需几行jQuery即可更改库效果（请参阅下面示例中的var efx）和相关的animate代码。
  • “良好的用户界面=用户体验”。所有用户已经习惯了广泛使用正确的图库动画逻辑，如果您点击 NEXT按钮＆gt;将容器设置为左侧动画。 （对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吗？ 没问题：
我们使用函数的方式很容易实现。在CSS内部设置span按钮样式，内部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

答案 1 :(得分：-1)

在这里你去：从最后它回到第一个（因为第1点完成没有案例2）

  • 图像持有者的数量和大小不再​​在js
    • 中硬编码

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

$( "#move_right_button" ).click( function() {
        move_right();
} );
var imgNum=$('.image_holder').length;
var imgWidth=parseInt($('.image_holder').css( "width"));
$( "#moving_part" ).css( "width" ,imgNum*imgWidth +"px" );

function move_left() {
    if( get_acct_left() >= -imgWidth*imgNum) {
        $( "#moving_part" ).animate( {
            left: '-='+imgWidth
        }, 1000, function() {

            if( get_acct_left() <=( -imgWidth * ((imgNum)-1)) ) {
                $( "#moving_part" ).attr( "data-direction", "to_right" );
            }
        } );
    }
}
function move_right() {
    if( get_acct_left() < 0 ) {
        $( "#moving_part" ).animate( {
            left:  '+='+imgWidth
        }, 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 );
＆＃13; 
#images_holder {
    position: relative;
    overflow: hidden;
    width: 480px;
    height: 360px;
    color: red;
}
#moving_part {
    position: absolute;
    top: 0;
    width: 480px;
    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;
}
＆＃13; 
<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 class="image_holder">
            <span>image 4</span>
            <img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

DEMO

享受

淡出版

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

$("#move_right_button").click(function () {
    move_right();
});
var imgNum = $('.image_holder').length;
var imgWidth = parseInt($('.image_holder').css("width"));
$("#moving_part").css("width", imgNum * imgWidth + "px");

function move_left() {
    if (get_acct_left() >= -imgWidth * imgNum) {
        $("#moving_part").fadeOut(500, function () {
            $("#moving_part").css("left", (get_acct_left() - imgWidth))
            if (get_acct_left() <= (-imgWidth * ((imgNum) - 1))) {
                $("#moving_part").attr("data-direction", "to_right");
            }

            $("#moving_part").fadeIn(500, function () {});
        });
    }
}

function move_right() {
    if (get_acct_left() < 0) {
        $("#moving_part").fadeOut(500, function () {



            $("#moving_part").css("left", (0))
            $("#moving_part").attr("data-direction", "to_left");
            $("#moving_part").fadeIn(500, function () {});
        });
    }
}

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);
＆＃13; 
#images_holder {
    position: relative;
    overflow: hidden;
    width: 480px;
    height: 360px;
    color: red;
}
#moving_part {
    position: absolute;
    top: 0;
    width: 480px;
    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;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 class="image_holder"> <span>image 4</span>

            <img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

http://jsfiddle.net/5Lc7cc7u/8/

相关问题
最新问题