下面小编就为大家带来一篇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实现图片向左向右切换效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考