1

目前我需要为<div>. 但是由于大多数插件的大小，我正在尝试创建自己的 jquery 脚本，因为我只需要基础知识。但老实说，我真的是 jQuery 的初学者，可以使用一些帮助。

目前我得到了一个<div>容器（宽度为250overflow:hidden像素），因为<div>我得到了另一个<div>需要从右向左移动的容器（宽度为 2500 像素）。我希望$(document).ready函数上的 div 以 250px 的步长向左移动，间隔为 5 秒。但是在花了整个上午试图弄清楚从哪里开始之后，我仍然被困住了。

此外，我想要以下选项：

  1. 在内层<div>完全向左后，它会逐渐变回原来的位置。
  2. 一种创建“点”以导航到某个位置的方法，当导航到该位置时，幻灯片将从该位置开始动画。

我知道这是一个很大的（困难的？）问题，但即使是一点点帮助也会非常感激。

4

3 回答 3

3

这是我创建的符合您要求的演示：little link。jQuery/JavaScript 已完全注释以供参考，但如果任何部分需要额外详细说明，我很乐意解释更多！

于 2012-09-04T11:06:15.627 回答
1

用正确的程序更新了你的 JSFiddle

小提琴演示

于 2012-09-04T11:03:40.340 回答
1

jsBin 演示

HTML：

<div id="slider">    
  <div id="slider_cont">
    <div id="slide">
       <!-- wide content here -->
    </div>    
  </div>  
  <div id="dots"><!--leave empty--></div> 
</div>

CSS：

#slider_cont{
  width:250px;
  height:180px;
  position:relative;
  background:#eee;
  overflow:hidden;
}
#slide{
  position:absolute;
  left:0;
  width:2500px;
  height:180px;
}
.dot{
  cursor:pointer;
  background:#444;
  width:10px;
  height:10px;
  margin:4px 2px;
  position:relative;
  float:left;
  border-radius:10px;
}
.dot.active{
  background:#49a;
}

jQuery：

var steps = 10,  // SET DESIRED n OF STEPS
    delay = 3500,// SET DESIRED DELAY
    galW = $('#slider_cont').width(),
    c = 0,      // counter
    intv;       // interval

// generate dots
for(i=0;i<steps;i++){
 $('#dots').append('<div class="dot" />'); 
}
$('#dots .dot').eq(c).addClass('active');

// ANIMATIONS function
function anim(){
  c=c%steps; // reset counter to '0' if greater than steps
  $('#slide').stop().animate({left: '-'+galW*c},800);
  $('#dots .dot').removeClass('active').eq(c).addClass('active');
}

// AUTO SLIDE function
function auto(){
  intv = setInterval(function(){
    c++; anim();
  },delay);
}
auto(); // kick auto slide

// PAUSE slider on mouseenter
$('#slider').on('mouseenter mouseleave',function(e){
  var evt = e.type=='mouseenter'? clearInterval(intv) : auto();
});

// CLICK dots to animate
$('#dots').on('click','.dot',function(){
  c=$(this).index(); anim();
});

希望我对代码进行了很好的评论，请问您是否有问题

于 2012-09-04T11:27:53.540 回答