前 言
阿q
作为一个准前端学员，banner图可是很重要的呢。本人，小白一只，给大家分享几个刚刚学习的基础banner图事件。~~~
1. 小广告图滚动播放
1.1 HTML代码
首先，创建基本结构
<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.1 HTML文件代码
这个插件的主要代码写在自定义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.1 DOM组建
方便起见，我们将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.2 jQuery实现功能
<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还是个新人，东西还有很多不足。我会继续努力，将不足之处抹去的，毕竟咱也是个有强迫症的人╭(╯^╰)╮
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。