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 相关文章推荐
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
关于vue-router路径计算问题
May 10 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
JS+CSS实现动态时钟
Feb 19 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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
总结python爬虫抓站的实用技巧
2016/08/09 Python
不要用强制方法杀掉python线程
2017/02/26 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
大一学生假期实习的自我评价
2013/10/12 职场文书
经济类毕业生求职信
2014/06/26 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
单位工作证明范本
2015/06/15 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
springboot读取resources下文件的方式详解
2022/06/21 Java/Android
详解SQL报错盲注
2022/07/23 SQL Server