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

noty ? jQuery通知插件全面解析
noty是一个jQuery的通知(信息提示)插件，灵活轻便，是一个非常棒的用于替代传统提示对话框的插件。当前最新版本为2.1.0:从https://github.com/needim/noty可以

jquery遍历json对象集合详解
本文实例采用案例分析的方法介绍了jquery遍历json对象的三种情况，供大家参考，具体内容如下第一个案例：jquery遍历json对象集合常用示例jsp中$.ajax({url:

jQuery点击输入框显示验证码图片
先看效果图：要求：当输入框获得焦点时，自动显示验证图片。代码如下（学习而已，仅供参考）：/***********************下是验证码对象*****************/varVa