关于源生JS实现图片轮播问题 100

点击列表，是可以切换图片，但是自动轮播不会按照已切换的下一张进行，二者无法同步，源码是我自己写的，我纠结是不是mouseover事件中的this.index无法传递出来。... 点击列表，是可以切换图片，但是自动轮播不会按照已切换的下一张进行，二者无法同步，源码是我自己写的，我纠结是不是mouseover事件中的this.index无法传递出来。这一系列功能用jQ闭着眼也搞定了，但是源生的找不到解决方法，求大神解答。附源码，图片src可以随便找。
<!doctype html>
<html>
<head>
</head>
<body>
<script>
window.onload=function(){
changeImages();
function changeImages(){ //将自动轮播，点击切换，列表同步切换封装在函数changeImages中，直接调用执行；
var oList=document.getElementById("list");
var oDiv=document.getElementById("div2");
var oInput=document.getElementById("next");
var oInput2=document.getElementById("upper");
var oLi=oDiv.getElementsByTagName("li");
var oLi1=oList.getElementsByTagName("li");
i=0;//记录点击次数
speed=3000;
var change=setInterval(function (){
clearInterval();
for(var a=0;a<oLi.length;a++){
oLi[a].className=" ";
oLi1[a].className=" ";
}
(i<oLi.length-1)?(i++):(i=0);
oLi[i].className="show";
oLi1[i].className="show1";
},speed)
oInput.onclick=function(){ //下一张
for(var a=0;a<oLi.length;a++){
oLi[a].className=" ";
oLi1[a].className=" ";
}
(i<oLi.length-1)?(i++):(i=0);
oLi[i].className="show";
oLi1[i].className="show1";
};
oInput2.onclick=function(){
for(var a=0;a<oLi.length;a++){
oLi[a].className=" ";
oLi1[a].className=" ";
}
i>0?(i--):(i=oLi.length-1) oLi.length-1,即最后一张图片.上一张
oLi[i].className="show";
oLi1[i].className="show1";
};
for (var a=0;a<oLi1.length;a++){ //实现鼠标移动到列表，自动切换到对应图片功能，其原理与选项卡原理基本一致；
oLi1[a].index=a; //这里变量名必须统一，如果将后面a改为i，那么i=0将会执行两次，导致第一次点击下一张失效
oLi1[a].onmouseover=function (){
for(var i=0;i<oLi1.length;i++){
oLi[i].className=" ";
oLi1[i].className=" ";
};
oLi[this.index].className="show";
this.className="show1";
};
}}
};
</script>
<div id="div1">
<input id="upper" type="button" value="上一张"></input>
<input id="next" type="button" value="下一张"></input>

<div id="div2">
<ul>
<li class="show"><img src="d:acg/wamp/1.1.jpg" width="100%" height="100%"></li>
<li><img src="d:acg/wamp/1.2.jpg" width="100%" height="100%"></li>
<li><img src="d:acg/wamp/1.3.jpg" width="100%" height="100%"></li>
<li><img src="d:acg/wamp/1.4.jpg" width="100%" height="100%"></li>
</ul>
</div>
<ul id="list">
<li class="show1">111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
</ul>
</div>
<style>
#div1 {background:#ccc;margin:0 auto;}
#div2 {background:red;width:500px;height:400px;margin:0 auto;}
#div2 ul li{display:none;;width:100%;height:100%}
#div2 ul{width:100%;height:100%;}
#div1 .show1{background:yellow;}
#div2 .show{display:block;}
body,ul{margin:0 ;padding:0;}
</style>
</body>
</html>
代码里面的注释没删好，代码是没问题的，我的问题的在此基础上，如何实现新的功能，这个功能是：当我点击第N个Li的时候，图片切换到第N张，而自动播放的定时器也从N开始，而不是从0开始 展开
 我来答
1个回答
#热议# 上班途中天气原因受伤算工伤吗？
百度网友6a957b7
2017-04-10 · TA获得超过1124个赞
知道小有建树答主
回答量：513
采纳率：0%
帮助的人：350万
我也去答题访问个人页
展开全部

