a907302299 2017-03-11 13:53 采纳率: 0%
浏览 867

求高手解答JS图片切换问题

 /*我这个点击图片下面的小圆点和点击向右的箭头切换图片顺序不一致乱跳，求高手解答下，本人是初学者，谢谢了！举例说明下，就是我进去点击第3个小圆点跳到第3张图片，然后再点击向右的箭头来切换图片，图片并没有从第3张跳到第4张，而是还是按1234的顺序在走。。。*/
<!DOCTYPE html>
<html>   
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body {
                background: url(img/5.jpg) 0 0;
            }
            #wrapper {
                width: 500px;
                height: 350px;
                background: gray;
                margin: 50px auto;
                position: relative;
            }
            #img {
                width: 500px;
                height: 350px;
            }
            ul {
                margin: 0;
                padding: 0;
                position: absolute;
                bottom: -40px;
                left: 220px;
            }
            a {
                background: tomato;
                display: block;
                width: 30px;
                height: 30px;
                border-radius: 15px;
                text-align: center;
                line-height: 30px;
                font-size: 25px;
                font-weight: 900;
                color: white;
                position: absolute;
                top: 155px;
            }
            #a1 {
                left: 10px;
            }
            #a2 {
                right: 10px;
            }
            li {
                width: 16px;
                list-style: none;
                height: 16px;
                background: dimgray;
                border-radius: 8px;
                float: left;
                margin-right: 8px;
            }
            li:hover {
                background: tomato;
            }
            .img-wrapper {
                width: 100px;
                height: 60px;
                padding: 3px;
                background: white;
                position: relative;
                top: -70px;
                left: -50px;
                display: none;
            }
            .imgs {
                width: 100px;
                height: 60px;
            }
            .active {
                background: tomato;
            }



        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oDiv=document.getElementById("wrapper");
                var aLi=document.getElementsByTagName('li');
                var imgArr=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
                var oImg=document.getElementById("img");
                var oA1=document.getElementById("a1");
                var oA2=document.getElementById("a2");
                var n=0;
//              初始化
                oImg.src=imgArr[n];
                aLi[n].className='active';
                for(var i=0;i<aLi.length;i++){
                    aLi[i].index=i;
//                  鼠标移入小圆点:
                    aLi[i].onmouseover=function(){
//                      this.style.background='tomato';
                        this.getElementsByTagName('img')[0].src=imgArr[this.index];
                        this.getElementsByTagName('div')[0].style.display='block';
                    }
//                  鼠标移出小圆点:
                    aLi[i].onmouseout=function (){
//                      this.style.background='dimgray';
                        this.getElementsByTagName('div')[0].style.display='none';
                    }
//                  鼠标点击小圆点切换图片:
                    aLi[i].onclick=function(){
                        oImg.src=imgArr[this.index];
                        for(var i=0;i<aLi.length;i++){
                            aLi[i].className='';
                        }
                        this.className='active';
                    }
                }
//              下一张按钮点击:
                oA2.onclick=function(){
                    n++;
                    if(n>imgArr.length-1){
                        n=0;
                    }
                    oImg.src=imgArr[n];
                    for(var i=0;i<aLi.length;i++){
                        aLi[i].className='';
                    }
                    aLi[n].className='active';
                }
//              上一张按钮点击
                oA1.onclick=function(){
                    n--;
                    if(n<0){
                        n=imgArr.length-1;
                   };
                    oImg.src=imgArr[n];
                    for(var i=0;i<aLi.length;i++){
                        aLi[i].className='';
                    }
                    aLi[n].className='active';
                }
            }
        </script>
    </head>
    <body>
        <div id="wrapper">
            <img class="active" id="img"/>
            <a id="a1"><</a>
            <a id="a2">></a>
            <ul>
                <li>
                    <div class="img-wrapper">
                        <img  class="imgs"/>
                    </div>
                </li>
                <li>
                    <div class="img-wrapper">
                        <img  class="imgs"/>
                    </div>
                </li>
                <li><div class="img-wrapper">
                        <img  class="imgs"/>
                    </div></li>
                <li><div class="img-wrapper">
                        <img  class="imgs"/>
                    </div></li>
            </ul>
        </div>
    </body>
</html>
  • 写回答

2条回答 默认 最新

  • 当作看不见 2017-03-11 14:52
    关注

    我的天，这代码这么看。。。。。。。。。。。
    有插入代码片功能，重新发一次吧

    评论

报告相同问题？

悬赏问题

  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 LiBeAs的带隙等于0.997eV,计算阴离子的N和P
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 来真人，不要ai！matlab有关常微分方程的问题求解决，
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab，jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算