jQuery滑动插件实现图片轮播效果-优快云博客

本文链接：https://blog.youkuaiyun.com/java_mail_test/article/details/83559705

<html>
<head>
<title>jquery sliders</title>
<style>
  #bigger{width:120px;height:80px;overflow:hidden;margin:0px;padding:0px;}
  #big {width:840px;margin:0px;padding:0px;position:relative;}
  #big div {width:120px;text-align:center;margin:0px;padding:0px;float:left;}
</style>
<script src="jquery.js"></script>
<script>
var justClick = 0;
var timer = new Date().getTime();
window.onload = function() {
  var arr = [];
  $("#big div").each(function() {
   arr.push($(this).position());
  }).each(function(i) {
   $(this).css({
    position : 'absolute',
    top : arr[i].top ,
    left : arr[i].left
   });
  });
  $("#control button").mouseover(function() {
   changePicture($(this));
  });
  setInterval(function() {
   if( (new Date().getTime() - timer) > 2000 ) {
    var index = justClick + 1;
      if(index == 7) {
       index = 0;
      }
      changePicture($("#control button:eq(" + index + ")"));
      timer = new Date().getTime();
   }
  } , 3000);
};
function changePicture(node) {
   var index = node.html() - 1;
   var len = $("#big div").length;
   if(index != justClick) {
    for(var i = 0 ; i < len ; i++) {
      $("#big div:eq(" + i + ")").stop(true , true).animate({left : "-=" + (index - justClick) * 120 + "px"} , 300);
    }
    justClick = index;
    timer = new Date().getTime();
   }
}
</script>
</head>
<body>
  <div id="bigger">
   <div id="big">
  <div><img src="images/1_s.jpg"></div>
  <div><img src="images/2_s.jpg"></div>
  <div><img src="images/3_s.jpg"></div>
  <div><img src="images/4_s.jpg"></div>
  <div><img src="images/5_s.jpg"></div>
  <div><img src="images/6_s.jpg"></div>
  <div><img src="images/7_s.jpg"></div>
</div>
  </div>

  <div id="control">
   <button>1</button>
   <button>2</button>
   <button>3</button>
   <button>4</button>
   <button>5</button>
   <button>6</button>
   <button>7</button>
  </div>

</body>
</html>