jquery实现焦点轮播效果
HTML代码
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Title</title> <linkrel="stylesheet"href="./css/lunbo.css"rel="externalnofollow"> </head> <body> <divid="banner"> <ulclass="img-ul"></ul> <olclass="index-ol"></ol> <divclass="slide"> <spanclass="prev"><</span> <spanclass="next">></span> </div> </div> <scriptsrc="./js/jquery-1.11.3.js"></script> <scriptsrc="./js/lunbo.js"></script> </body> </html>
css代码
div{
width:670px;
height:240px;
position:relative;
overflow:hidden;
}
div>ul,
divol{
list-style:none;
position:absolute;
margin:0;
padding:0;
}
div>ul.img-ul,
divol.img-ul{
width:3350px;
height:240px;
z-index:100;
}
div>ul.img-ul>li,
divol.img-ul>li{
float:left;
width:670px;
height:240px;
}
div>ul.index-ol,
divol.index-ol{
width:205px;
bottom:10px;
left:217px;
z-index:1000;
}
div>ul.index-ol>li,
divol.index-ol>li{
float:left;
cursor:pointer;
margin-left:20px;
background:#000;
color:#fff;
border-radius:50%;
height:20px;
width:20px;
text-align:center;
line-height:20px;
}
div>ul.index-ol>li.active,
divol.index-ol>li.active{
background:red;
}
div>div.slide{
z-index:500;
position:absolute;
width:670px;
height:240px;
left:0;
top:0;
}
div>div.slide>span{
cursor:pointer;
position:absolute;
top:100px;
width:30px;
height:60px;
line-height:60px;
text-align:center;
font-size:20px;
color:#fff;
background:rgba(0,0,0,0.2);
}
div>div.slide>span:nth-child(1){
left:0;
}
div>div.slide>span:nth-child(2){
right:0;
}
JavaScript代码
vararr=[
{"img":"./images/banner_01.jpg"},
{"img":"./images/banner_02.jpg"},
{"img":"./images/banner_03.jpg"},
{"img":"./images/banner_04.jpg"},
{"img":"./images/banner_05.jpg"},
];
varlunbo={
can:0,//判断
ul_li:"",//图片列表
ol_li:"",//数字列表
width:"",//一个li的宽度
interval:"",//定时器
init:function(){
console.log(this);
this.view();
this.view_index();
$("ol.index-ol").children("li:eq(0)").addClass("active");
this.width=$("ul.img-ul>li").width();//670
this.slide();//这是左右箭头
this.animation_index();//这是下标
this.play();//这是自动轮播
this.mouse();//这是鼠标滑入/滑出
},
mouse:function(){
var_this=this;
$("#banner").on({
mouseenter:function(){
_this.stop()
},
mouseleave:function(){
_this.play();
}
})
},
play:function(){
this.interval=setInterval(function(){
varactive_index=parseInt($("ol.index-ol>li.active").attr("data-index"));//得到当前激活向下标
$("ol.index-ol>li").removeClass("active");
$(this).addClass("active");
this.animation(1);
(active_index==4)&&(active_index=-1);
$("ol.index-ol>li:eq("+(active_index+1)+")").addClass("active")
}.bind(this),3000);
},
stop:function(){
clearInterval(this.interval)
this.interval=null;
},
animation_index:function(){//更新下标
var_this=this;
$("ol.index-ol>li").mouseenter(function(){//点击下标
varactive_index=$("ol.index-ol>li.active").attr("data-index");//得到当前激活向下标
varindex=$(this).attr("data-index");//得到当前下标;
if(active_index==index){return;};
$("ol.index-ol>li").removeClass("active");
$(this).addClass("active");
varend=index-active_index;
_this.animation(-end)
})
},
slide:function(){//点击左右箭头
var_this=this;
$("div.slide>span").click(function(){
if(_this.can){return;};
varactive_index=parseInt($("ol.index-ol>li.active").attr("data-index"));//得到当前激活向下标
$("ol.index-ol>li").removeClass("active");
if(this.className=="prev"){
_this.animation(1);
(active_index==1)&&(active_index=5);
$("ol.index-ol>li:eq("+(active_index-1)+")").addClass("active")
}else{
_this.animation(-1);
(active_index==4)&&(active_index=-1);
$("ol.index-ol>li:eq("+(active_index+1)+")").addClass("active")
}
})
},
view:function(){//更新图片
for(vari=0;i<arr.length;i++){
this.ul_li+="<lidata-index="+i+"><imgsrc="+arr[i].img+"></li>"
}
$("ul.img-ul").html(this.ul_li);
this.ul_li="";
},
view_index:function(){//更新数字
for(vari=0;i<arr.length;i++){
this.ol_li+="<lidata-index="+i+">"+(i+1)+"</li>"
}
$("ol.index-ol").html(this.ol_li);
},
animation:function(n){//做动画
this.can=1;
if(n<0){
arr=arr.splice(arr.length+n,-n).concat(arr);
this.view();
$("ul.img-ul").css({"left":n*this.width+"px"});
$("ul.img-ul").animate({"left":"0px"},1000,function(){
this.can=0;
}.bind(this));
}else{
$("ul.img-ul").animate({"left":-n*this.width+"px"},1000,function(){
arr=arr.concat(arr.splice(0,n));
this.view();
$("ul.img-ul").css({"left":0+"px"});
this.can=0;
}.bind(this));
}
}
};
lunbo.init();
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！