JavaScript仿商城实现图片广告轮播实例代码


Posted in Javascript onFebruary 06, 2016

大家在逛购物商城的时候不知道有没有注意到商城首页上面都会有各种轮播广告,效果非常好,下面小编给大家整理特此分享给大家学习。具体内容如下所示:

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");
Javascript 相关文章推荐
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
javascript实现电商放大镜效果
Nov 23 Javascript
简介AngularJS中$http服务的用法
Feb 06 #Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 #Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 #Javascript
详解Angularjs filter过滤器
Feb 06 #Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 #Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 #Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 #Javascript
You might like
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
如何在JS文件中获取Vue组件
2020/09/16 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
给同事的道歉信
2014/01/11 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
结对共建协议书
2014/08/20 职场文书
幼儿园开学通知
2015/04/24 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
Redis数据同步之redis shake的实现方法
2022/04/21 Redis
mysql数据库实现设置字段长度
2022/06/10 MySQL