JavaScript图片动态轮播,切换图片

 直接复制下来,打开看看,记得在images文件夹方4张图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
 #div_adv{  width:720px; height:203px;}
#imgsdiv{ width:720px; height:203px;  border:1px solid #C00;z-index:1;}
.ulinput{ list-style:none; width:80px; height:25px; padding:0px; margin:0px;  
          position:absolute; top:190px; left:330px; z-index:2;}
.ulinput li{ float:left; margin-left:5px; }
.ulinput li input{ width:15px; height:15px; border:1px solid #666; color:#666; margin:0px; padding:0px;}
</style>

<script type="text/javascript">
 function $(divs){return document.getElementById(divs);}
 function lunbo(maji){
     var imgs = $("imgs");
     switch(maji){
         case "1":
          imgs.setAttribute("src","images/lunbo1.jpg");
         break;
         case "2":
          imgs.setAttribute("src","images/lunbo2.jpg");
         break;
         case "3":
          imgs.setAttribute("src","images/lunbo3.jpg");
         break;
         case "4":
          imgs.setAttribute("src","images/lunbo4.jpg");
         break;
         default:
          imgs.setAttribute("src","images/lunbo1.jpg");
          break;
         }
         init();
     }
    var setInte;
     function gos(){
         init();
         var imgs = $("imgs");
         for(var i=1; i<=4;i++){
             if(i==4){
                 imgs.setAttribute("src","images/lunbo1.jpg");
                 break;
                 }
             if(imgs.src.indexOf(i)>-1){
                 var srcurl="images/lunbo"+(i+1)+".jpg";
                imgs.setAttribute("src",srcurl);
                break;
             }
           }
         }
     
    function stopdiv(){
        clearInterval(setInte);
        }     
        
     function init(){
         clearInterval(setInte);
         setInte = setInterval("gos()","3000");
        }    
    window.οnlοad=init;    
</script>
</head>

<body>
<div id="div_adv">
 <div id="imgsdiv" οnmοusemοve="stopdiv()" οnmοuseοut="init()">

<img src="images/lunbo1.jpg" alt="广告" id="imgs" />

</div>
 <ul class="ulinput">
  <li><input type="button" value="1" name="btnimg" οnclick="lunbo('1')" οnmοusemοve="lunbo('1')"/></li>
  <li><input type="button" value="2" name="btnimg" οnclick="lunbo('2')" οnmοusemοve="lunbo('2')"/></li>
  <li><input type="button" value="3" name="btnimg" οnclick="lunbo('3')" οnmοusemοve="lunbo('3')"/></li>
  <li><input type="button" value="4" name="btnimg" οnclick="lunbo('4')" οnmοusemοve="lunbo('4')"/></li>
 </ul>
</div>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值