js轮播教程（纯js版轮播图简单易学）
js轮播教程（纯js版轮播图简单易学）</ul> <li><img src="https://img.aigexing.comimg_con_cn_mp_banner1.jpg" alt=""/></li> <ul> <li><img src="https://img.aigexing.comimg_con_cn_mp_banner1.jpg" alt=""/></li> <li><img src="https://img.aigexing.comimg_con_cn_mp_banner1.jpg" alt=""/></li>
以前为大家带来过jquery的轮播图 今天来写一下纯js版的 因为需要一个 运动框架 所以稍后为为大家分享出来
1、
首先还是看布局方面
<div id="div1">
<ul>
<li><img src="https://img.aigexing.comimg_con_cn_mp_banner1.jpg" alt=""/></li>
<li><img src="https://img.aigexing.comimg_con_cn_mp_banner1.jpg" alt=""/></li>
<li><img src="https://img.aigexing.comimg_con_cn_mp_banner1.jpg" alt=""/></li>
</ul>
<div id="btn">
<a href="#" class="active"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
不用说了 老规矩一个样
2、
样式方面
*{margin: 0;padding: 0}
li{list-style: none}
#div1{min-width: 1000px;height: 396px;position: relative;overflow: hidden;}
首先老规矩 获取元素
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var aImg=oUl.getElementsByTagName('img');
var oBtn=document.getElementById('btn');
var a=oBtn.getElementsByTagName('a');
var imgWidth=1920//给个变量 储存img的大小
var inNo=0;//
var timer;//定时器
oUl.style.width=aImg.length*imgWidth 'px';//动态的获取下ul的长度
for(var i=0;i<a.length;i ){
a[i].index=i;//给定索引
a[i].onclick= function () {
for(var i=0;i<a.length;i ){
a[i].className='';//先全部清除
}
a[this.index].className='active';//全部添加
startMove(oUl {left:-this.index * imgWidth});//需要的运动框架
}
就可以点击切换了
function toRun() {
var time = 2000;//运动时间
var timer=setInterval(function () {
if(inNo==aLi.length-1){//如果到了最后一张那么
inNo=0;//返回第一张
}else{
inNo ;否则一直
}
for(var i=0;i<a.length;i ){
a[i].className="";//清除全部
}
a[inNo].className="active";//添加全部
startMove(oUl {left:-inNo * imgWidth});
} time)
}
}
以下是全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0}
li{list-style: none}
#div1{min-width: 1000px;height: 396px;position: relative;overflow: hidden;}
#div1 ul{position: absolute;left: 0}
#div1 ul li{float: left;}
#div1 ul li img{position: relative;left: 0;max-width: 100%;height: 360px;width: 1920px;}
#btn{position: absolute;width: 100%;text-align: center;bottom: 0;}
#btn a{cursor: pointer;display: inline-block;width: 11px;height: 11px;background: #666}
#btn a.active{background: white}
#btn a:hover{background:white}
</style>
</head>
<body>
<div id="div1">
<ul>
<li><img src="https://img.aigexing.comimg_con_cn_mp_banner1.jpg" alt=""/></li>
<li><img src="https://img.aigexing.comimg_con_cn_mp_banner1.jpg" alt=""/></li>
<li><img src="https://img.aigexing.comimg_con_cn_mp_banner1.jpg" alt=""/></li>
</ul>
<div id="btn">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<script src="https://img.aigexing.commove.js"></script>
<script>
window.onload= function () {
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var aImg=oUl.getElementsByTagName('img');
var oBtn=document.getElementById('btn');
var a=oBtn.getElementsByTagName('a');
var imgWidth=1920;
var inNo=0;
var timer;
oUl.style.width=aImg.length*imgWidth 'px';
for(var i=0;i<a.length;i ){
a[i].index=i;
a[i].onclick= function () {
for(var i=0;i<a.length;i ){
a[i].className='';
}
a[this.index].className='active';
startMove(oUl {left:-this.index * imgWidth});
}
}
toRun();
function toRun() {
var time = 2000;
var timer=setInterval(function () {
if(inNo==aLi.length-1){
inNo=0
}else{
inNo
}
for(var i=0;i<a.length;i ){
a[i].className="";
}
a[inNo].className="active";
startMove(oUl {left:-inNo * imgWidth});
} time)
}
}
</script>
</body>
</html>
Move.js的代码
function startMove(obj json endFn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var bBtn = true;
for(var attr in json){
var iCur = 0;
if(attr == 'opacity'){
if(Math.round(parseFloat(getStyle(obj attr))*100)==0){
iCur = Math.round(parseFloat(getStyle(obj attr))*100);
}
else{
iCur = Math.round(parseFloat(getStyle(obj attr))*100) || 100;
}
}
else{
iCur = parseInt(getStyle(obj attr)) || 0;
}
var iSpeed = (json[attr] - iCur)/8;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur!=json[attr]){
bBtn = false;
}
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity=' (iCur iSpeed) ')';
obj.style.opacity = (iCur iSpeed)/100;
}
else{
obj.style[attr] = iCur iSpeed 'px';
}
}
if(bBtn){
clearInterval(obj.timer);
if(endFn){
endFn.call(obj);
}
}
} 30);
}
function getStyle(obj attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj false)[attr];
}
}
最后是做完的图
