京东商城首页jquery轮播特效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-2.1.0.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
margin: 0px;
padding: 0px;
text-align: center;
}
#banner{
border: 1px solid #000;
width: 900px;
height: 420px;
position: relative;
margin: 100px auto;
}
#imglist{
position: relative;
width: 900px;
height: 420px;
left: 0px;
top: 0px;
}
#imglist img{
left: 0px;
top: 0px;
width: 900px;
height: 420px;
position: absolute;
display: none;
}
#box{
width: 190px;
height: 11px;
left: 650px;
top: 370px;
position: absolute;
}
#box div{
width: 12px;
height: 12px;
float: left;
margin-right: 10px;
border-radius: 12px;
border: 1px solid #000;
opacity: 0.8;
}
#box div.dot{
background: black;
width: 12px;
height: 12px;
}
</style>
<script>
$(function(){
var i=0;
box(); //调用自定义函数
$("#box div").click(function(){ //点击改变图片轮播的索引，实现图片的切换
i=$(this).index(); //
$(this).addClass("dot").siblings().removeClass("dot");
$("#imglist img").eq(i).fadeIn(700).siblings().fadeOut(700);
});
function box(){
setTimeout(function(){ //自定义时间函数，实现每5秒执行一次的自动轮播
i++;
if(i>=5){i=0};
$("#imglist img").eq(i).fadeIn(700).siblings().fadeOut(700).parents("#banner").find("#box div").eq(i).addClass("dot").siblings().removeClass("dot"); //实现图片的淡入淡出以及点击图片的切换(实现原理：通过淡入显示当前图片，淡出隐藏其它图片)
box();
},5000);} //每5秒自动调用
})
</script>
</head>
<body>
<div id="banner">
<div id="imglist">
<img src="img/f1.jpg" width="900px" height="420px" style="display: block;" />
<img src="img/f2.jpg" width="900px" height="420px" />
<img src="img/f3.jpg" width="900px" height="420px" />
<img src="img/f4.jpg" width="900px" height="420px" />
<img src="img/f5.jpg" width="900px" height="420px" />
</div>
<div id="box">
<div class="dot"></div> //点击环扣按钮
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号