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

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

相关推荐