2D banner
1.这是我第一次发博客咯!看到本文章后不喜勿喷,有什么需要改进的地方请多多指教!
2.今天和大家分享一下2D banner,代码如下,注释都有。因为本地测试和上传到博客环境不太一样,样式变化比较大,样式表写的比较罗嗦!还望见谅!
3.我仅仅是在chrome浏览器上测试通过,所以请大家用chrome浏览器查看可能效果更好,其他浏览器兼容可能会有问题!
4.最后,效果图在底部
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="Keywords" content=""/> <meta name="Description" content=""/> <title> 2D Banner</title> <style type="text/css"> *{padding:0;margin:0;} body{ font-family:"微软雅黑"; background:url("http://images.cnblogs.com/cnblogs_com/zhangbin-java/872130/t_11.jpg"); background-size:cover } #banner ul{ margin-left:0; } #banner ul li{ list-style:none; } #banner_index ul li { list-style:none; } .banner{ padding:0; margin:0; border:1px solid red; width:600px; height:250px; margin:30px auto; overflow:hidden; position:relative; } .banner ul{ width:1000%; height:250px; position:absolute; } .banner li{ float:left; } .banner a{ display:block; width:52px; height:30px; background:#633; color:#fff; font-size:16px; text-decoration:none; line-height:30px; text-align:center; } .banner .prev{ position:absolute; top:48%; left:10px; z-index:1; } .banner .next{ position:absolute; top:48%; right:10px; } .banner_index ul{ position:relative; top:-65px; left:47%; } .banner_index ul li{ width:20px; height:20px; border-radius:100%; color:#000; font-size:16px; text-align:center; float:left; margin:5px; cursor:pointer; line-height:20px; } .bag_nor{ background:#8EA221; } .bag{ background:#29921E; } </style> </head> <body> <div class="banner" id="banner"> <a href="javascript:void(0);" class="prev">上一个</a> <ul> <li><img src="http://images.cnblogs.com/cnblogs_com/zhangbin-java/872130/t_1.jpg" width=600 height=250/></li> <li><img src="http://images.cnblogs.com/cnblogs_com/zhangbin-java/872130/t_2.jpg" width=600 height=250/></li> <li><img src="http://images.cnblogs.com/cnblogs_com/zhangbin-java/872130/t_3.jpg" width=600 height=250/></li> <li><img src="http://images.cnblogs.com/cnblogs_com/zhangbin-java/872130/t_4.jpg" width=600 height=250/></li> </ul> <a href="javascript:void(0);" class="next">下一个</a> </div> <div class="banner_index" id="banner_index"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <script type="text/javascript" src="http://files.cnblogs.com/files/zhangbin-java/jquery-1.11.3.js"></script> <script type="text/javascript"> $(function(){ var $li = $(".banner_index ul").find("li"); $li.addClass("bag_nor");//给轮播的四个按钮添加默认样式 var $li_1 = $li.eq(0); $li_1.addClass("bag");//第一张图片加载的时候就轮播了,默认样式不同 var len = $(".banner ul").find("li").length;//获取图片的个数 var index = 0; var width = $(".banner ul li").eq(0).width();//获取图片的宽度(每张图一样宽) /*给“下一个”按钮添加单机事件*/ $(".banner").find(".next").on("click",function(){ index++; if(index == len)index = 0;//当轮播到最后一张时,重头开始轮播 /***两种不同的轮播效果***/ //$(".banner ul").css("left",-width*index); $(".banner ul").animate({left:-width*index},200); /**点击“上一个” 、“下一个”按钮时,轮播图下方的四个按钮颜色也应该跟着变化 **/ $li.removeClass("bag");//每轮播一次就把当前的按钮样式去掉 $li.eq(index).addClass("bag");//给下一个按钮添加样式 }); /*给“上一个”按钮添加单机事件*/ $(".banner").find(".prev").on("click",function(){ index--; if(index < 0)index = len-1; //$(".banner ul").css("left",-width*index); $(".banner ul").animate({left:-width*index},200); $li.removeClass("bag"); $li.eq(index).addClass("bag"); }); /*给下方的四个轮播按钮添加单击事件*/ $(".banner_index ul").find("li").each(function(){ $(this).click(function(){ $li.removeClass("bag"); $(this).addClass("bag"); index = ($(this).text())-1; //$(".banner ul").css("left",-width*index) $(".banner ul").animate({left:-width*index},200); }) }); }); </script> </body> </html>
- 1
- 2
- 3
- 4
//
2D banner的更多相关文章
- 2D、3D形变
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } span.Apple-tab-span { ...
- CSS 3学习——transform 2D转换
首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...
- UWP简单示例(三):快速开发2D游戏引擎
准备 IDE:VisualStudio 2015 Language:VB.NET/C# 图形API:Win2D MSDN教程:UWP游戏开发 游戏开发涉及哪些技术? 游戏开发是一门复杂的艺术,编码方面 ...
- 赠书:HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
- egret3D与2D混合开发,画布尺寸不一致的问题
egret3d的GUI目前还没有,在做3d游戏的时候没有UI可用,只能使用egret2d的EUI组件库,egret3d与egret2d混合开发,canvas3d的大小与位置与canvas2d并没有重合 ...
- 模仿东京首页banner轮播,京东新闻上下滚动动画实现(动画实现)
接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...
- 想着模仿京东微信首页呢,banner滚动搞定了,写到了一半了
接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞 ...
- IOS 2D游戏开发框架 SpriteKit-->续(创建敌对精灵)
这次包括之后讲的spritekit 我都会围绕一个案例来说,这个案例就是一个简单的2d飞机大战游戏,今天这里我讲创建敌对精灵,就是敌对飞机,敌对飞机不停的被刷新到屏幕上.....当然这里涉及到的类其实 ...
- 2D动画的制作
通过css3的transform transition可以实现平移,旋转,缩放,拉伸等效果 1.缩放 -webkit-transform: scale(1); -moz-transform: sca ...
随机推荐
- 烂泥:VMWare Workation双网卡配置IP地址
本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb 前几天给一个客户做远程项目实施,客户那边的服务器是Windows OS的,我们这边的业务 ...
- C#跨平台手机应用开发工具Xamarin尝试 与Eclipse简单对比
Xamarin 支持使用C#开发基于Android.IOS.WindowsPhone应用开发,最大特点C#+跨平台,详细说明问度娘. 安装 研究 想体验研究的点击查看页面 Xamarin For Vi ...
- Spark笔记:复杂RDD的API的理解(上)
本篇接着讲解RDD的API,讲解那些不是很容易理解的API,同时本篇文章还将展示如何将外部的函数引入到RDD的API里使用,最后通过对RDD的API深入学习,我们还讲讲一些和RDD开发相关的scala ...
- 企业IT管理员IE11升级指南【16】—— 使用Compat Inspector快速定位IE兼容性问题
企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...
- 零基础在线制作Windows Phone 8 应用
任何用户(不管你是否会编程),只要你有浏览器,都可以使用 Windows Phone App Studio (下文中用App Studio指代) 快速制作出一个属于你的Windows Phone的应用 ...
- Entity Framework 6 Recipes 2nd Edition(10-4)译 -> 从存储过程返回一个复杂类型
10-4. 从存储过程返回一个复杂类型 问题 想在方法中使用一个返回复杂类型的存储过程 解决方案 假设我们已经有如Figure 10-3.所示的模型,该Employee (雇员)模型包含Employe ...
- STM32的入侵检测是干什么用的
[引]:侵入检测的作用就是监测侵入事件,保护重要的数据不被非法窃取. 你的数据是保存在RAM里的;但是一掉电RAM里的数据就没了;有一块地方,后备电池相关的一块RAM的数据却放不掉(除非电池没电了); ...
- MailKit---状态更改和删除
当我们拉取邮件列表,并展示邮件后需要打开邮件,同时标识本邮件状态为已读状态,或者我们直接删除邮件.下面介绍基本的应用. 首先了解邮件的所有枚举状态:MailKit.MessageFlags包括:(No ...
- 根据xml文件名获取xml数据并转化为实体。
1.定义一个xml文件. <?xml version="1.0" encoding="utf-8" ?> <UserManager xmlns ...
- Atitit. 破解 拦截 绕过 网站 手机 短信 验证码 方式 v2 attilax 总结
Atitit. 破解 拦截 绕过 网站 手机 短信 验证码 方式 v2 attilax 总结 1. 验证码的前世今生11.1. 第一代验证码 图片验证码11.2. 第二代验证码 用户操作 ,比如 ...