JavaScript实现图片轮播

来源：互联网发布：数据库测试题编辑：程序博客网时间：2024/05/22 02:04

//实现照片轮播

1.在没有按钮触发的情况下，四张图片搁几秒，就会实现自动轮播  触发按钮单击事件，对应button的照片跳转到我们的窗体div界面

2.照片保存路径存储在，数组内部   按钮数量会根据数组内存储图片位置的数量，来自动生成按钮

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        #container{            position: absolute;            width: 360px;            height: 190px;            margin-left: 400px;        }        #con_img{            position: absolute;            width: 180px;            height:40px;            right: 0px;            bottom: 0px; /*此处的bottom和right专属于内部，和margin以及padding都不同*/            display: inline-block;        }        [id^=img0]{            width: 30px;            height: 30px;            border-radius: 50%;            background: #DCDCDC;            display: inline-block;            text-align: center;            line-height: 30px;            cursor: default;        }    </style>    <script language="JavaScript">            var path="../imag/";            var imgs=['ad-01.jpg','ad-02.jpg','ad-03.jpg','ad-04.jpg'];            var nowNum=1;            var maxNum=imgs.length;            var img_up;        window.onload=function(){            img_up=document.getElementById('id_img');            img_up.setAttribute('src',path+imgs[0]);            var con_img = document.getElementById('con_img');            for(var i=0;i<imgs.length;i++){                var btn = document.createElement('input');                btn.setAttribute('type','button');                btn.setAttribute('value',i+1);                btn.setAttribute('onclick','img_show('+i+')');                con_img.appendChild(btn);            }        }        function img_show(num){            if(num == undefined){                img_up=document.getElementById('id_img');                img_up.setAttribute('src',path+imgs[nowNum]);                nowNum = (nowNum+1)%maxNum;            }else{                img_up.setAttribute('src',path+imgs[num]);                nowNum = num;               clearInterval(inter);                setTimeout(function(){                    inter = setInterval('img_show()',2000), 1000                })            }        }            var inter= setInterval('img_show()',2000);    </script></head><body><div id="container">    <img src="" alt="" id="id_img"/>    <div id="con_img">        <!--<div id="img01" onclick="img_show(0)">1</div>        <div id="img02" onclick="img_show(1)">2</div>        <div id="img03" onclick="img_show(2)">3</div>        <div id="img04" onclick="img_show(3)">4</div>-->    </div></div></body></html>

0 0