几张图片滚动切换 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>图片切换设置</title>  
<style>  
p { margin:0; }
body { text-align:center; }
#box { width:400px; height:400px; border:10px solid #ccc; margin:50px auto 0; position:relative; }
a { width:40px; height:40px; background:#fff; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:160px; font-size:18px; color:#000; text-align:center; line-height:40px; text-decoration:none; }
a:hover { filter:alpha(opacity:30); opacity:0.3; }
#prev { left:10px; }
#next { right:10px; }
#p1 { width:400px; height:30px; line-height:30px; text-align:center; background:#000; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8; position:absolute; bottom:0; left:0; }
strong { width:400px; height:30px; line-height:30px; text-align:center; background:#000; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:0; left:0; }
#img1 { width:400px; height:400px; }
span { position:absolute; width:400px; height:30px; line-height:30px; text-align:center; top:-50px; left:0; font-family:'微软雅黑'; }

</style>  
</head>   
<script type="text/javascript">  
  window.onload = function(){
    var oPrev = document.getElementById('prev')
    var oNext = document.getElementById('next')
    var oP1 = document.getElementById('p1') 
    var oStrong1 = document.getElementById('strong1')
    var oImg1 = document.getElementById('img1')  
    var aBtn = document.getElementsByTagName('input')
    var num = 0;
    var onOff = true;
    var arrUrl = ['img/1.png','img/2.png','img/3.png','img/4.png',]  
    var arrText = ['图片一','图片2','图片3','图片4',]

aBtn[0].onclick = function(){ onOff = true;
document.getElementsByTagName('span')[0].innerHTML = '图片可以从最后一张跳到第一张循环切换';};
aBtn[1].onclick = function(){ onOff = false;
 document.getElementsByTagName('span')[0].innerHTML = '图片只能到最后一张/或只能到第一张';};


// 初始化 
      function fnTnb(){
         oStrong1.innerHTML = num + 1 +'/'+ arrUrl.length;
         oP1.innerHTML = arrText[num];
         oImg1.src = arrUrl[num];
       }   
       fnTnb();
// 左箭头
        oPrev.onclick =function () {
            num --;
            if (num == -1) {if (onOff) {num = arrText.length -1;}
             else { alert('这是第一张了，不能往前了---')
            num = 0;
            }
        }
        fnTnb();
    };

        oNext.onclick =function () {
            num ++;
            if (num == arrText.length) {if (onOff) {num = 0;}
             else { alert('这是第一张了，不能往前了---')
            num = arrText.length - 1;
            }
        }
        fnTnb();
    };


  }
</script>  
<body>  
<input type="button" value="循环切换" />
<input type="button" value="顺序切换" />
<div id="box"><span>图片可从最后一张跳转到第一张循环切换</span>
    <a id="prev" href="javascript:;"><</a>
    <a id="next" href="javascript:;">></a>
      <p id="p1">图片文字加载中……</p>
      <strong id="strong1">图片数量计算中……</strong>
    <img id="img1" />
</div>
</body>  
</html>

 

posted @ 2017-11-02 15:30  小毛驴--  阅读(254)  评论(0)    收藏  举报