原生JS實(shí)現(xiàn)輪播圖

實(shí)習(xí)剛結(jié)束，由于實(shí)習(xí)期間一直用的React框架，原生js都有些生疏了，所以用原生js寫了個(gè)簡(jiǎn)單的輪播圖練練手。

方法一：更改src屬性

第一種實(shí)現(xiàn)方法是只用一個(gè)img元素，然后動(dòng)態(tài)改變src屬性實(shí)現(xiàn)輪播，輪播的時(shí)候只是簡(jiǎn)單的進(jìn)行圖片切換，沒有設(shè)置動(dòng)畫

HTML代碼：

<!DOCTYPE html5>
<html>
<head>
<title>SowingMap</title>
<meta charset="utf-8"/>
<link href='./style.css' type='text/css' rel='stylesheet'/>
</head>
<body>
<div>
<div class = 'FigureContainer' id= 'FigureContainer'>
<ul type='none' id='imgList'>
<li><img id='picture' src='imgs/1.jpg'></li>
</ul>
<ul type='none' id='buttonList'>
<li class='curIndex'></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id='prev'><img src='imgs/icon-arrow-left.png'></div>
<div id='next'><img src='imgs/icon-arrow-right.png'></div>
</div>
</div>
<script src='sowingMap.js' type='text/javascript'></script>
</body>
</html>

CSS代碼：

*{
margin:0;
padding:0;
}
.figureContainer{
width:500px;
height:375px;
overflow: display;
position:relative;
margin:0 auto;
}
.figureContainer img{
width:500px;
}
#imgList{
width:100%;
}
#imgList li{
width:500px;
height:375px;
float: left;
}
#buttonList{
display: flex;
width:100%;
justify-content: center;
}
#buttonList li{
width:40px;
height:5px;
background: rgb(211, 197, 197);
margin:5px;
}
#buttonList .curIndex{
background: rgb(146, 135, 135);
}
#prev img,#next img{
width:30px;
cursor: pointer;
}
#prev img{
position: absolute;
left:-50px;
top:50%;
transform:translate(0,-50%);
}
#next img{
position: absolute;
right:-50px;
top:50%;
transform:translate(0,-50%);
}

js代碼：

window.onload = function() {
var imgSrcs=[];
var prevBt = document.getElementById('prev');
var nextBt = document.getElementById('next');
var pic = document.getElementById('picture');
var buttons = document.getElementById('buttonList').getElementsByTagName('li');
var container = document.getElementById('FigureContainer');
var PREV_HANDLER = false;
var NEXT_HANDLER = true;
var cur=1;
var i = 0;
for( i = 0; i < 4; i++ ){
imgSrcs.push('imgs/'+(i+1)+'.jpg');
(function(index){
buttons[index].addEventListener('click',function(){
var prevIndex = cur;
cur = index+1;
buttons[prevIndex-1].classList.toggle('curIndex');
buttons[cur-1].classList.toggle('curIndex');
pic.src = imgSrcs[cur-1];
})
})(i);
}
var handler = function (flag) {
var prevIndex = cur;
if(flag===PREV_HANDLER){
if(cur===1){
cur = 4;
}else{
cur--;
}
}else{
if(cur===4){
cur = 1;
}else{
cur++;
}
}
buttons[prevIndex-1].classList.toggle('curIndex');
buttons[cur-1].classList.toggle('curIndex');
pic.src = imgSrcs[cur-1];
}
var prevBtHandler = handler.bind(null,PREV_HANDLER);
var nextBthandler = handler.bind(null,NEXT_HANDLER);
prevBt.addEventListener('click',prevBtHandler,false);
nextBt.addEventListener('click',nextBthandler,false);
timer = setInterval(nextBthandler,3000);
container.addEventListener('mouseenter',function(){
if(timer){
clearInterval(timer);
}
});
container.addEventListener('mouseleave',function(){
timer = setInterval(nextBthandler,3000);
})
}

方法二：計(jì)算圖片的位置

第二種是把所有圖片都放在html框架中，然后用計(jì)算位置進(jìn)行輪播，這種方法實(shí)現(xiàn)了動(dòng)畫切換
HTML代碼：

<!DOCTYPE html5>
<html>
<head>
<title>SowingMap2</title>
<meta charset="utf-8"/>
<link href='./style.css' type='text/css' rel='stylesheet'/>
</head>
<body>
<div>
<div class = 'FigureContainer' id= 'FigureContainer'>
<ul type='none' id='imgList'>
<li><img src='imgs/1.jpg'></li>
<li><img src='imgs/2.jpg'></li>
<li><img src='imgs/3.jpg'></li>
<li><img src='imgs/4.jpg'></li>
</ul>
<ul type='none' id='buttonList'>
<li class='curIndex'></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id='prev'><img src='imgs/icon-arrow-left.png'></div>
<div id='next'><img src='imgs/icon-arrow-right.png'></div>
</div>
</div>
<script src='sowingMap.js' type='text/javascript'></script>
</body>
</html>

