為什么我的鼠標(biāo)移上去還是會(huì)自動(dòng)切換，感覺沒有問題啊
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生js幻燈片</title>
<style type="text/css">
? ?*{
? padding:0;
? margin:0;
}
? ?a{
? text-decoration:none;
}
? ?#banner{
? width:700px;
? height:250px;
? background:#FFC;
? margin:80px auto;
? overflow:hidden;
border:2px solid #000;
? position:relative;
}
#list{
width:4900px;
height:250px;
z-index:1;
position:absolute;
}
.box{
width:700px;
height:250px;
float:left;
font-weight:bold;
font-size:36px;
color:#fff;
text-align:center;
line-height:250px;
}
#buttons{
bottom:20px;
z-index:2;
left:300px;
width:100px;
height:10px;
position:absolute;
}
#buttons span{
width:10px;
height:10px;
background:rgba(0,0,0,0.5);
margin-right:6px;
border-radius:50%;
float:left;
border:1px solid #fff;
}
#buttons .on{
background:#fff;
}
.arrow{
background:rgba(0,0,0,0.4);
width:20px;
height:60px;
z-index:2;
color:#fff;
line-height:60px;
text-align:center;
font-weight:bold;
top:80px;
position:absolute;
}
#prev{
left:30px;
}
#next{
left:650px;
}
</style>
</head>
<body>
<div id="banner">
? ? <div id="list" style="left:-700px;">
? ? ? ? ?<div class="box" style="background:#F93;">box5</div>
? ? ? ? ?<div class="box" style="background:#F00;">box1</div>
? ? ? ? ?<div class="box" style="background:#999;">box2</div>
? ? ? ? ?<div class="box" style="background:#966;">box3</div>
? ? ? ? ?<div class="box" style="background:#9CC;">box4</div>
? ? ? ? ?<div class="box" style="background:#F93;">box5</div>
? ? ? ? ?<div class="box" style="background:#F00;">box1</div>
? ? </div>
? ? <div id="buttons">
? ? ? ? ?<span index="1" class="on"></span>
? ? ? ? ?<!-- index屬性是自定義屬性，不能通過this.index獲取到，可以用this.setAttribute("index")來獲取:this.setAttribute("index")自定義添加一個(gè)index屬性 -->
? ? ? ? ?<span index="2"></span>
? ? ? ? ?<span index="3"></span>
? ? ? ? ?<span index="4"></span>
? ? ? ? ?<span index="5"></span>
? ? </div>
? ? <a href="javascript:;" id="prev" class="arrow"><</a>
? ? <a href="javascript:;" id="next" class="arrow">></a>
</div>
<script>
window.onload = function(){
? ? var banner = document.getElementById("banner");
? ? var list = document.getElementById("list");
var buttons = document.getElementById("buttons").getElementsByTagName("span");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var index = 1;//當(dāng)前圖片所在的小圓點(diǎn)的位置;
var animated = false;//定義動(dòng)畫的開關(guān)按鈕
var timea;//設(shè)置定時(shí)器
function showbutton()//綁定小圓點(diǎn)
{
for(var i =0; i<buttons.length; i++)//遍歷span，如果span的className為“on”，就取消classname；
{
if(animated ==true)
{
? ? ? ? return;
}
if(buttons[i].className == "on")
{
buttons[i].className = "";
break;
}
}
buttons[index-1].className = "on";//[index-1]:buttons數(shù)組是從0開始的
}
function bindbtn(offset)//綁定箭頭點(diǎn)擊事件
{
var timer = 300;//位移總時(shí)長(zhǎng);
var interval = 10;//位移的間隔時(shí)間;
var speed = offset/(timer/interval);//每次位移的距離
var newleft = parseInt(list.style.left)+offset;//newleft的值為=對(duì)list的left值取整加上點(diǎn)擊所產(chǎn)生的偏移量離;
animated = true;
var go = function()//設(shè)置切換輪播動(dòng)畫效果
{
if(speed > 0 && parseInt(list.style.left) < newleft || speed < 0 && parseInt(list.style.left) > newleft)//判斷是否位移,位移的條件
{
list.style.left = parseInt(list.style.left) + speed + "px";
setTimeout(go,interval);
}
else
{
animated = false;
? ? ? ?list.style.left = newleft+"px";
if(newleft < -3500)//設(shè)置無限滾動(dòng)
{
list.style.left = -700 + "px";
}
if(newleft > -700)
{
list.style.left = -3500 + "px";
}
//debugger;//設(shè)置斷點(diǎn)，js調(diào)式常用
}
}
go();
}
function play()//自動(dòng)播放
{
?var timea = setInterval(function(){next.onclick();},3000);
}
function stop()
{
?clearInterval(timea);
}
next.onclick = function()//右鍵點(diǎn)擊事件
{
if(animated ==true)//判斷圖片還在滾動(dòng)時(shí)，不做任何處理（解決不斷點(diǎn)擊翻頁箭頭時(shí)發(fā)生小圓點(diǎn)與圖片不匹配的情況）
{
? ? ? ? return;
}
if(index == 5)//當(dāng)小圓點(diǎn)的位置跳到第5張時(shí)
{
? ?index = 1;//將小圓點(diǎn)的位置恢復(fù)到第一張的位置;
}else{
index += 1;//如果沒有到第5張，那么就自加1；
}
showbutton();
if(animated == false)
{
bindbtn(-700);
}
}
prev.onclick = function()//左鍵點(diǎn)擊事件
{
if(animated ==true)
{
? ? ? ? return;
}
if(index == 1)
{
index = 5;
}else{
? ?index -= 1;
}
showbutton();
? ?if(animated == false)
{
bindbtn(700);
}
}
for (var i = 0; i < buttons.length; i++)//圓點(diǎn)切換效果
{
buttons[i].onclick = function(){
if(this.className == "on")//優(yōu)化代碼：處于當(dāng)前位置時(shí)，再點(diǎn)擊當(dāng)前小圓下面就跳出函數(shù)，防止代碼重復(fù)調(diào)用占用內(nèi)存
{
return;
}
var myindex = parseInt(this.getAttribute("index"));//通過自定義屬性index獲得小圓點(diǎn)的當(dāng)前位置；
var offset = -700 * (myindex - index);//定義原點(diǎn)切換時(shí)產(chǎn)生的偏移量;
if(animated == false)
? {
bindbtn(offset);
? }
index = myindex;
? ?showbutton();
}
}
banner.onmouseover = stop();
banner.onmouseout = play();
play();
}
</script>
</body>
</html>
2017-03-02
按照以下修改一下