中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

下面小編就為大家帶來一篇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實現圖片向左向右切換效果的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考