图片轮播
今天自己写了一个图片轮播，考虑到动态插入要轮播的图片以及生成相应的圆点图标。实现无缝轮播切换。将jquery简单的封装了一下，可以作为一整个模块任意使用，class命名不同的时候只需要在初始化的时候，改动一下即可。前端刚刚入门，希望大家看到代码如果觉得有改进的，可以写的更简洁更方便的话，请指教。
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态轮播</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/viewpager.css">
</head>
<body>
<div class="wrapper">
<ul class="clearfix banner" id="showArea"></ul>
<a href="javascript:;" class="btnCom btnPrev"><</a>
<a href="javascript:;" class="btnCom btnNext">></a>
<ul class="num" id="iconnum"></ul>
<script type="text/javascript">
var imgsrc=[
{
src:"images/b1.jpg",
url:"#",
picInfo:""
},
{
src:"images/b2.jpg",
url:"#",
picInfo:""
},
{
src:"images/b3.jpg",
url:"#",
picInfo:""
},
{
src:"images/b4.jpg",
url:"#",
picInfo:""
},
{
src:"images/b5.jpg",
url:"#",
picInfo:""
},
{
src:"images/b6.jpg",
url:"#",
picInfo:""
},
];
var showArea=document.getElementById("showArea");
var iconNum=document.getElementById("iconnum");
var picLength=imgsrc.length;
var picDom="";
var iconDom="";
var picwidth=picLength*760;
for(var i=0;i<picLength;i++){
var picSrc;
picsrc=imgsrc[i].src;
picDom+='<li><a target="_blank" href="'+imgsrc[i].url+'"><img alt="'+imgsrc[i].imgInfo+'" src="'+picsrc+'"/></a></li>';
iconDom+='<li></li>';
}
showArea.innerHTML=picDom;
showArea.style.width=(picwidth+760)+"px";
iconNum.innerHTML=iconDom;
</script>
</div>
<script src="js/jquery-1.12.0.js"></script>
<script src="js/viewpager.js"></script>
</body>
</html>
CSS代码：
.wrapper{position:relative;margin:90px auto;width:760px;height:280px;overflow:hidden;border:1px solid #333;}
.wrapper ul.banner{position:absolute;top:0;left:0;z-index:1;}
.wrapper ul.banner li{float:left;}
.wrapper ul.banner li img{width:760px;height:280px;border:none;}
.wrapper .btnCom{display:none;position:absolute;top:50%;margin-top:-45px;z-index:3;width:40px;height:90px;text-align:center;line-height:90px;color:#fff;background:rgba(170,170,170,0.3);font-family:"microsoft yahei";font-size:44px;}
.wrapper .btnCom:hover{text-decoration:none;}
.wrapper .btnPrev{left:0px;}
.wrapper .btnNext{right:0px;}
.wrapper ul.num{position:absolute;left:300px;bottom:0px;z-index:3;}
.wrapper ul.num li{display:inline-block;margin-right:4px;width:20px;height:20px;border-radius:10px;background:#333;cursor:pointer;}
.wrapper ul.num .on{background:#f40510;}
jquery代码
var viewpager=viewpager || {};
viewpager.i=0;
viewpager={
//参数初始化
init:function(){
return def={
wrapper:$(".wrapper"),
btnPrev:$(".btnPrev"),
btnNext:$(".btnNext"),
item:$(".banner"),
iconNum:$(".num"),
btnCom:$(".btnCom")
};
},
//左右点击切换
btnMove:function(){
viewpager.init();
def.item.find("li").eq(0).clone().appendTo(def.item);
def.iconNum.find("li").eq(0).addClass("on").siblings().removeClass("on");
var length=def.item.find("li").length;
var move=function(){
if(i==length){
def.item.css({"left":0});
i=1;
}
if(i==-1){
def.item.css({"left": -(length - 1) * 760 });
i = length - 2;
}
def.item.stop().animate({"left": -i * 760 });
if (i == length - 1) {
def.iconNum.find("li").eq(0).addClass("on").siblings().removeClass("on");
} else {
def.iconNum.find("li").eq(i).addClass("on").siblings().removeClass("on");
}
};
var t=setInterval(function(){i++;move();},2000);
def.wrapper.hover(function(){
clearInterval(t);
def.btnCom.show();
},function(){
t=setInterval(function(){i++;move();},2000);
def.btnCom.hide();
});
def.btnPrev.click(function(){
i--;
move();
});
def.btnNext.click(function(){
i++;
move();
})
},
//数字鼠标划入切换
numMove:function(){
viewpager.init();
def.iconNum.find("li").hover(function(){
var index=$(this).index();
i=index;
def.item.stop().animate({"left": -index * 760 });
$(this).addClass("on").siblings().removeClass("on");
})
}
}
$(document).ready(function(){
viewpager.numMove();
viewpager.btnMove();
})
浙公网安备 33010602011771号