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 相关文章推荐
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
js实现简单的随机点名器
Sep 17 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中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python优先队列实现方法示例
2017/09/21 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
Python语法分析之字符串格式化
2019/06/13 Python
python的help函数如何使用
2020/06/11 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
给排水工程师岗位职责
2013/11/21 职场文书
美容院经理岗位职责
2014/04/03 职场文书
体育课课后反思
2014/04/24 职场文书
奥林匹克的口号
2014/06/13 职场文书
软件测试专业推荐信
2014/09/18 职场文书
Django显示可视化图表的实践
2021/05/10 Python