原生JS和jQuery实现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>");});// 设置各种cssthis.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> <

转载于:https://www.cnblogs.com/sin0/p/7537019.html