jQuery實(shí)現(xiàn)圖片向左向右切換效果的簡(jiǎn)單實(shí)例

    下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)圖片向左向右切換效果的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。
    jQuery實(shí)現(xiàn)圖片向左向右切換效果的簡(jiǎn)單實(shí)例
    <div>
    <div>
    　<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>
    　<span rel="1">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;
    //設(shè)置 圖片容器 的寬度
    $(imageBox).css({
    　'width': imageRollWidth + "px"
    });
    //圖片切換函數(shù)
    function imageRoll(clickID) {
    　if (clickID) {
    　nextID = clickID;
    　} else {
    　if (activeID <= 5) {
    　　　nextID = activeID + 1
    　} else {
    　nextID = 1;
    　}
    　}
    　//圖標(biāo)添加樣式、刪除樣式
    　$(iconArr[activeID - 1]).removeClass("active");
    　$(iconArr[nextID - 1]).addClass("active");
    　$(imageBox).animate({
    　left: "-" + (nextID - 1) * imageWidth + "px"
    　}, speed);
    　activeID = nextID;
    }
    setIntervalID = setInterval(imageRoll, setIntervalTime);
    //鼠標(biāo)移動(dòng)事件
    $(imageBox).hover(function() {
    　clearInterval(setIntervalID);
    }, function() {
    setIntervalID = setInterval(imageRoll, setIntervalTime);
    });
    　//鼠標(biāo)點(diǎn)擊事件
    　$(iconArr).click(function() {
    　clearInterval(setIntervalID);
    　var clickID = parseInt($(this).attr("rel")); //獲取當(dāng)前點(diǎn)擊圖片的id
    　imageRoll(clickID);
    　setIntervalID = setInterval(imageRoll, setIntervalTime);
    　});
    });
    });
    以上這篇jQuery實(shí)現(xiàn)圖片向左向右切換效果的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考