版权声明：本文为博主 我吃酸萝卜/李帅醒 原创， 未经博主允许不得转载。新浪微博@我吃酸萝卜 https://blog.csdn.net/wcslb/article/details/53411941
如今轮播图已然成为网站中的最常用功能功能之一,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。今天就教教大家做一个仿京东的轮播
图。
1.首先定时器实现轮播效果。
2.图下的按钮也可以控制轮播顺序。
3.左右按钮平时隐藏，鼠标移入时才显示。
CSS页面代码：
<style type="text/css">
*{
margin: 0px;
padding: 0px;
box-sizing:border-box;
}
#banner{
position: relative;
margin: 0px auto;
list-style: none;
position: absolute;
transition: all 1s; /*过度效果*/
-ms-transform: all 1s; /*让IE兼容*/
}
#banner li{
float: left;
width: 730px;
height: 454px;
}
#round{
width: 730px;
list-style: none;
position: relative;
top: 400px;
left: 290px;
}
#round li{
float: left;
width: 30px;
height: 30px;
border-radius: 50%;
background: #000;
color: #fff;
line-height: 26px;
text-align: center;
margin-left: 7px;
margin-right: 7px;
cursor: pointer;
}
#wrap{
margin: 0px auto;
width: 730px;
height: 454px;
background: yellow;
overflow: hidden;
position: relative;
}
#left{
position: absolute;
height: 454px;
left: 0px;
opacity: 0.8;
}
#right{
position: absolute;
height: 454px;
right: 0px;
opacity: 0.8;
}
a{
text-decoration: none;
display:inline-block;
width: 76px;
height: 109px;
margin-top: 180px;
box-shadow: 6px 6px 6px 6px #666;
border-radius: 5px;
}
#left a{
background: url(images/a.png);
}
#right a{
background: url(images/b.png);
}
</style><body>
<div id="wrap">
<ul id="banner">
</ul>
<ul id="round">
</ul>
<div id="left" >
<a href="#" style="display:none" ></a>
</div>
<div id="right" >
<a href="#" style="display:none"></a>
</div>
</div>
</body>
JS代码：
<script type="text/javascript">
var ArrImg=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
var num=ArrImg.length;
//创建li和小原点
for(var i=0;i<ArrImg.length;i++){
$("<li/>").css("background","url("+ArrImg[i]+")").appendTo($("#banner"));
$("<li/>").html(i+1).appendTo($("#round"));
}
//设置ul宽度
$("#banner").css("width",$("#banner li:eq(1)").width()*(ArrImg.length)+"px");
//操作轮播图
// 1.轮播最大的left值
var Liw=$("#banner li").width();
var bannerW=$("#banner").width();
var index=0;
//图片变化初始化
function move(index){
$("#banner").css("left",-Liw*index );
$("#round li").css("background","#000");
$("#round li").eq(index).css("background","red");
}
//图片变化
var time1=setInterval(changeImg,1500);
function changeImg(){
move(index)
if(index==4){
index=-1;
}
index++;
}
//点击下标
$("#round li").on('mouseenter',function(){
index=$(this).index();
clearInterval(time1);
move(index)
})
$("#round li").on('mouseout',function(){
time1=setInterval(changeImg,1500);
})
//划过出现按钮
$("#wrap").on('mouseenter',function(){
$("#right a").add("#left a").css("display","block");
}).on('mouseleave',function(){
$("#right a").add("#left a").css("display","none");
})
//点击按钮
$("#left a").add($("#right a")).hover(function(){
clearInterval(time1);
},function (){
time1=setInterval(changeImg,1500);
});
$("#right a").on('click',function(){
clearInterval(time1);
index=((++index)%5);
move(index)
});
$("#left a").on('click',function(){
clearInterval(time1);
index=((5+--index)%5);
move(index)
});
console.log(0%5);
</script>（我吃酸萝卜 新浪微博http://www.weibo.com/wcslb ---李帅醒著）
