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 ...
随机推荐
- vim安装中文帮助手册
安装方法: 在下面的网站下载中文帮助的文件包:$wget http://nchc.dl.sourceforge.net/sourceforge/vimcdoc/vimcdoc-1.5.0.tar. ...
- Dancing Links and Exact Cover
1. Exact Cover Problem DLX是用来解决精确覆盖问题行之有效的算法. 在讲解DLX之前,我们先了解一下什么是精确覆盖问题(Exact Cover Problem)? 1.1 Po ...
- 解决Chrome 下载带半角分号出现net::ERR_RESPONSE_HEADERS_MULTIPLE_CONTENT_DISPOSITION的问题
方式一:添加双引号Response.AddHeader("content-disposition", "attachment; filename=\"" ...
- MongoDB基础
1.概念及特点 说明:由于部分语句中$ 符号无法正常显示,使用¥代表 概念 MongoDB是一个基于文档的分布式的开源的NoSQL数据库,文档的结构为BSON形式,每一个文档都有一个唯一的Object ...
- 进程监控工具supervisor 启动Mongodb
进程监控工具supervisor 启动Mongodb 一什么是supervisor Superviosr是一个UNIX-like系统上的进程监控工具. Supervisor是一个Python开发的cl ...
- 【AutoMapper官方文档】DTO与Domin Model相互转换(中)
写在前面 AutoMapper目录: [AutoMapper官方文档]DTO与Domin Model相互转换(上) [AutoMapper官方文档]DTO与Domin Model相互转换(中) [Au ...
- 腾讯云下安装 nodejs + 实现 Nginx 反向代理
本文将介绍如何给腾讯云上的 Ubuntu Server 12.04 LTS 64位主机安装 node 及 nginx,并简单配置反向代理. 笔者在整个安装过程中遇到不少麻烦(不赘述),如果你希望少踩坑 ...
- Web API 入门指南 - 闲话安全
Web API入门指南有些朋友回复问了些安全方面的问题,安全方面可以写的东西实在太多了,这里尽量围绕着Web API的安全性来展开,介绍一些安全的基本概念,常见安全隐患.相关的防御技巧以及Web AP ...
- 使用T4模板生成不同部署环境下的配置文件
在开发企业级应用的时候,通常会有不同的开发环境,比如有开发环境,测试环境,正式环境,生产环境等.在一份代码部署到不同环境的时候,不同环境的配置文件可能需要根据目标环境不同而不同.比如在开发环境中,数据 ...
- HTML5 & CSS3初学者指南(2) – 样式化第一个网页
介绍 我们已经使用基本的 HTML 编写了一个网页.但是,写出来的 HTML 代码的网页看起来很平淡,没有吸引力. 如何改善这种很平淡的页面呢? 让我们开始使用网页的基本样式来改善页面效果,我们将会使 ...