作者: 梦里梦中梦
转发链接:https://mp.weixin.qq.com/s/6J0uJKaC4SPlt2h7oeSP-Q
前言
轮播图出现在各大网站,基本上人们进入任何一个网站的时候,第一眼看见的内容就是轮播图,三两张图片,有的数量更多一些。这些就是网站建设中所谓的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>
推荐JavaScript经典实例学习资料文章
《通过发布/订阅的设计模式搞懂 Node.js 核心模块 Events》
《「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能》
《JavaScript 已进入第三个时代,未来将何去何从?》
《前端上传前预览文件 image、text、json、video、audio「实践」》
《深入细品 EventLoop 和浏览器渲染、帧动画、空闲回调的关系》
《推荐13个有用的JavaScript数组技巧「值得收藏」》
《36个工作中常用的JavaScript函数片段「值得收藏」》
《一文了解文件上传全过程(1.8w字深度解析)「前端进阶必备」》
《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》
《JavaScript正则深入以及10个非常有意思的正则实战》
《前端开发规范:命名规范、html规范、css规范、js规范》
《100个原生JavaScript代码片段知识点详细汇总【实践】》
《手把手教你深入巩固JavaScript知识体系【思维导图】》
《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》
《身份证号码的正则表达式及验证详解(JavaScript,Regex)》
《127个常用的JS代码片段,每段代码花30秒就能看懂-【上】》
《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《面试中教你绕过关于 JavaScript 作用域的 5 个坑》
作者: 梦里梦中梦
转发链接:https://mp.weixin.qq.com/s/6J0uJKaC4SPlt2h7oeSP-Q
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/10398.html