JavaScript图片轮播时,点击下面小图时,如何做到与时间同步切换(把b变量改为点击图片的num)?求大神~

<script language="javascript" type="text/javascript">
var b=1
var myTime=setInterval("changeimg(b++) ", 3000 );
var timeout=setTimeout("setInterval()",3000);
function changeimg(num){
if(b==6) b=1;
document.getElementById("imgblock").src="images/"+num+".jpg";
//把本图片放上去
document.getElementById("littleimg"+num).style.position="relative";
document.getElementById("littleimg"+num).style.top="-15px";
document.getElementById("littleimg"+num).style.filter="Alpha(opacity=100)";
//把其他图片放下来
for(var i=1;i<=5;i++){
if(i==num) continue;
document.getElementById("littleimg"+i).style.position="relative";
document.getElementById("littleimg"+i).style.top="0px";
document.getElementById("littleimg"+i).style.filter="Alpha(opacity=50)";
}
}
</script>
</head>
<body onLoad="disptime()">
<div id="topimg"><img id="imgblock"src="images/1.jpg" width="685" height="255" /></div>
<div id="littleimg">
<img id="littleimg1" class="lttleimg" src="images/01.jpg" width="70" height="40" onclick="changeimg(1)" />
<img id="littleimg2" class="lttleimg" src="images/02.jpg" width="70" height="40" onclick="changeimg(2)" />
<img id="littleimg3" class="lttleimg" src="images/03.jpg" width="70" height="40" onclick="changeimg(3)" />
<img id="littleimg4" class="lttleimg" src="images/04.jpg" width="70" height="40" onclick="changeimg(4)" />
<img id="littleimg5" class="lttleimg" src="images/05.jpg" width="70" height="40" onclick="changeimg(5)" />
</div>

看这代码和你的意思,3秒切换一张图片,循环切换,当点击小图片时,是想立刻显示当前点击的图片。实现思路:对下面的小图片添加点击事件,在循环执行切换时要判断。伪代码如下:

function update(index){
    //在这块写changeimg方法的代码,作用只是显示index这张图片
}
//定义变量
var current = 1;//当前显示的图片
var isRun = true; //是否进行切换图片,此变量是为点击小图片显示而准备
//循环执行,切换图片
function showImage(){
    setTimeout(showImage, 3000);
    if(isRun){
        update(index++);
    }
}
//小图片添加点击事件,逐个添加事件
img.addEventListener("click", doClick(i), false);
img.addEventListener("mouseout", continueLoop, false);
//以上为示例,其他自行添加,i为小图片的顺序号,也就是需要显示图片的名称
//
function doClick(i){
    isRun = false;
    index = i;
    update(index);
}
//
function continueLoop(){
    isRun = true;
}

//最后,初始化完毕,调用循环方法
showImage();

大意就这样,当鼠标离开,继续循环,点击停止循环,注意事件添加。以上代码不保证完全正确,一般不用纯js开发,所以不是很熟,见谅!

追问

var current = 1;?

温馨提示:内容为网友见解,仅供参考
无其他回答
相似回答