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

最新推荐文章于 2024-03-27 23:42:14 发布

wth_xk

最新推荐文章于 2024-03-27 23:42:14 发布

阅读量453

点赞数

本文链接：https://blog.csdn.net/xingkong_333/article/details/71589217

版权

下面是我制作的一个轮播图小实例：用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.οnlοad=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.οnclick=function () {
         next1();
         next2();
        };

        //上一组
        oPrev.οnclick=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.οnclick=function () {
            next1();
        };
        //点击第二组图片
        oImg2.οnclick=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>

用到的图片：

wth_xk

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用js实现图片轮播切换（1）

下面是我制作的一个轮播图小实例：用js实现的 Title body{margin: 0;} a{text-decoration:none; text-align:center;} #box{width: 800px;height: 500px;border: 1px solid #000;position: rel
复制链接

扫一扫