溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在同學的幫助下，終于使用純js代碼實現了動態輪播，學無止境加油吧！
效果圖是這樣的，我們需要定義一個div，并放入三張圖片，還需要左右兩個按鈕，以及底下三個按鈕三個div。
先看布局代碼
<div class="banner" id="banner">
<ul class="clear" >
<li ><img src="k1.jpg"></li>
<li ><img src="k-2.jpg"></li>
<li ><img src="k-3.jpg"></li>
</ul>
<div class="pageNav"></div>
<div class="leftBtn"></div>
<div class="rightBtn"></div>
</div>
如何是css部分
.clear:after{
display:block;
content:"";
clear:both;
}
.banner{
width: 100%;
position:relative;
height: 390px;
}
.banner ul{
width: 100%;
height: 390px;
list-style-type:none;
overflow: hidden;
}
.banner ul li{
width: 100%;
position: absolute;
}
.pageNav{
position: absolute;
left:50%;
bottom:20px;
transform: translateX(-50%);
}
.pageNav a{
display:inline-block;
margin:0 5px;
width: 20px;
height: 20px;
background-color:#fff;
border-radius:50%;
border:2px solid #000;
cursor:pointer;
}
.pageNav a.cur{
background-color:red;
}
.leftBtn, .rightBtn{
position:absolute;
top: 50%;
transform:translateY(-50%);
width: 40px;
height: 50px;
background-color:rgba(0, 0, 0, 0.5);
cursor:pointer;
}
.leftBtn{
left:0;
}
.rightBtn{
right:0;
}
.leftBtn:hover,.rightBtn:hover{
background-color:rgba(0, 0, 0, 0.8);
}
接下來是js部分
var banner=document.getElementById("banner");
var ul=banner.getElementsByTagName("ul")[0];
var li=ul.getElementsByTagName("li");
var pageNav=banner.getElementsByClassName("pageNav")[0],leftBtn=document.getElementsByClassName("leftBtn")[0],rightBtn=document.getElementsByClassName("rightBtn")[0],n=0,index=0,timerElem=null,state=false;
for(var i=0;i<li.length;i++){//給圖片底下添加按鈕
pageA=document.createElement("a");
if(i==0){
pageA.className="cur";
}
pageNav.appendChild(pageA);
}
pageNav.addEventListener('click',pageNavClick,false);
function pageNavClick(e){
if(state){
return;
}
e=e||window.event;//兼容性考慮
for(var i=0;i<li.length;i++){
if(pageNav.children[i]==e.target){
index=n;
var offset=i-n;
n=i;
showBtn(n);
if(offset>0){
showImg(-100);
}else{
showImg(100);
}
}
}
}
function showBtn(index){
for(var z=0;z<li.length;z++){
pageNav.children[z].className="";
}
pageNav.children[index].className="cur";
}
function showImg(offset){
clearInterval(timerElem);
var speed=offset/20;
timerElem=setInterval(function(){
state=true;
if(parseInt(li[n].style.left)==0){
state=false;
clearInterval(timerElem);
li[n].style.left="0";
for(var l=0;l<n;l++){
li[l].style.left="-100%"
}
for(var r=n+1;r<li.length;r++){
li[r].style.left="100%";
}
}else{
li[n].style.left=parseInt(li[n].style.left)+speed+"%";
li[index].style.left=parseInt(li[index].style.left)+speed+"%";
}
},100)
}
leftBtn.onclick=function(){
if(state){
return;
}
index=n;
n--;
if(n<0){
n=li.length-1;
li[n].style.left="-100%";
}
showBtn(n);
showImg(100);
}
rightBtn.onclick=function(){
if(state){
return;
}
index=n;
n++;
if(n>li.length-
1){
n=0;
li[n].style.left="100%";
}
showBtn(n);
showImg(-100);
}
var timer;
timer=setInterval(autoLunbo,3000);
function autoLunbo(){
rightBtn.onclick();
}
banner.onmouseover=function(){
clearInterval(timer);
}
banner.onmouseout=function(){
timer=setInterval(autoLunbo,3000);
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