改好了， chrome下没问题。 你出错在这一行： i>0?(i--):(i=oLi.length-1) oLi.length-1,即最后一张图片.上一张

<!doctype html>
<html>
<head>
</head>
<body>
<script>
    window.onload=function(){
        changeImages();
        function changeImages(){ //将自动轮播，点击切换，列表同步切换封装在函数changeImages中，直接调用执行；
            var oList=document.getElementById("list");
            var oDiv=document.getElementById("div2");
            var oInput=document.getElementById("next");
            var oInput2=document.getElementById("upper");
            乱纳var oLi=oDiv.getElementsByTagName("li");
            var oLi1=oList.getElementsByTagName("li");
            var i=0;//记录点击次数
            var speed=3000;
            var change=setInterval(function (){
                clearInterval();
                for(var a=0;a<oLi.length;a++){
                    oLi[a].className=" ";
                    oLi1[a].className=" ";
                }
                (i<oLi.length-1)?(i++):(i=0);
                oLi[i].className="show";
                oLi1[i].className="show1";
            },speed)
            oInput.onclick=function(){ //下一张
                for(var a=0;a<oLi.length;a++){
                    oLi[a].className=" ";
 哗竖没                   oLi1[a].className=" ";
                }
                (i<oLi.length-1)?(i++):(i=0);
                oLi[i].className="show";
                oLi1[i].className="show1";
            };
            oInput2.onclick=function(){
                for(var a=0;a<oLi.length;a++){
                    oLi[a].className=" ";
                    oLi1[a].className=" ";
                }
   纤伍             i>0?(i--):(i=oLi.length-1); oLi.length-1;
                oLi[i].className="show";
                oLi1[i].className="show1";
            };
            for (var a=0;a<oLi1.length;a++){ //实现鼠标移动到列表，自动切换到对应图片功能，其原理与选项卡原理基本一致；
                oLi1[a].index=a;   //这里变量名必须统一，如果将后面a改为i，那么i=0将会执行两次，导致第一次点击下一张失效
                oLi1[a].onmouseover=function (){
                    for(var i=0;i<oLi1.length;i++){
                        oLi[i].className=" ";
                        oLi1[i].className=" ";
                    };
                    oLi[this.index].className="show";
                    this.className="show1";
                };
            }}
    };
</script>
<div id="div1">
    <input id="upper" type="button" value="上一张"></input>
    <input id="next" type="button" value="下一张"></input>

    <div id="div2">
        <ul>
            <li class="show"><img src="http://www.jq22.com/demo/unslider-150203225543/03.jpg" width="100%" height="100%"></li>
            <li><img src="http://www.jq22.com/demo/unslider-150203225543/01.jpg" width="100%" height="100%"></li>
            <li><img src="http://www.jq22.com/demo/unslider-150203225543/02.jpg" width="100%" height="100%"></li>
            <li><img src="http://www.jq22.com/demo/unslider-150203225543/04.jpg" width="100%" height="100%"></li>
        </ul>
    </div>
    <ul id="list">
        <li class="show1">111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
</div>
<style>
    #div1 {background:#ccc;margin:0 auto;}
    #div2 {background:red;width:500px;height:400px;margin:0 auto;}
    #div2 ul li{display:none;;width:100%;height:100%}
    #div2 ul{width:100%;height:100%;}
    #div1 .show1{background:yellow;}
    #div2 .show{display:block;}
    body,ul{margin:0 ;padding:0;}
</style>
</body>
</html>
追问
这个是复制时候没注意把注释//删掉了，问题不是这个。你运行下看看，如果我鼠标over到Li上面，图片也自动切换到对应的，但是自动轮播依然按照1234的顺序，我希望的是，比如，我over到第三个li上，此时定时器就以第3张图片为出发点，下面是第4，再循环。如果不over任何li，定时器就是正常的1234循环
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式