jQuery实现图片向左向右切换效果的简单实例

时间:2021-05-26

jQuery实现图片向左向右切换效果的简单实例

<div class="imageRotation container">  <div class="imageBox">    <img src="images/chugui.jpg">    <img src="images/ad_auto.jpg">    <img src="images/ad_home.jpg">    <img src="images/ad_nba.jpg">    <img src="images/ad_stock.jpg">    <img src="images/ad_yuetu.jpg">  </div>  <div class="iconBox">    <span rel="1" class="active">1</span>    <span rel="2">2</span>    <span rel="3">3</span>    <span rel="4">4</span>    <span rel="5">5</span>    <span rel="6">6</span>  </div></div> //CSS样式.container {  width: 1000px;  margin: 0 auto;}.imageRotation {  width: 1000px;  height: 480px;  position: relative;  overflow: hidden;  margin-top: 8px;}.imageBox {  position: absolute;  overflow: hidden;  display: block;  height: 480px;}.imageBox img {  width: 1000px;  height: 480px;  float: left;  border: none;  display: block;}.iconBox {  position: absolute;  width: 120px;  height: 12px;  line-height: 12px;  top: 444px;  right: 20px;  text-align: center;}.iconBox span {  width: 6px;  height: 6px;  border-radius: 10px;  text-align: center;  background: #555;  border: 2px solid #f5f5f5;  float: left;  text-indent: -999em;  margin-left: 5px;  cursor: pointer;}.iconBox span.active {  width: 6px;  height: 6px;  background: #820000;  border-radius: 10px;  text-align: center;  text-indent: -999em;} //js逻辑$(function() {  $(".imageRotation").each(function() {    var imageRotation = this,    imageBox = $(imageRotation).children(".imageBox"),     iconBox = $(imageRotation).children(".iconBox"),     iconArr = $(iconBox).children(),     imageWidth = $(imageRotation).width(),     imageNum = $(imageBox).children().size(),     imageRollWidth = imageWidth * imageNum,    activeID = parseInt($($(iconBox).children(".active")).attr("rel")),    nextID = 0;     var setIntervalID,    setIntervalTime = 3000,    speed = 500;  //设置 图片容器 的宽度  $(imageBox).css({    'width': imageRollWidth + "px"  });  //图片切换函数  function imageRoll(clickID) {    if (clickID) {    nextID = clickID;    } else {      if (activeID <= 5) {        nextID = activeID + 1      } else {    nextID = 1;      }    }    //图标添加样式、删除样式    $(iconArr[activeID - 1]).removeClass("active");    $(iconArr[nextID - 1]).addClass("active");    $(imageBox).animate({      left: "-" + (nextID - 1) * imageWidth + "px"    }, speed);    activeID = nextID;  }  setIntervalID = setInterval(imageRoll, setIntervalTime);  //鼠标移动事件  $(imageBox).hover(function() {    clearInterval(setIntervalID);  }, function() {  setIntervalID = setInterval(imageRoll, setIntervalTime);});    //鼠标点击事件    $(iconArr).click(function() {      clearInterval(setIntervalID);      var clickID = parseInt($(this).attr("rel")); //获取当前点击图片的id      imageRoll(clickID);      setIntervalID = setInterval(imageRoll, setIntervalTime);      });   });});

以上这篇jQuery实现图片向左向右切换效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章