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

来源：互联网发布：linux 卸载安装包编辑：程序博客网时间：2024/06/04 20:08

<script type="text/javascript">    window.onload=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.onclick=function (){         num++;                        if(num == arrUrl.length){             num=0;            }            oImg1.src=arrUrl[num];                    }         oPrev.onclick=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">

0 0