javascript实现的简单图片左右切换

<script type="text/javascript">
    window.οnlοad=function(){
       var oPrev=document.getElementById("prev");
       var oNext=document.getElementById("next");
       var oImg1=document.getElementById("img1");
       var arrUrl=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"];
        var num=0;

        oImg1.src=arrUrl[num];

        oNext.οnclick=function (){
         num++;
            
            if(num == arrUrl.length){
             num=0;
            }
            oImg1.src=arrUrl[num];
            
        }
         oPrev.οnclick=function (){
         num--;
            
            if(num == -1){
             num=arrUrl.length-1;
            }
            oImg1.src=arrUrl[num];
            
        }
    }
</script>
<style type="text/css">
#content{
 width: 600px;
 height: 501px;
 position: relative;
 margin: 40px auto;
}
#content a{
 width: 50px;
 height: 50px;
 background: rgba(240,240,240,0.5);
 border: 3px #fff solid;
 font-size: 40px;
 font-weight: bold;
    color: #fff;
    text-align: center;
    position: absolute;
    top:225px;
    text-decoration: none;
}
#content a:hover{
 color:#000;
}
#prev{
 position: absolute;
 left: 10px;
}
#next{
 position: absolute;
 right:10px;
}
#img1{
 width: 600px;
 height: 501px; 
}

</style>
<body>
<div id="content">
 <a id="prev" href="javascript:;"><</a>
 <a id="next" href="javascript:;">></a>
 <img id="img1" src="images/1.jpg">


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值