前 言
阿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还是个新人，东西还有很多不足。我会继续努力，将不足之处抹去的，毕竟咱也是个有强迫症的人╭(╯^╰)╮
原生JS和jQuery实现banner图滚动那些事
原文地址：http://www.cnblogs.com/sin0/p/7537019.html