jquery 简单幻灯片

最新推荐文章于 2022-06-06 21:45:29 发布

原创最新推荐文章于 2022-06-06 21:45:29 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #HTML #ViewUI

本文介绍如何使用jQuery实现一个简单的图片轮播功能，通过自定义的CSS样式和JavaScript逻辑，使得多个图片在指定的div容器内按照预设路径平移展示，同时提供了交互控制按钮实现图片切换。

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