以前為大家帶來過jquery的輪播圖,今天來寫一下純js版的 因為需要一個 運動框架 所以稍後為為大家分享出來
1、
首先還是看佈局方面
<div id="div1">
<ul>
<li><img src="img_con_cn_mp_banner1.jpg" alt=""/></li>
<li><img src="img_con_cn_mp_banner1.jpg" alt=""/></li>
<li><img src="img_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;}
#div1 ul{position: absolute;left: 0}
#div1 ul li{float: left;}
#div1 ul li img{position: relative;left: 0;max-width: 100%;height: 360px;}
#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}
ul依舊是不做固定寬高 也是為了以後方便, 很簡單都能看懂
然後就是下面的樣子了(圖是用的華為的)
首先老規矩 獲取元素
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="img_con_cn_mp_banner1.jpg" alt=""/></li>
<li><img src="img_con_cn_mp_banner1.jpg" alt=""/></li>
<li><img src="img_con_cn_mp_banner1.jpg" alt=""/></li>
</ul>
<div id="btn">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<script src="move.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];
}
}
最後是做完的圖
相關推薦
