完整轮播图

这是一个js写的滚动轮播图，带有焦点，

未解决的bug：跳跃选择页数的时候，图片不能立即滚动过去而是需要一张一张滚动

贴一下代码；

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>轮播图</title>
<style>
*{
margin:0;
padding:0;
}

li{
list-style:none;
}

#screen{
width:400px;
height:250px;
border:5pxsolidred;
position:absolute;
top:100px;
left:50px;
overflow:hidden;
}

#screenul{
width:1000%;
position:absolute;
}

#screenli{
float:left;
}

#screenimg{
width:400px;
height:250px;
}

#arrspan{
width:40px;
height:40px;
position:absolute;
left:5px;
top:50%;
margin-top:-20px;
background:#000;
cursor:pointer;
line-height:40px;
text-align:center;
font-weight:bold;
font-family:'黑体';
font-size:30px;
color:#fff;
opacity:0.3;
border:1pxsolid#fff;
}

#arr{
display:none;
}

#arr#right{
right:5px;
left:auto;
}

ol{
position:absolute;
right:10px;
bottom:10px;
line-height:20px;
text-align:center;
}

olli{
float:left;
width:20px;
height:20px;
background:#fff;
border:1pxsolid#ccc;
margin-left:10px;
cursor:pointer;
}

olli.current{
background:#DB192A;
}
</style>
</head>
<body>
<divid="screen">
<ul>
<li><imgsrc="../images/11.jpg"alt=""></li>
<li><imgsrc="../images/12.jpg"alt=""></li>
<li><imgsrc="../images/13.jpg"alt=""></li>
<li><imgsrc="../images/14.jpg"alt=""></li>
<li><imgsrc="../images/15.jpg"alt=""></li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<divid="arr">
<spanid="left"><</span>
<spanid="right">></span>
</div>
</div>
</body><script>
//获取盒子
varscreen=document.getElementById("screen");
//获取ul
varulObj=screen.children[0];
//获取li
varlist=ulObj.children;
//获取图片的宽度
varlistWidth=list[0].offsetWidth;
//获取焦点
vararrObj=document.getElementById("arr");
//获取ol
varolObj=screen.children[1];
varindex=0;
//鼠标进入时显示小标签背景色
for(vari=0;i<olObj.children.length;i++){

//给每一个小标签设置索引
olObj.children[i].setAttribute("index",i);

olObj.children[i].onmouseover=function(){
//先清理背景色
for(varj=0;j<olObj.length;j++){
olObj.children[j].className="";
}
this.className="current";
//获取索引值
varindex=this.getAttribute("index");

animation(ulObj,-index*listWidth);
};
olObj.children[i].onmouseout=function(){
this.className="";
}

}
//克隆第一张图片
ulObj.appendChild(ulObj.children[0].cloneNode(true));
//自动播放
vartimeId=setInterval(clickHandle,1000);
//设置鼠标进入显示焦点
screen.onmouseover=function(){
arrObj.style.display="block";
clearInterval(timeId);
}
screen.onmouseout=function(){
arrObj.style.display="none";
timeId=setInterval(clickHandle,1000);
}
//左焦点
document.getElementById("left").onclick=function(){
if(index==0){
index=list.length-1;
ulObj.style.left=-index*listWidth+"px";
}
index--;
animation(ulObj,-index*listWidth);
}
//右焦点
document.getElementById("right").onclick=clickHandle();
functionclickHandle(){
if(index==list.length-1){
index=0;
ulObj.style.left="0px";
}
index++;
animation(ulObj,-index*listWidth);
}

/*
*设置动画函数
*@paramelement,对象
*@paramtarget,移动到的目标位置
**/
functionanimation(element,target){

//先清理定时器
clearInterval(element.timeid);
element.timeid=setInterval(function(){
//获取元素当前位置
varcurrent=element.offsetLeft;
//每次移动的步数
varstep=10;
step=current<target?step:-step;
current+=step;
if(Math.abs(target-current)<Math.abs(step)){
clearInterval(element.timeid);
//直接到达target
element.style.left=target+"px";
}else{
element.style.left=current+"px";
}

},20);
}


</script>

</html>

 

posted @ 2019-02-25 08:31  攻城狮？  阅读(181)  评论(0)  编辑  收藏  举报