jQuery实现图片向左向右切换效果的简单实例
jQuery实现图片向左向右切换效果的简单实例
<divclass="imageRotationcontainer">
<divclass="imageBox">
<imgsrc="images/chugui.jpg">
<imgsrc="images/ad_auto.jpg">
<imgsrc="images/ad_home.jpg">
<imgsrc="images/ad_nba.jpg">
<imgsrc="images/ad_stock.jpg">
<imgsrc="images/ad_yuetu.jpg">
</div>
<divclass="iconBox">
<spanrel="1"class="active">1</span>
<spanrel="2">2</span>
<spanrel="3">3</span>
<spanrel="4">4</span>
<spanrel="5">5</span>
<spanrel="6">6</span>
</div>
</div>
//CSS样式
.container{
width:1000px;
margin:0auto;
}
.imageRotation{
width:1000px;
height:480px;
position:relative;
overflow:hidden;
margin-top:8px;
}
.imageBox{
position:absolute;
overflow:hidden;
display:block;
height:480px;
}
.imageBoximg{
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;
}
.iconBoxspan{
width:6px;
height:6px;
border-radius:10px;
text-align:center;
background:#555;
border:2pxsolid#f5f5f5;
float:left;
text-indent:-999em;
margin-left:5px;
cursor:pointer;
}
.iconBoxspan.active{
width:6px;
height:6px;
background:#820000;
border-radius:10px;
text-align:center;
text-indent:-999em;
}
//js逻辑
$(function(){
$(".imageRotation").each(function(){
varimageRotation=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;
varsetIntervalID,
setIntervalTime=3000,
speed=500;
//设置图片容器的宽度
$(imageBox).css({
'width':imageRollWidth+"px"
});
//图片切换函数
functionimageRoll(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);
varclickID=parseInt($(this).attr("rel"));//获取当前点击图片的id
imageRoll(clickID);
setIntervalID=setInterval(imageRoll,setIntervalTime);
});
});
});
以上这篇jQuery实现图片向左向右切换效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。