问答详情
源自:7-1 自动播放

焦点图轮播 定时器 清除不了....求大牛指点

<!DOCTYPE html>

<html>

<head>

<title>JS轮播</title>

<meta charset="utf-8" />

<style type="text/css">

#bBox {

width: 600px;

height: 400px;

margin: 100px auto;

border: 2px solid #999;

overflow: hidden;

position: relative;

}

#picBox {

width: 4200px;

height: 400px;

position: absolute;

}

#picBox img {

float: left;

}

#btnBox>a {

position: absolute;

top: 40%;

z-index: 2;

width: 40px;

height: 30px;

border-radius: 5px;

background: rgba(0,0,0,0.2);

line-height: 30px;

text-align: center;

font-weight: bold;

cursor: pointer;

}

#prev {

left: 10px;

}

#next {

right: 10px;

}

#btN {

position: absolute;

bottom: 10px;

left: 200px;

margin: 0

}

#btN li {

width: 10px;

height: 10px;

margin-left: 10px;

background: #ddd;

float: left;

list-style: none;

cursor: pointer;

}

#btN .Bon {

background: black;

}

</style>

<script type="text/javascript">

window.onload = function(){

function $(idd){

return document.getElementById(idd)

}

var liss = $("btN").getElementsByTagName('li'),

oIndex = 0,

timer,

isM = false,

speed;

var A;

for(var i=0;i<liss.length;i++){

liss[i].index = i;

liss[i].onclick = function(){

if (!isM) {

isM = true

var dis = this.index - oIndex

speed = (this.index - oIndex)*-20

oIndex = this.index;

var Dis = -600*dis

move(speed,Dis)

}

}

$("next").onclick = function(){

if (!isM) {

isM=true;

oIndex++;

speed = -20;

var Dis = -600;

var L = -3600;

var R = -600

if(oIndex==5){oIndex=0}

move(speed,Dis,L,R)

}

}

auto();

function auto(){

A = setInterval(function(){ //定时器在这,,,取消定时器 没作用。。。怎么回事(没有上传图,可以看下面的五个按钮)

$("next").click()

},1300);

$("bBox").onmouseover = function(){

clearInterval(A);

}

}


$("prev").onclick = function(){

if (!isM) {

isM=true;

oIndex--;

speed = 20;

var Dis = 600;

var L = 0;

var R = -3000;

if(oIndex==-1){oIndex=4}

move(speed,Dis,L,R)

}

}

}

function move(ospeed,oDis,oL,oR){

var lastDis = parseInt($("picBox").style.left)

timer = setInterval(function(){

$("picBox").style.left = parseInt($("picBox").style.left) + ospeed +'px';

if (parseInt($("picBox").style.left)-lastDis == oDis ) {

clearInterval(timer)

isM = false;

if (oL !== "") {

if (parseInt($("picBox").style.left) == oL ) {

$("picBox").style.left = oR + 'px'

};

}

lastDis = parseInt($("picBox").style.left)

showBtn();

};

},10)

}

function showBtn(){

for(var j=0;j<liss.length;j++){

liss[j].className = "";

}

liss[oIndex].className = "Bon"

}

}

</script>

</head>

<body>

    <div id="bBox">

      <div id="btnBox"> <a id="prev">&lt;</a> <a id="next">&gt;</a> </div>

      <div id="picBox" style="left:-600px"> <img src="image/5.jpg" /> <img src="image/1.jpg" /> <img src="image/2.jpg" /> <img src="image/3.jpg" /> <img src="image/4.jpg" /> <img src="image/5.jpg" /> <img src="image/1.jpg" /> </div>

      <ul id="btN">

        <li class="Bon"></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

      </ul>

    </div>

</body>

</html>


提问者:qq_e累_0 2016-01-22 12:51

个回答

  • 宇xixi
    2016-02-24 17:13:17
    已采纳

    	$("bBox").onmouseover = function(){
    		clearInterval(A);
    	}

    这边把onmouseover改成mouseover就可以了!

    jQuery语法,on要去除.

  • qq_e累_0
    2016-02-24 17:54:40

    原因找到了 ,,“ var A = setInterval()” 的问题 把A改成其他的就可以了