原生JS实现轮播图

实习刚结束，由于实习期间一直用的React框架，原生js都有些生疏了，所以用原生js写了个简单的轮播图练练手。

方法一：更改src属性

第一种实现方法是只用一个img元素，然后动态改变src属性实现轮播，轮播的时候只是简单的进行图片切换，没有设置动画

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);
})
}

方法二：计算图片的位置

第二种是把所有图片都放在html框架中，然后用计算位置进行轮播，这种方法实现了动画切换
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;//前者为滑动定时器，后者为轮播定时器
var startAnimationFlag = true;//正在滑动时，点击下一页或上一页将无效
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);
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原生js实现轮播图的组件化
    本文首发于我的博客，这是我的github，欢迎star。 这是一个轮播图组件，你可以直接下载使用，这里是代码地址，...
    空_城__阅读 5,434评论 2赞 5
  • iOS工具和框架1
    1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,040评论 3赞 119
  • NSTimer定时器的销毁
    定时器的销毁 1、如果是在VC中创建的定时器，需要在dealloc方法中销毁 2、有时会自定义View，并且在这个...
    ibiaoma阅读 5,786评论 0赞 0
  • 哦，夕阳
    我家后面有一座石拱桥。每每黄昏降临，我便独自站在桥头，扶着桥栏，凝视天边的那抹夕阳。 看，夕阳染红了西边的天空，为...
    一叶微岚阅读 5,174评论 26赞 45
  • 回忆里那么深
    我们所深深怀念的，都是这辈子再也回不去的过去。晚上浇花的时候，最里边不知怎么的就哼起来不想长大。 小时候，家...
    长不胖的马里阅读 2,865评论 4赞 2