50行代码手写原生js轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width:200px;height:100px;border:1px dashed #ccc;">
<img style="width:200px;height:100px;">
<div class="btn"></div>
<button onclick="nextClick('0')">上一步</button><button onclick="nextClick('1')">下一步</button>
</div>
</body>
</html>
<script>
var src = 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3390010055,2124910244&fm=26&gp=0.jpg';
var timer = null;
var tiemrout = null;
var btnIndexList = [0,1,2];
var template = '';
var nowNum = 0;
for(var i = 0;len = btnIndexList.length,i<len;i++){
template += '<button onclick='+"handleClick("+i+",0)>"+i+'</button>'
};
document.querySelector('.btn').innerHTML = template;
var setSrc = function(val){
document.querySelector('img').setAttribute('src',src);
var btnList = document.querySelector('.btn').children;
for(var j = 0;len = btnList.length,j<len;j++){
btnList[j].setAttribute('style','background:#999');
btnList[val].setAttribute('style','background:red');
}
};
var handleClick = function(val,isAuto){
src = ["https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3390010055,2124910244&fm=26&gp=0.jpg","https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3371480176,379804256&fm=26&gp=0.jpg","https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1756487459,1115749781&fm=26&gp=0.jpg"][val];
setSrc(val);
if(isAuto === 0){
clearInterval(timer);
clearTimeout(tiemrout);
tiemrout = setTimeout(function(){
rotation(nowNum,1);
},2000);
};
};
var rotation = function(num,isAuto){
if(isAuto === 1){
timer = setInterval(function(){
num+=1;
num = num>2? 0 : num;
num = num===-1? 2 :num;
nowNum = num;
handleClick(num,isAuto);
},1000);
};
};
var nextClick = function(val){
if(val === '0') nowNum -= 1;
if(val === '1') nowNum += 1;
nowNum = nowNum>2? 0 : nowNum;
nowNum = nowNum===-1? 2 :nowNum;
handleClick(nowNum,0);
};
setSrc(0);
rotation(0,1);
</script>
效果图：
