首页 > 编程 > JavaScript > 正文

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

2019-11-20 10:00:40
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表