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

前端之家收集整理的这篇文章主要介绍了jQuery实现图片向左向右切换效果的简单实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

Box">        
Box">                                 

//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实现图片向左向右切换效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/jquery/48661.html

猜你在找的jQuery相关文章