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