h5图片轮播怎么设置(简单html图片轮播)

本文预览图

前言

轮播图出现在各大网站,基本上人们进入任何一个网站的时候,第一眼看见的内容就是轮播图,三两张图片,有的数量更多一些。这些就是网站建设中所谓的banner广告轮播图,而这些信息往往是浏览网页时的第一视觉,所以这些轮播广告图可作为网站建设中至关重要的元素。首页banner广告轮播图的存在不光光起到了装饰网站的作用,它所带来的网络营销效果才是真正意义上的存在价值。

淘宝轮播图

京东轮播图

天猫轮播图

所以在网站建设的时候,网站banner图一定要精心设计,不可敷衍了事,Banner图的数量和轮播的交互方式等等都要经过深思熟虑,美观固然重要,但是也要考虑到用户体验,以及广告图所带来的营销效果。我们一直认为,首页轮播广告图在整个网站建设的重要性不可忽视。

我给大家提供一个纯Js轮播图示例代码,大家可在此基础上进行改进,包括指示器的样式,容器的大小,按钮的样式,轮播时间等等都可以修改的。该代码通俗易懂,Js部分逻辑清晰。赶紧动手起来吧朋友们,创造属于自己的样式!!

我给大家提供轮播图示例

01 CSS代码

        <style>            *{                list-style: none;            }            #wrap {                width: 590px;                height: 470px;                margin: 150px auto;                position: relative;                cursor: pointer;            }            #pic li {                display: none;                position: absolute;                top: 0;                left: 0;                z-index: 1;            }            #num {                position: absolute;                z-index: 2;                bottom: 20px;                left: 46px;            }            #num li {                float: left;                width: 8px;                height: 8px;                margin: 5px;                border-radius: 50%;                border: 1px solid #FFFFFF;                line-height: 20px;                background: transparent;                text-align: center;            }            #num li.active {                background:  #fefefe;            }            .arrow {                z-index: 3;                height: 40px;                width: 30px;                position: absolute;                top: 45%;                line-height: 40px;                background: rgba(0, 0, 0, 0.3);                text-align: center;                display: none;            }            #wrap:hover .arrow {                display: block;            }            .arrow:hover {                background: rgba(0, 0, 0, 0.7);            }            #left {                left: 0;            }            #right {                right: 0;            }        </style>

02 HTML 代码

<!--轮播图开始注意这里的图片路径,要使用自己的图片路径哦-->        <div id=\"wrap\">            <ul id=\"pic\">                <li style=\"display: none;\"><img src=\"images/f7a4711ce9487466.jpg\" alt=\"\"></li>                <li style=\"display: none;\"><img src=\"images/ecc8690ae254c16f.jpg\" alt=\"\"></li>                <li style=\"display: block;\"><img src=\"images/46cdcd636c8608e2.jpg\" alt=\"\"></li>                <li style=\"display: none;\"><img src=\"images/79dd3ce6165857f7.jpg\" alt=\"\"></li>                <li style=\"display: none;\"><img src=\"images/b31ec8402a42fbb3.jpg\" alt=\"\"></li>                <li style=\"display: none;\"><img src=\"images/93c8a83baeaa7f49.jpg\" alt=\"\"></li>                <li style=\"display: none;\"><img src=\"images/cf523718998ccd27.jpg\" alt=\"\"></li>            </ul>            <ul id=\"num\">                <li class=\"active\"></li>                <li class=\"\"></li>                <li class=\"\"></li>                <li class=\"\"></li>                <li class=\"\"></li>                <li class=\"\"></li>                <li class=\"\"></li>            </ul>            <a href=\"javascript:;\" class=\"arrow\" id=\"left\"><</a>            <a href=\"javascript:;\" class=\"arrow\" id=\"right\">></a>        </div>

03 JS 代码

<script type=\"text/javascript\">            function $(id) {                return document.getElementById(id);            }            window.onload = function() {                var oLeft = $(\"left\");                var oRight = $(\"right\");                var index = 0;                var timer = null;                var pic = $(\"pic\").getElementsByTagName(\"li\");                var num = $(\"num\").getElementsByTagName(\"li\");                var oDiv = $(\"wrap\");                oRight.onclick = function() {                    index++;                    if (index >= pic.length) {                        index = 0;                    }                    change(index);                }                oLeft.onclick = function() {                    index--;                    if (index < 0) {                        index = pic.length - 1;                    }                    change(index);                }                oDiv.onmouseover = function() {                    clearInterval(timer);                }                oDiv.onmouseout = function() {                    timer = setInterval(run, 2000); //鼠标移出后重新开始定时器                }                timer = setInterval(run, 4000); //定时器                function run() { //用于定时器的函数                    index++;                    if (index >= pic.length) {                        index = 0;                    }                    change(index);                }                for (var i = 0; i < num.length; i++) {                    num[i].index = i; //把索引值存起来                    num[i].onmouseover = function() {                        change(this.index);                    }                }                function change(curindex) { //用于切换图片的函数                    for (var i = 0; i < pic.length; i++) {                        pic[i].style.display = \"none\";                        num[i].className = \"\";                    }                    pic[curindex].style.display = \"block\";                    num[curindex].className = \"active\";                    index = curindex;                }            }        </script>

版权声明:
作者:王者荣耀外挂
链接:https://www.lianjiekuai.com/2021/10/3799/
来源:诚鑫达网络
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码