CSS代碼：

*{
margin:0;
padding:0;
}
.figureContainer{
width:500px;
height:375px;
overflow: hidden;
position:relative;
margin:0 auto;
}
.figureContainer img{
width:500px;
}
#imgList{
position: absolute;
left:0;
top:0;
width:400%;
}
#imgList li{
width:500px;
height:375px;
float: left;
}
#buttonList{
display: flex;
width:100%;
justify-content: center;
position: absolute;
bottom:20px;
}
#buttonList li{
width:40px;
height:5px;
background: rgb(211, 197, 197);
margin:5px;
}
#buttonList .curIndex{
background: rgb(146, 135, 135);
}
#prev img,#next img{
width:30px;
padding:5px;
cursor: pointer;
background: rgba(204, 198, 198,0.7);
}
#prev img{
position: absolute;
left:20px;
top:50%;
transform:translate(0,-50%);
}
#next img{
position: absolute;
right:20px;
top:50%;
transform:translate(0,-50%);
}

js代碼：

var imgSrcs=[];
var prevBt = document.getElementById('prev');
var nextBt = document.getElementById('next');
var imgList = document.getElementById('imgList');
var buttons = document.getElementById('buttonList').getElementsByTagName('li');
var container = document.getElementById('FigureContainer');
var cur = 0;
var timer,timer_2;//前者為滑動(dòng)定時(shí)器，后者為輪播定時(shí)器
var startAnimationFlag = true;//正在滑動(dòng)時(shí)，點(diǎn)擊下一頁(yè)或上一頁(yè)將無效
imgList.style.left = '0px';
function animate(curIndex, nextIndex){
if(!startAnimationFlag)
return;
var offset = (nextIndex - curIndex)*500;
var step = offset/20;
var target = parseFloat(imgList.style.left) - offset;
buttons[curIndex].classList.toggle('curIndex');
buttons[nextIndex].classList.toggle('curIndex');
timer = setInterval(function(){
var curPosition = parseFloat(imgList.style.left);
if(curPosition!=target){
var nextPosition = curPosition-step;
imgList.style.left = nextPosition + 'px';
console.log('未清除前：',timer);
clearInterval(timer_2);
startAnimationFlag = false;
}else{
timer_2 = setInterval(function(){
animate(cur,(cur+1)%4);
},2000);
clearInterval(timer);
console.log('清除后：',timer);
startAnimationFlag = true;
}
},20)
cur = nextIndex;
}
nextBt.addEventListener('click',function(){
var nextIndex = 0;
if(cur===3){
nextIndex = 0;
}else{
nextIndex = cur+1;
}
animate(cur,nextIndex);
},false);
prevBt.addEventListener('click',function(){
var nextIndex = 0;
if(cur===0){
nextIndex = 3;
}else{
nextIndex = cur-1;
}
animate(cur,nextIndex);
},false);
for(var i =0; i<4; i++){
(function(index){
buttons[index].addEventListener('click',function(){
animate(cur,index);
});
})(i)
}
timer_2 = setInterval(function(){
animate(cur,(cur+1)%4);
},2000);
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本文首發(fā)于我的博客，這是我的github，歡迎star。 這是一個(gè)輪播圖組件，你可以直接下載使用，這里是代碼地址，...
    空_城__閱讀 1,609評(píng)論 2贊 5
  • 1、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請(qǐng)求組件 FMDB本地?cái)?shù)據(jù)庫(kù)組件 SD...
    陽(yáng)明AI閱讀 16,195評(píng)論 3贊 119
  • 定時(shí)器的銷毀 1、如果是在VC中創(chuàng)建的定時(shí)器，需要在dealloc方法中銷毀 2、有時(shí)會(huì)自定義View，并且在這個(gè)...
    ibiaoma閱讀 1,895評(píng)論 0贊 0
  • 我家后面有一座石拱橋。每每黃昏降臨，我便獨(dú)自站在橋頭，扶著橋欄，凝視天邊的那抹夕陽(yáng)。 看，夕陽(yáng)染紅了西邊的天空，為...
    一葉微嵐閱讀 1,432評(píng)論 26贊 45
  • 我們所深深懷念的，都是這輩子再也回不去的過去。晚上澆花的時(shí)候，最里邊不知怎么的就哼起來不想長(zhǎng)大。 小時(shí)候，家...
    長(zhǎng)不胖的馬里閱讀 412評(píng)論 4贊 2

友情鏈接更多精彩內(nèi)容