| h5图片轮播怎么设置（简单html图片轮播） | 您所在的位置：网站首页 › html轮播图 › h5图片轮播怎么设置（简单html图片轮播） |
h5图片轮播怎么设置（简单html图片轮播）
|
前言 轮播图出现在各大网站，基本上人们进入任何一个网站的时候，第一眼看见的内容就是轮播图，三两张图片，有的数量更多一些。这些就是网站建设中所谓的banner广告轮播图，而这些信息往往是浏览网页时的第一视觉，所以这些轮播广告图可作为网站建设中至关重要的元素。首页banner广告轮播图的存在不光光起到了装饰网站的作用，它所带来的网络营销效果才是真正意义上的存在价值。  淘宝轮播图 京东轮播图 天猫轮播图 所以在网站建设的时候，网站banner图一定要精心设计，不可敷衍了事，Banner图的数量和轮播的交互方式等等都要经过深思熟虑，美观固然重要，但是也要考虑到用户体验，以及广告图所带来的营销效果。我们一直认为，首页轮播广告图在整个网站建设的重要性不可忽视。 我给大家提供一个纯Js轮播图示例代码，大家可在此基础上进行改进，包括指示器的样式，容器的大小，按钮的样式，轮播时间等等都可以修改的。该代码通俗易懂，Js部分逻辑清晰。赶紧动手起来吧朋友们，创造属于自己的样式！！ 我给大家提供轮播图示例 01 CSS代码 *{ 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; } 02 HTML 代码 03 JS 代码 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 = pic.length) { index = 0; } change(index); } for (var i = 0; i |
【本文地址】
公司简介
联系我们