JavaScript实现图片轮播

最新推荐文章于 2023-06-13 11:30:49 发布

曜灵_

最新推荐文章于 2023-06-13 11:30:49 发布

阅读量488

点赞数

分类专栏： JavaScript 代码案例文章标签： JavaScript 图片轮播

本文链接：https://blog.csdn.net/lpf1215/article/details/50916372

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

代码案例

2 篇文章 0 订阅

订阅专栏

//实现照片轮播

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.οnlοad=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" οnclick="img_show(0)">1</div>
        <div id="img02" οnclick="img_show(1)">2</div>
        <div id="img03" οnclick="img_show(2)">3</div>
        <div id="img04" οnclick="img_show(3)">4</div>-->
    </div>
</div>
</body>
</html>

曜灵_

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现图片轮播

//实现照片轮播 1.在没有按钮触发的情况下，四张图片搁几秒，就会实现自动轮播触发按钮单击事件，对应button的照片跳转到我们的窗体div界面2.照片保存路径存储在，数组内部按钮数量会根据数组内存储图片位置的数量，来自动生成按钮html>lang="en"> charset="UTF-8"> type="text/css">
复制链接

扫一扫