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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
vue之将echart封装为组件
Jun 02 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 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
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
php输入数据统一类实例
2015/02/23 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
Vue引入Stylus知识点总结
2020/01/16 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Python使用python-docx读写word文档
2019/08/26 Python
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
JSP&Servlet技术面试题
2015/05/21 面试题
工厂门卫岗位职责
2013/11/25 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
2015年社区统计工作总结
2015/04/21 职场文书