用js实现图片轮播切换（1）

来源：互联网发布：mac资料库文件夹在哪编辑：程序博客网时间：2024/05/16 07:34
下面是我制作的一个轮播图小实例：用js实现的
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        body{margin: 0;}        a{text-decoration:none; text-align:center;}        #box{width: 800px;height: 500px;border: 1px solid #000;position: relative;margin-left: 50px;}        #pic1 img{width: 400px;height:300px;border: 1px solid #000;margin:100px 0 0 20px;float: left;}        #pic2 img{width: 300px;height: 300px;border: 1px solid #000;margin:100px 0 0 50px;float: left;}        #prev,#next{width: 60px;height: 20px;position: absolute;border: 1px solid #000;top: 60px;}        #next{left: 20px;}        #prev{left: 100px;}        #num1,#num2{position: absolute;bottom: 50px;}        #num1{left: 20px;}        #num2{left: 470px;}        #text1,#text2{position: absolute;bottom: 55px;}        #text2{left: 550px;}        #text1{left: 100px;}    </style>    <script>    window.onload=function () {        var oDiv=document.getElementById('box');        var oPrev=document.getElementById('prev');        var oNext=document.getElementById('next');        var oPic1=document.getElementById('pic1');        var oPic2=document.getElementById('pic2');        var oImg1=oPic1.getElementsByTagName('img')[0];        var oImg2=oPic2.getElementsByTagName('img')[0];        var oSpan1=oDiv.getElementsByTagName('span')[0];        var oSpan2=oDiv.getElementsByTagName('span')[1];        var oP1=oDiv.getElementsByTagName('p')[0];        var oP2=oDiv.getElementsByTagName('p')[1];        var arrImg1=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];        var arrImg2=['images/5.jpg','images/6.jpg','images/7.jpg'];        var num1=0;        var num2=0;        //初始化        function fnTab() {            oImg1.src=arrImg1[num1];            oImg2.src=arrImg2[num1];            oSpan1.innerHTML=1+num1+'/'+arrImg1.length;            oSpan2.innerHTML=1+num1+'/'+arrImg2.length;            oP1.innerHTML='第一组第'+(1+num1)+'张图片';            oP2.innerHTML='第二组第'+(1+num1)+'张图片';        }        function next1() {            num1++;            if(num1==arrImg1.length){                num1=0;            }            oImg1.src=arrImg1[num1];            oSpan1.innerHTML=1+num1+'/'+arrImg1.length;            oP1.innerHTML='第一组第'+(1+num1)+'张图片';        }        function next2() {            num2++;            if(num2==arrImg2.length){                num2=0;            }            oImg2.src=arrImg2[num2];            oSpan2.innerHTML=1+num2+'/'+arrImg2.length;            oP2.innerHTML='第二组第'+(1+num2)+'张图片';        }        fnTab();        //下一组        oNext.onclick=function () {         next1();         next2();        };        //上一组        oPrev.onclick=function () {            num1--;            num2--;            if(num1==-1){                num1=arrImg1.length-1;            }            if(num2==-1){                num2=arrImg2.length-1;            }            oImg1.src=arrImg1[num1];            oImg2.src=arrImg2[num1];            oSpan1.innerHTML=1+num1+'/'+arrImg1.length;            oSpan2.innerHTML=1+num1+'/'+arrImg2.length;            oP1.innerHTML='第一组第'+(1+num1)+'张图片';            oP2.innerHTML='第二组第'+(1+num1)+'张图片';        };        oImg1.src=arrImg1[num1];        oImg2.src=arrImg2[num1];        oSpan1.innerHTML=1+num1+'/'+arrImg1.length;        oSpan2.innerHTML=1+num1+'/'+arrImg2.length;        oP1.innerHTML='第一组第'+(1+num1)+'张图片';        oP2.innerHTML='第二组第'+(1+num1)+'张图片';        //点击第一组图片        oImg1.onclick=function () {            next1();        };        //点击第二组图片        oImg2.onclick=function () {            next2();        };    }    </script></head><body><div id="box">    <a id="prev" href="javascript:;">上一组</a>    <a id="next" href="javascript:;">下一组</a>    <div id="pic1"><img src=""> </div>    <div id="pic2"><img src=""> </div>    <span id="num1"></span>    <span id="num2"></span>    <p id="text1"></p>    <p id="text2"></p></div></body></html>
用到的图片：
0 0