完整輪播圖

時間 2019-11-13

標籤完整简体版

原文原文鏈接

這是一個js寫的滾動輪播圖，帶有焦點，html

未解決的bug：跳躍選擇頁數的時候，圖片不能當即滾動過去而是須要一張一張滾動app

貼一下代碼；函數

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。