原生Js_简易图片轮播模板

  

 

 　　功能：图片自动循环轮播，通过点击“上一张”，“下一张”按钮来控制图片的切换

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Gary图片轮播</title>
        <style type="text/css">
            div{
                width: 900px;
                height:400px;
                margin: 0 auto;
            }
            
            div img{
                width:900px;
                height: 400px;
            }
        </style>
        <script type="text/javascript">
            
//            数组下标从0开始
            var index = 0;
            var pathArr = new Array(
                "img/1.jpg",
                "img/1.png",
                "img/2.jpg",
                "img/2.png"
            );
            
            function init(){
//                图片两秒进行一次切换
//                window.setTimeout(changeImg,2000);
//                图片每隔两秒循环进行切换
                window.setInterval(changeImg,2000);    
            }
            
            function changeImg(){
                nextImg()
            }
            
            //点击上一张
            function preImg(){
//                得到img标签
                myimg = document.getElementById("myimg");
                index--;
                if(index<0){
                    index = pathArr.length-1;
                }
                myimg.src =pathArr[index];    
            }
            
            function nextImg(){
                //                得到img标签
                myimg = document.getElementById("myimg");
                index++;
                if(index>pathArr.length){
                    index = 0;
                }
                myimg.src =pathArr[index];
            }
            
        </script>
        
    </head>
    
    <body onload="init()">
            <p align="center">
                <button onclick="preImg()">上一张</button>
                <button onclick="nextImg()">下一张</button>
            </p>
            <div>
                <img src="img/1.jpg" id="myimg"/>
            </div>
    </body>
</html>
Gary-图片轮播.html

 

　　Learn

　　　　一、设置图片的切换

　　　　二、设置图片的变更和循环

　　　　三、添加上一张和下一张按钮

　　　　四、图片轮播的优化

 

　　目录结构

　　

 

 

 

一、设置图片的切换

　　设置图片div样式

            <div>
                <img src="img/Q1.jpg" id="myimg"/></img>
            </div>

 

　　设置图片样式居中对齐

        <style type="text/css">
            div{
                width: 900px;
                height:400px;
                margin: 0 auto;
            }
            
            div img{
                width:900px;
                height: 400px;
            }
        </style>

　　

　　使用JavaScript脚本去控制图片的切换

        <script type="text/javascript">
            
//            图片两秒进行一次切换
            window.setTimeout(changeImg,2000);
            
            function changeImg(){
//                得到img标签
                myimg = document.getElementById("myimg");
                myimg.src ="img/Q2.jpg";
            }
        </script>

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Gary图片轮播</title>
        <style type="text/css">
            div{
                width: 900px;
                height:400px;
                margin: 0 auto;
            }
            
            div img{
                width:900px;
                height: 400px;
            }
        </style>
        <script type="text/javascript">
            
//            图片两秒进行一次切换
            window.setTimeout(changeImg,2000);
            
            function changeImg(){
//                得到img标签
                myimg = document.getElementById("myimg");
                myimg.src ="img/Q2.jpg";
            }
        </script>
        
    </head>
    
    <body>
            <div>
                <img src="img/Q1.jpg" id="myimg"/></img>
            </div>
    </body>
</html>
Gary-图片轮播.html

 

 

二、设置图片的变更和循环

　　通过给<body>标签添加onload="init()"方法实现当页面加载的时候再调用init()中初始化方法

    <body onload="init()">
            <div>
                <img src="img/1.jpg" id="myimg"/>
            </div>
    </body>

 

　　使用JavaScript控制图片每隔2s循环播放

        <script type="text/javascript">
            
                var index = 1;
            
            function init(){
//                图片两秒进行一次切换
//                window.setTimeout(changeImg,2000);
//                图片每隔两秒循环进行切换
                window.setInterval(changeImg,2000);    
            }
            
            function changeImg(){
//                得到img标签
                myimg = document.getElementById("myimg");
                index++;
                if(index>2){
                    index = 1;
                }
                myimg.src ="img/"+index+".jpg";
            }
        </script>

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Gary图片轮播</title>
        <style type="text/css">
            div{
                width: 900px;
                height:400px;
                margin: 0 auto;
            }
            
            div img{
                width:900px;
                height: 400px;
            }
        </style>
        <script type="text/javascript">
            
                var index = 1;
            
            function init(){
//                图片两秒进行一次切换
//                window.setTimeout(changeImg,2000);
//                图片每隔两秒循环进行切换
                window.setInterval(changeImg,2000);    
            }
            
            function changeImg(){
//                得到img标签
                myimg = document.getElementById("myimg");
                index++;
                if(index>2){
                    index = 1;
                }
                myimg.src ="img/"+index+".jpg";
            }
        </script>
        
    </head>
    
    <body onload="init()">
            <div>
                <img src="img/1.jpg" id="myimg"/>
            </div>
    </body>
