在各种浏览端口泛滥的如今，轮播图（对，就是那种滑来滑去的图片）随处可见，网店尤甚。千峰整理了以下这些代码，使用HTML实现图片轮播功能，有兴趣的小伙伴可以试试看。
需要软件开发相关资料的同学请关注我哦！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* { padding: 0; margin: 0; list-style: none; }
/********************************************/
.banner { width: 1920px; height: 500px; overflow: hidden; position: relative; margin-left: auto; margin-right: auto; }
.banner .img {position: absolute; left: 0px; top: 0; } /*图片样式*/
.banner .img li { float: left; } /*图片样式*/
.banner .img img { width: 550px; }
/*/ 小圆圈 /*/
.banner .num { position: absolute; width: 100%; bottom: 50px; left: 0; text-align: center; font-size: 0px;; }/*bottom 可以调整小圈圈高度 */
.banner .num li { width: 10px; height: 10px; background: #888; border-radius: 50%; display: inline-block; margin: 0 3px; cursor: pointer; }
.banner .num li.on { background: #F60; }
/*/ 按钮 /*/
.banner .btn { width: 30px; height: 50px; background: rgba(0,0,0,0.5); position: absolute; top: 50%; margin-top: -25px; cursor: pointer; text-align: center; line-height: 50px; color: #fff; font-size: 40px; font-family: "宋体"; display: none; }
.banner:hover .btn { display: block; }
.banner .btn_l { left: 0; }
.banner .btn_r { right: 0; }
/* 修改输出屏大小 */
#ban1 .banner { width: 100%px; height:600px; margin: 0 auto; border: 0px solid #000; }
#ban1 .banner .img img { width: 1920px; height: 600px; /* 修改图片大小 */
</style>
</head>
<body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="../gundongimages/js/gdlb.js"></script>
<div id="ban1">
<div class="banner">
<ul class="img">
<li><a href="#"><img src="..。。。。。。。。。。。。。。"></a></li>
<li><a href="#"><img src="。。。。。。。。。。。。。。。。。"></a></li> /* 图片路径根据自己的图片路径填写 */
</ul>
<ul class="num"> <!--小圆圈-->
</ul>
<div class="btn btn_l"><</div> <!--左按钮 -->
<div class="btn btn_r">></div> <!--右按钮 -->
</div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------
js部分
----------------------------------------------------------------------------------------------
$(function(){
imgscrool('#ban1');
imgscrool('#ban2');
})
//这是函数
function imgscrool(obj){
var moving = false;
var width = $(obj+" .banner .img img").width();
var i=0;
var clone=$(obj+" .banner .img li").first().clone();
$(obj+" .banner .img").append(clone);
var size=$(obj+" .banner .img li").size();
for(var j=0;j<size-1;j++){
$(obj+" .banner .num").append("<li></li>");
}
$(obj+" .banner .num li").first().addClass("on");
/*鼠标划入圆点*/
if ($(obj+" .banner .num li")) {
$(obj+" .banner .num li").hover(function(){
var index=$(this).index();
i=index;
$(obj+" .banner .img").stop().animate({left:-index*width},1000)
$(this).addClass("on").siblings().removeClass("on")
})
};
//处理轮播初始宽度问题
var a2= $(obj+" .banner img").width();
var a3= $(obj+" .img li").length
$(obj+" .banner .img").width(a2*a3+'px');
/*自动轮播*/
var t=setInterval(function(){
i++;
move();
},2000)
/*对banner定时器的操作*/
$(obj+" .banner").hover(function(){
clearInterval(t);
},function(){
t=setInterval(function(){
i++;
move();
},2000)
})
if ($(obj+" .banner .btn_l")) {
/*向左的按钮*/
$(obj+" .banner .btn_l").stop(true).click(function(){
if(moving){
return;
};
moving=true;
i--
move();
})
/*向右的按钮*/
$(obj+" .banner .btn_r").stop(true).click(function(){
if(moving){
return;
}
moving=true;
i++
move()
})
};
function move(){
if(i==size){
$(obj+" .banner .img").css({left:0})
i=1;
}
// 修改轮播每屏宽度
if(i==-1){
$(obj+" .banner .img").css({left:-(size-1)*width})
i=size-2;
}
$(obj+" .banner .img").stop(true).delay(200).animate({left:-i*width},1000,function(){
moving = false;
})
if(i==size-1){
$(obj+" .banner .num li").eq(0).addClass("on").siblings().removeClass("on")
}else{
$(obj+" .banner .num li").eq(i).addClass("on").siblings().removeClass("on")
}
}
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h50841.shtml
