jQuery實現圖片向左向右轉場效果的簡單一實例，jquery向左向右

jQuery實現圖片向左向右轉場效果的簡單一實例，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);　　　　　　});　　　});});

以上這篇jQuery實現圖片向左向右轉場效果的簡單一實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。