學完定時器就想來做一做，然而這個并不是我想象得這么簡單，我以為在自動播放的基礎上添加一個if條件即可，然而我基礎不好，對于left和寬度的判斷都不是很準確，寫法也不規范，if判斷老是失敗，而且offseLeft的判斷好像是實時的，這樣我的想法更加實作不了了，于是找了個視頻跟著做的，視頻里還包括有點擊圓點影片運動和圖片自動輪播的功能，我就一并學習并寫上了，下面含有代碼注釋（以防自己在忘掉，，，）
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="lunbo.css"/>
<script src="animate.js"></script>
<script src="lunbo.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="div1">
<a id="arrow1" class="arrow1" href="javascript:;"></a>
<a id="arrow2" class="arrow2" href="javascript:;"></a>
<ul id="ul">
<li><a href="javascript:;"><img src="images/meilin1.jpg" height="400px" width="400px" ></a></li>
<li><a href="javascript:;"><img src="images/meilin2.jpg" height="400px" width="400px" ></a></li>
<li><a href="javascript:;"><img src="images/fate_aoerliang.jpg" height="400px" width="400px" ></a></li>
<li><a href="javascript:;"><img src="images/zhende.jpg" height="400px" width="400px" ></a></li>
</ul>
<ol id="ol" class="circle">
<!-- li></li>
<li class="current"></li>
<li></li>
<li></li> -->
</ol>
</div>
</body>
</html>
css代碼
*{
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#div1 {
width: 400px;
height: 400px;
position: relative;
margin: 150px 600px;
overflow: hidden;
}
#div1 ul {
width: 600%;
position: absolute;
left: 0;
top: 0;
}
#div1 ul li {
float: left;
width: 400px;
height: 400px;
}
#div1 ol {
position: absolute;
top: 375px;
left: 10px;
float: left;
}
ol li {
float: left;
background-color: white;
margin: 0 6px;
width: 8px;
height: 8px;
border-radius: 10px;
cursor: pointer;
}
.current {
background-color: #FF0000;
}
.arrow1,.arrow2 {
display: none;
z-index: 100;
position: absolute;
width: 50px;
height: 50px;
}
.arrow1 {
top: 200px;
left: 0px;
background:url(images/jiantou_zuo.png) no-repeat;
}
.arrow2 {
top: 200px;
left: 350px;
background:url(images/jiantou_you.png) no-repeat;
}js函式animate代碼+js輪播實作代碼
function animate (obj,target,callback){
clearInterval(obj.timer);//避免開啟太多的定時器使得影片效果例外
obj.timer=setInterval(function(){
var step=(target-obj.offsetLeft)/10;//緩動影片，運動快要結束的時候緩慢結束
step=step>0?Math.ceil(step):Math.floor(step);//這樣寫向左移動還是向右移動就都適用了
if(obj.offsetLeft==target){
clearInterval(obj.timer);
callback&&callback();//回呼函式，運動函式實行完后，運行這個回呼函式
}
obj.style.left=obj.offsetLeft+step+'px';
},15);
}window.addEventListener('load',function(){
var arrow1=document.getElementById('arrow1');
var arrow2=document.getElementById('arrow2');
var oDiv=document.getElementById('div1');
var num=0;
var circle=0;
//觸摸顯示箭頭，滑鼠離開箭頭消失
oDiv.onmouseover=function(){
arrow1.style.display='block';
arrow2.style.display='block';
clearInterval(timer);//滑鼠移入，圖片自動輪播結束
timer=null;
}
oDiv.onmouseout=function(){
arrow1.style.display='none';
arrow2.style.display='none';
timer=setInterval(function(){
arrow2.click();
},2500)//滑鼠離開，圖片自動輪播再開始
}
var ol=document.getElementById('ol');
var ul=document.getElementById('ul');
var oDivwidth=oDiv.offsetWidth;
//添加原點并實作排他思想
for(var i=0;i<ul.children.length;i++){
var li=document.createElement('li');
//給圓圈編號
li.setAttribute('index',i);
ol.appendChild(li);
li.onclick=function(){
for(var i=0;i<ol.children.length;i++){
ol.children[i].className='';
}
this.className='current';
//點擊圓圈，圖片實作移動
var index=this.getAttribute('index');
num=circle=index;
animate(ul,-index*oDivwidth);
}
}
ol.children[0].className='current';
//克隆第一張圖片
var fisrt=ul.children[0].cloneNode(true);
ul.appendChild(fisrt);
//實作左右箭頭控制圖片運動
function circlechange(){
for(var i=0;i<ol.children.length;i++){
ol.children[i].className='';
}
ol.children[circle].className='current';
}
var flag=true;//節流閥
arrow1.onclick=function(){
if(flag){
flag=false;
if(num==0){
num=ul.children.length-1;
ul.style.left=-num*oDivwidth+'px';
}
num--;
animate(ul,-num*oDivwidth,function(){
flag=true;
});
//實作圓點跟蹤圖片
circle--;
if(circle<0){
circle=ol.children.length-1;
}
circlechange();
}
}
arrow2.onclick=function(){
if(flag){
flag=false;
if(num==4){
ul.style.left=0;
num=0;
}
num++;
animate(ul,-num*oDivwidth,function(){
flag=true;
});
//實作圓點跟蹤圖片
circle++;
if(circle==ol.children.length){
circle=0;
}
circlechange();
}
}
//自動輪播功能
var timer=setInterval(function(){
arrow2.click();
},2500)
})效果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305991.html
標籤：其他
上一篇：什么是模塊化
下一篇：模塊化的理解