Banner图二三事
前 言
阿q
作为一个准前端学员，banner图可是很重要的呢。本人，小白一只，给大家分享几个刚刚学习的基础banner图事件。~~~
| 1. 小广告图滚动播放 |
1.1HTML代码
首先，创建基本结构
<div id="outside">
<div id="inside">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div> <div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
1.2设置基本样式
来一段css代码，做出来基本样式
*{
margin: 0px;
padding: 0px;
}
#outside{
width: 1200px;
overflow: hidden;
margin: 0 auto;
height: 300px;
position: relative;
}
#outside #inside{
width: 3100px;
position: absolute;
}
#outside #inside div{
width: 300px;
height: 300px;
margin: 0px 5px;
background-color: red;
float: left;
}
1.3实现滚动
基本样式已经做好，接下来就是让它滚动了~~~很简单的一段JS代码，我是用定时器做的
<script type="text/javascript">
var num = 1;
setInterval(function() {
num--;
var inside=document.getElementById("inside");
inside.style.cssText="left: "+num+"px;";
if(num<=-1860) num=1;
},5);
</script>
呐~，这就是效果图了，放上图片食用更佳。以前用纯css做过一遍，学过JS之后发现还是JS更简单
| 2. 自定义插件实现banner图滚动 |
接下来就是大图了，这是自己定义的jQuery插件
2.1HTML文件代码
这个插件的主要代码写在自定义JS文件中，HTML中代码就很少了~
<head>
<meta charset="UTF-8">
<title>自定义插件实现banner滚动</title>
<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<script src="js/jQuery-scrollBanner.js" type="text/javascript"></script>
</head> <body>
<div id="banner"></div> </body> <script type="text/javascript">
$("#banner").scrollBanner({
images:[
{src:"img/banner1.jpg",title:"banner1",href:"http://www.baidu.com"},
{src:"img/banner2.jpg",title:"banner2",href:"http://www.sina.com"},
{src:"img/banner3.jpg",title:"banner3",href:"http://www.qq.com"},
{src:"img/banner4.jpg",title:"banner4",href:"http://www.jredu100.com"}],
scrollTime:2000,
bannerHeight:"500px",
iconColor:"#cccccc",
iconHoverColor:"#82c900",
iconPosition:"center"
});
</script>
没错，只定义一个div，就是这么任性
2.2插件属性
images : 接收数组类型，数组的每个值应为对象。对象具有属性：src->图片的路径
title->图片指上后的文字 href->点击图片跳转的页面
scrollTime : 每张图片停留时间，单位毫秒。2000
bannerHeight : banner图的高度。500px
iconColor : 提示图标的颜色。默认white
iconHoverColor : 提示图标指上之后的颜色。默认orange
iconPosition : 提示图标的位置，可选值left/center/right。默认center
2.2插件代码
啦啦啦~~接下来就是插件的代码了，注释写在代码里了
!function($){
$.fn.scrollBanner = function(obj){
// 声明各个属性的默认值
var defaults={
images:[],
scrollTime:2000,
bannerHeight:"500px",
iconColor:"white",
iconHoverColor:"orange",
iconPosition:"center"
}
// 将默认值与传入的对象比对，如果传入的对象有未赋值属性，则使用默认对象的属性
obj=$.extend(defaults,obj);
// 组件DOM布局
$("body").css({"padding":"0px","margin":"0px"});
this.empty().append("<div class='scrollBanner-banner'></div>");
$.each(obj.images,function(index,item){
$(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='"
+item.href+"' target='_black'><img src='"+item.src+"' title='"+item.title
+"'/></a></div>");
});
$(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='"
+obj.images[0].href+"' target='_black'><img src='"+obj.images[0].src+"' title='"
+obj.images[0].title+"'/></a></div>");
this.append("<div class='scrollBanner-icons'></div>");
$.each(obj.images, function(index,item) {
// data-*属性是H5允许用户自行在HTML标签上保存数据的属性。
// 保存在data-*中的数据，可以使用JS读取调用。
$(".scrollBanner-icons").append("<span data-index='"+index
+"' class='scrollBanner-icon'></span>");
});
// 设置各种css
this.css({
"width":"100%",
"height":obj.bannerHeight,
"overflow":"hidden",
"position":"relative"
});
$(".scrollBanner-banner").css({
"width": obj.images.length+1+"00%",
"height":obj.bannerHeight,
});
$(".scrollBanner-bannerInner").css({
"width":100/(obj.images.length+1)+"%",
"height":obj.bannerHeight,
"overflow":"hidden",
"float":"left"
});
$(".scrollBanner-bannerInner img").css({
"width": "1920px",
"height": obj.bannerHeight,
"position": "relative",
"left": "50%",
"margin-left": "-960px",
});
$(".scrollBanner-icons").css({
"width": 30*obj.images.length+"px",
"height": "7px",
"position":"absolute",
"bottom":"40px",
});
switch (obj.iconPosition){
case "left":
$(".scrollBanner-icons").css({
"left":"40px",
});
break;
case "center":
$(".scrollBanner-icons").css({
"left":"50%",
"margin-left":"-"+15*obj.images.length+"px"
});
break;
case "right":
$(".scrollBanner-icons").css({
"right":"40px",
});
break;
}
$(".scrollBanner-icon").css({
"width": "20px",
"height": "7px",
"background-color": obj.iconColor,
"display": "inline-block",
"margin": "0px 5px",
});
$(".scrollBanner-icon:eq(0)").css({
"background-color":obj.iconHoverColor
});
// 实现banner滚动功能
var count=1;
setInterval(function(){
$(".scrollBanner-banner").css({
"margin-left":"-"+count+"00%",
"transition":"all .5s ease"
});
$(".scrollBanner-icon").css("background-color", obj.iconColor);
$(".scrollBanner-icon:eq("+count+")").css("background-color", obj.iconHoverColor);
if (count>=obj.images.length){
$(".scrollBanner-icon:eq(0)").css("background-color", obj.iconHoverColor);
}
if (count>obj.images.length) {
count=0;
$(".scrollBanner-banner").css({
"margin-left":"0px",
"transition":"none"
});
}
count++;
},obj.scrollTime);
// 小图标指上后变色并且切换banner图
$(".scrollBanner-icon").mouseover(function(){
$(".scrollBanner-icon").css("background-color", obj.iconColor);
// ↓ 由span触发mouseover事件，则this指向这个span。
// ↓ 但是，这个this是JS对象，必须使用$封装成JQuery对象。
$(this).css("background-color", obj.iconHoverColor);
var index=$(this).attr("data-index");
// 将计数器count修改为index的值，让Banner滚动的定时器能够刚好滚到所指图片的下一张
count=index;
$(".scrollBanner-banner").css({
"margin-left":"-"+index+"00%",
"transition":"none"
});
});
}
}(jQuery);
怎么样，是不是很方便呢，接下来只要插入想要的图片就可以了
| 3. 手风琴banner图 |
如果上一个很普通，食用起来没什么味道的话，接下来给客官分享一道比较成熟的菜。
这个样式我很喜欢玩的游戏的官网的一个版块，果然游戏使人进步呢~~
这也是用jQuery实现的，jQuery果然是个神奇的东西~~
闲话不多说，上菜~~~
3.1DOM组建
方便起见，我们将HTML代码和css代码写到一块，这个虽然好看，但是不如上边那个使用方便
<style>
*{margin:0; padding:0;}
body,html{width:100%; height:100%;}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bg-box-1{
background: url('img/tu1.jpg') no-repeat center/cover;
}
.bg-box-2{
background: url('img/tu2.jpg') no-repeat center/cover;
}
.bg-box-3{
background: url('img/tu3.jpg') no-repeat center/cover;
}
.bg-box-4{
background: url('img/tu4.jpg') no-repeat center/cover;
}
#wrap{
position: absolute;
overflow: hidden;
top:0; left:0; right:0; bottom:0;
margin:auto;
width: 1000px;
height: 400px;
}
#wrap > ul{
width: 120%;
list-style: none;
}
#wrap > ul > li{
float: left;
width: 100px;
height: 400px;
cursor: pointer;
}
#wrap > ul > li:nth-child(1){
background: url('img/tu5.jpg') no-repeat center/cover;
}
#wrap > ul > li:nth-child(2){
background: url('img/tu1.jpg') no-repeat center/cover;
}
#wrap > ul > li:nth-child(3){
background: url('img/tu2.jpg') no-repeat center/cover;
}
#wrap > ul > li:nth-child(4){
background: url('img/tu3.jpg') no-repeat center/cover;
width: 700px;
}
#wrap > ul > li > .text{
width: 100px;
height: 100%;
background: #000;
opacity: .5;
}
#wrap > ul > li > .text p{
padding: 20px 40px;
font-family: 'Microsoft yahei';
color: #fff;
}
</style>
</head>
<body>
<div class="bg bg-box-1"></div>
<div class="bg bg-box-2"></div>
<div class="bg bg-box-3"></div>
<div class="bg bg-box-4"></div>
<div id="wrap">
<ul>
<li>
<div class="text">
<p>剑灵1</p>
</div>
</li>
<li>
<div class="text">
<p>剑灵2</p>
</div>
</li>
<li>
<div class="text">
<p>剑灵3</p>
</div>
</li>
<li class="curr">
<div class="text">
<p>剑灵4</p>
</div>
</li>
</ul>
</div>
</body>
3.2jQuery实现功能
<script src="js/jquery.min.js"></script>
<script>
(function(){
$('#wrap li').mouseover(function(){
if(!$(this).hasClass('curr')){
$('#wrap li').removeClass('curr');
$(this).addClass('curr'); // 切换背景
$('#wrap li').each(function(index){
if($(this).hasClass('curr')){
$('.bg').fadeOut(300);
$('.bg:eq(' + index + ')').fadeIn(500);
}
}); $('.curr').stop().animate({
width: 700
}, 500, 'linear');
$('#wrap li').not('.curr').stop().animate({
width: 100
}, 500, 'linear');
}
});
})()
</script>
学过之后没用过hasclss()方法，结果在这用到了。“存在即合理”，还是自己才疏学浅。
效果图：
小q有话说
小q还是个新人，东西还有很多不足。我会继续努力，将不足之处抹去的，毕竟咱也是个有强迫症的人╭(╯^╰)╮
Banner图二三事的更多相关文章
- 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
- jQuery自定义插件--banner图滚动
前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...
- JQuery自定义插件详解之Banner图滚动插件
前 言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
- iOS7下滑动返回与ScrollView共存二三事
[转载请注明出处] = =不是整篇复制就算注明出处了亲... iOS7下滑动返回与ScrollView共存二三事 [前情回顾] 去年的时候,写了这篇帖子iOS7滑动返回.文中提到,对于多页面结构的应用 ...
- 人工智能-智能创意平台架构成长之路(四)-丰富多彩的banner图生成解密第一部分（对标阿里鹿班的设计）
我们之前讲了很多都是平台架构的主体设计,应用架构设计以及技术架构的设计,那么现在我们就来分享一下丰富多彩的banner图是怎么生成出来的. banner图的生成我们也是不断的进行迭代和优化,这块是最核 ...
- Java并发编程二三事
Java并发编程二三事 转自我的Github 近日重新翻了一下<Java Concurrency in Practice>故以此文记之. 我觉得Java的并发可以从下面三个点去理解: * ...
- linux杂记（十二?) 关于账号和密码的二三事
关于密码的二三事 关于账号和密码的二三事 久了不更linux的相关知识,实在是懒得想内容点(纯粹是懒).那么今天就来谈谈关于linux密码和账号的重要概念. 假如你的主机遭到入侵,那么对方的第一个侵入 ...
- 原生态JS实现banner图的常用所有功能
虽然,用jQuery实现banner图的各种效果十分简单快捷,但是我今天用css+js代码实现了几个banner图的常用功能,效果还不错. 此次,主要想实现以下功能: 1. banner图循环不间断切 ...
- JS 实现banner图的滚动和选择效果
CSS+JS实现banner图滚动和点击切换 HTML 部分代码: <body> <div id="banner"> <div id="in ...
随机推荐
- 案例：Standby RAC遭遇ORA-1157,1111,1110导致实例crash处理
案例:Standby RAC遭遇ORA-1157,1111,1110导致实例crash处理 环境:RHEL 6.5 + Oracle RAC 11.2.0.4 + Dataguard 今天在实验环境的 ...
- android学习ViewFlipper的使用
android系统自带的多页面管理控件,它可以实现子页面的自动切换 1,为ViewFlipper添加View 静态导入:在layout布局文件中直接导入 动态导入:通过addview方法进行导入 2, ...
- 两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
- 移动端JS判断手势方向
原生JS判断手势方向的解决思路: 1.滑动屏幕事件使用html5 的touchstart滑动开始事件和touchend滑动结束事件. 2.方向的判断,以起点做平面坐标系,与终点连线做直线,直线与x正半 ...
- V8 内存控制
V8主要将内存分为:新生代 和 老生代. 1.新生代 新生代中的对象为存活时间短的对象. 它将堆内存一分为二,每一部分空间称为 semispace,其中一个处于使用状态(from 空间),另一个处于闲 ...
- Zepto源码分析（二）奇淫技巧总结
Zepto源码分析(一)核心代码分析 Zepto源码分析(二)奇淫技巧总结 目录 * 前言 * 短路操作符 * 参数重载(参数个数重载) * 参数重载(参数类型重载) * CSS操作 * 获取属性值的 ...
- 【可视化】Echarts3 在世界地图中绘制中国各省份的轮廓
要在世界地图展现出来的情况下绘制中国省份的轮廓,根据现有的echarts-api是不可行的. 但好在echarts也提供了自定义地图的方式,使用echarts.registerMap();来实现 第一 ...
- 错误Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future:
今天写PHP代码,遇到了这个非常不友好的报错(Deprecated: mysql_connect(): The mysql extension is deprecated and will be re ...
- C++ 类声明 类前置声明范例
转载自http://www.cnblogs.com/staring-hxs/p/3244251.html 在编写C++程序的时候,偶尔需要用到前置声明(Forward declaration).下面的 ...
- C/C++ 对优先级与结合性的理解
优先级与结合性是指运算符与操作数的"紧密程度": 结合性表明了同一优先级的运算符对同一操作数的紧密程度: 如: a=b=c: 赋值运算符的结合性为从右至左: 所以a=b=c ...