JavaScript仿商城实现图片广告轮播实例代码
更新时间:2016年2月12日 10:01 点击:1869
大家在逛购物商城的时候不知道有没有注意到商城首页上面都会有各种轮播广告,效果非常好,下面小编给大家整理特此分享给大家学习。具体内容如下所示:
1.HTML框架
如下图,分为三个部分,首先有个div承载,然后一个ul存放图片,一个ul存放数字,再两个button即可
<div class="out"> <ul class="img"> <li><img src="img/1.png" alt=""></li> <li><img src="img/2.png" alt=""></li> <li><img src="img/3.png" alt=""></li> <li><img src="img/4.png" alt=""></li> <li><img src="img/5.png" alt=""></li> </ul> <ul class="num"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <input class="left btn" type="button" value="<"> <input class="right btn" type="button" value=">"> </div>
2.CSS配置
首先外框div要设置和图片大小一致,并且居中对齐,position设置为相对定位,因为后面的图片什么的都是相对这个大框来绝对定位的
//div外框 .out{ width: 560px; height: 350px; margin: 0 auto; position: relative; border: 2px solid red; }
接着设置图片,五张图片叠加这个通过absolute这个属性来实现,因为上面我们把父级容器设置为relative,所以里面的子元素都是相对父级div来绝对定位的
.img { list-style-type: none; } .img li{ position: absolute; top:0; cursor: pointer; }
接下来的其他元素我会用注释写到代码中
.num{ list-style-type: none; /*这个属性会使得text-align失效,所以下面手动写上宽度即可*/ position: absolute; width: 100%; bottom:0; text-align: center; } .num li{ width: 20px; height: 20px; /*行高这个属性使得元素垂直居中*/ line-height: 20px; text-align: center; /*inline-block使得所有元素按行排列*/ display: inline-block; background-color: #4a4a4a; color: #fff; border-radius: 50%; /*鼠标放上去会有小手*/ cursor: pointer; } /*鼠标放到图片上的时候才显示btn*/ .out:hover .btn{ display: block; } .btn{ width: 30px; height: 50px; position: absolute; display: none; /*通过top和margin来定位属性到垂直居中*/ top: 50%; margin-top: -30px; border: 0; /*使用rgba可以修改透明度*/ background-color: rgba(0,0,0,.5); color: #fff; } .right{ right: 0; }
效果如下:
3.jquery控制轮播
实现手动轮播
意思就是鼠标移到下面数字,就显示对应的图片
//手动控制轮播图 $(".img li").eq(0).fadeIn(300);//加载页面的时候让第一个图片显示 $(".num li").eq(0).addClass("active");//给序号为1的加上红色背景 $(".num li").mouseover(function () { //当前的数字显示红色背景,其他的数字都隐藏背景 $(this).addClass("active").siblings().removeClass("active"); //当前数字对应的图片显示,其他图片都隐藏 var index = $(this).index(); $(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300); })
实现自动轮播
//实现自动轮播 var i = 0;//计时器控制数字 var t = setInterval(move,1500); //该方法显示与序号对应的图片 function move() { if (++i ==5){ i = 0; } $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(300).siblings().stop().fadeOut(300); } //鼠标移入后停止自动轮播 $(".out").hover(function () { clearInterval(t); }, function () { t = setInterval(move,1500); });
实现点击轮播
//按钮移动事件 $(".right").click(function () { move(); }); $(".left").click(function () { i = i-2; move(); });
动态控制li数字显示数量
通过图片数量控制标签数量即可
//手动控制li数量 var size = $(".img li").size(); for (var k=1;k<=size;k++){ $(".num").append("<li>"+k+"</li>"); } $(".num li").eq(0).addClass("active");
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13