</html>
Gary-图片轮播.html

 

 

三、添加上一张和下一张按钮

　　添加两个按钮并设置居中显示

            <p align="center">
                <button onclick="preImg()">上一张</button>
                <button onclick="nextImg()">下一张</button>
            </p>

 

　　添加点击按钮时调用上一张和下一张图片

    function changeImg(){
                nextImg()
            }
            
            //点击上一张
            function preImg(){
//                得到img标签
                myimg = document.getElementById("myimg");
                index--;
                if(index<1){
                    index = 2;
                }
                myimg.src ="img/"+index+".jpg";            
            }
            
            function nextImg(){
                //                得到img标签
                myimg = document.getElementById("myimg");
                index++;
                if(index>2){
                    index = 1;
                }
                myimg.src ="img/"+index+".jpg";
            }

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Gary图片轮播</title>
        <style type="text/css">
            div{
                width: 900px;
                height:400px;
                margin: 0 auto;
            }
            
            div img{
                width:900px;
                height: 400px;
            }
        </style>
        <script type="text/javascript">
            
                var index = 1;
            
            function init(){
//                图片两秒进行一次切换
//                window.setTimeout(changeImg,2000);
//                图片每隔两秒循环进行切换
                window.setInterval(changeImg,2000);    
            }
            
            function changeImg(){
                nextImg()
            }
            
            //点击上一张
            function preImg(){
//                得到img标签
                myimg = document.getElementById("myimg");
                index--;
                if(index<1){
                    index = 2;
                }
                myimg.src ="img/"+index+".jpg";            
            }
            
            function nextImg(){
                //                得到img标签
                myimg = document.getElementById("myimg");
                index++;
                if(index>2){
                    index = 1;
                }
                myimg.src ="img/"+index+".jpg";
            }
            
        </script>
        
    </head>
    
    <body onload="init()">
            <p align="center">
                <button onclick="preImg()">上一张</button>
                <button onclick="nextImg()">下一张</button>
            </p>
            <div>
                <img src="img/1.jpg" id="myimg"/>
            </div>
    </body>
</html>
Gary-图片轮播.html

 

 

四、图片轮播的优化

　　为防止图片名不一定都是按Q1.jpg,Q2.jpg这种类型顺序排序，可以在先前的图片按钮点击遍历的基础上使用数组来存储图片的路径

//            数组下标从0开始
            var index = 0;
            var pathArr = new Array(
                "img/1.jpg",
                "img/1.png",
                "img/2.jpg",
                "img/2.png"
            );

 

　　点击上一张图片和下一张图片判定范围设置成pathArr.length

function changeImg(){
                nextImg()
            }
            
            //点击上一张
            function preImg(){
//                得到img标签
                myimg = document.getElementById("myimg");
                index--;
                if(index<0){
                    index = pathArr.length-1;
                }
                myimg.src =pathArr[index];    
            }
            
            function nextImg(){
                //                得到img标签
                myimg = document.getElementById("myimg");
                index++;
                if(index>pathArr.length){
                    index = 0;
                }
                myimg.src =pathArr[index];
            }

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Gary图片轮播</title>
        <style type="text/css">
            div{
                width: 900px;
                height:400px;
                margin: 0 auto;
            }
            
            div img{
                width:900px;
                height: 400px;
            }
        </style>
        <script type="text/javascript">
            
//            数组下标从0开始
            var index = 0;
            var pathArr = new Array(
                "img/1.jpg",
                "img/1.png",
                "img/2.jpg",
                "img/2.png"
            );
            
            function init(){
//                图片两秒进行一次切换
//                window.setTimeout(changeImg,2000);
//                图片每隔两秒循环进行切换
                window.setInterval(changeImg,2000);    
            }
            
            function changeImg(){
                nextImg()
            }
            
            //点击上一张
            function preImg(){
//                得到img标签
                myimg = document.getElementById("myimg");
                index--;
                if(index<0){
                    index = pathArr.length-1;
                }
                myimg.src =pathArr[index];    
            }
            
            function nextImg(){
                //                得到img标签
                myimg = document.getElementById("myimg");
                index++;
                if(index>pathArr.length){
                    index = 0;
                }
                myimg.src =pathArr[index];
            }
            
        </script>
        
    </head>
    
    <body onload="init()">
            <p align="center">
                <button onclick="preImg()">上一张</button>
                <button onclick="nextImg()">下一张</button>
            </p>
            <div>
                <img src="img/1.jpg" id="myimg"/>
            </div>
    </body>
</html>
Gary-图片轮播.html

 

posted @ 2019-02-28 21:33  Cynical丶Gary  阅读(253)  评论(0)  编辑  收藏  举报