简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 关于JS图片轮播的问题
伊谢尔伦
伊谢尔伦 2017-04-11 12:39:46
0
1
325
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{margin:0;padding:0;border:0;}
        p{
            width:1200px;
            height:510px;
            overflow: hidden;
            position: relative;        
        }
        ul{
            width:3600px;
            list-style: none;
        }
        li{
            float:left;
        }
        a{
            display:block;width:30px;height:50px;background:#FCEBB6;color:#5E412F;font-size:30px;font-weight:bold;line-height:50px;text-decoration: none;
        }
        #prev{
            position: absolute;
            left:0;
            top:50%;
        }
        #next{
            position: absolute;
            right:0;
            top:50%;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function(){
          var prev = document.getElementById('prev');
           var next = document.getElementById('next');
           var aImg = document.getElementsByTagName('img');
           var oUl = document.getElementsByTagName('ul')[0];
           var aLi = oUl.getElementsByTagName('li');
           var num = 0;
           var index =0;

           next.onclick = function(){
               num = num - 1200; //一张图片1200宽
               index++;
               if(index >= aImg.length){
                  index = 0;
                   num = 0;
                   oUl.style.marginLeft = num;
               }else{
               oUl.style.marginLeft = num +'px';
           }
               }
           
            prev.onclick = function(){
                
                if(index == 0){
                //在这里应该怎么写
           }
}
    </script>
</head>
<body>
    <p>
    <ul>
    <li><img src="1.png" alt=""></li>
    <li><img src="2.png" alt=""></li>
    <li><img src="3.png" alt=""></li>
    </ul>
        <a id="prev" href="javascript:;"><</a>
        <a id="next" href="javascript:;">></a>
    </p>
</body>
</html>

把next的功能实现了，但是prev的功能没想出来，怎么当第一张图片的时候点击prev返回图片最后一张？应该怎么判断？

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

membalas semua(1)
大家讲道理
大家讲道理2017-04-11 12:41:46 Tingkat 1

http://www.cnblogs.com/laobei... 这是我之前写的一个图片轮播，给你提供一个思路

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！