问答详情
源自:5-1 按钮切换

​在点击小圆点时,像素在变化 ,可图片不动怎么办

在点击小圆点时,像素在变化 ,可图片不动怎么办

提问者:氢氧化桐 2016-04-23 16:49

个回答

  • Sunnylincon
    2016-06-09 21:37:29

    img.style.left=parseInt(img.style.left)+offset+'px';

    if(parseInt(img.style.left)+offset > -255){

    img.style.left=-765+'px';

    }

    if(parseInt(img.style.left)+offset < -765){

    img.style.left=-255+'px';

    }

    1、在前面已经将parseInt(img.style.left)+offset+'px';赋值给了img.style.left,判断的时候却又加了一个offset,

    本来点击小圆点时是不会触发if语句的,但你的判断语句把left改为初始的left就是if(parseInt(img.style.left)+offset+offset> -255)的效果,结果点击小圆点也可能触发if语句,自然会有错误

    2、

    <div class="img" id="img" style="left: -255px;" >

    <img src="img/成绩.jpg" />

    <img src="img/图书馆.jpg" />

    <img src="img/课表.jpg" />

    </div>

    <div class="navi" id="navi">

    <span index="1" class="on"><img src="img/icon_dean_score.png" /></span>

    <span index="2"><img src="img/icon_dean_exam.png"/></span>

    <span index="3"><img src="img/icon_ecard.png"/></span>

    <span index="4"><img src="img/icon_chat.png" /></span>

    </div>

    你取得img是上一组图片的id,而数组navi取得确是下一组的,这样来算left怎么也不可能算对吧

    还有如果你用的是下一组的话,是四张图片,if(parseInt(img.style.left)+offset < -765)中765应改为1020

    3、

    <div class="img" id="img" style="left: -255px;" >

    <img src="img/成绩.jpg" />

    设置了left:-255,却没有在第1张图片之前在加一张图片,这样你一进去是看不到第一张图片的,改成以下即可

    <div class="img" id="img" style="left: -255px;" >

    <img src="img/课表.jpg" />

    <img src="img/成绩.jpg" />

    <img src="img/图书馆.jpg" />

    <img src="img/课表.jpg" />

    </div>


  • 氢氧化桐
    2016-04-24 12:33:41

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="css/try.css" />

    </head>

    <body>

    <div id="show">

    <div class="phone"><img src="img/phone.jpg" />

    <div id="continer">

    <div class="img" id="img" style="left: -255px;" >

    <img src="img/成绩.jpg" />

    <img src="img/图书馆.jpg" />

    <img src="img/课表.jpg" />

    </div>

    </div>

    </div>

    <div class="navi" id="navi">

    <span index="1" class="on"><img src="img/icon_dean_score.png" /></span>

    <span index="2"><img src="img/icon_dean_exam.png"/></span>

    <span index="3"><img src="img/icon_ecard.png"/></span>

    <span index="4"><img src="img/icon_chat.png" /></span>

    </div>

    </div>

    </body>

    <script type="text/javascript">

    window.onload=function(){

    var continer=document.getElementById('continer');

    var img=document.getElementById('img');

    var navi=document.getElementById('navi').getElementsByTagName('span');

    var index=1;

     

    function showButton() {

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

                        if( navi[i].className == 'on'){

                            navi[i].className = '';

                            break;

                        }

                    }

                    navi[index - 1].className = 'on';

                }

    function animate(offset){

    img.style.left=parseInt(img.style.left)+offset+'px';

    if(parseInt(img.style.left)+offset > -255){

    img.style.left=-765+'px';

    }

    if(parseInt(img.style.left)+offset < -765){

    img.style.left=-255+'px';

    }

    }

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

    navi[i].onclick=function(){

    var myIndex=parseInt(this.getAttribute('index'));

    var offset=-255*(myIndex-index);

    index=myIndex;

    animate(offset);

    showButton();

    }

    }

    }

    </script>

    </html>


  • 慕后端1993647
    2016-04-23 19:04:54

    把你的代码贴上来啊