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的更多相关文章

  1. 2D、3D形变

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } span.Apple-tab-span { ...

  2. CSS 3学习——transform 2D转换

    首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...

  3. UWP简单示例(三)：快速开发2D游戏引擎

    准备 IDE:VisualStudio 2015 Language:VB.NET/C# 图形API:Win2D MSDN教程:UWP游戏开发 游戏开发涉及哪些技术? 游戏开发是一门复杂的艺术,编码方面 ...

  4. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  5. egret3D与2D混合开发，画布尺寸不一致的问题

    egret3d的GUI目前还没有,在做3d游戏的时候没有UI可用,只能使用egret2d的EUI组件库,egret3d与egret2d混合开发,canvas3d的大小与位置与canvas2d并没有重合 ...

  6. 模仿东京首页banner轮播，京东新闻上下滚动动画实现（动画实现）

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...

  7. 想着模仿京东微信首页呢，banner滚动搞定了，写到了一半了

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞 ...

  8. IOS 2D游戏开发框架 SpriteKit-->续(创建敌对精灵)

    这次包括之后讲的spritekit 我都会围绕一个案例来说,这个案例就是一个简单的2d飞机大战游戏,今天这里我讲创建敌对精灵,就是敌对飞机,敌对飞机不停的被刷新到屏幕上.....当然这里涉及到的类其实 ...

  9. 2D动画的制作

    通过css3的transform  transition可以实现平移,旋转,缩放,拉伸等效果 1.缩放 -webkit-transform: scale(1); -moz-transform: sca ...

随机推荐

  1. 如何设计一门语言（七）——闭包、lambda和interface

    人们都很喜欢讨论闭包这个概念.其实这个概念对于写代码来讲一点用都没有,写代码只需要掌握好lambda表达式和class+interface的语义就行了.基本上只有在写编译器和虚拟机的时候才需要管什么是 ...

  2. linux安装mvn后提示权限不够

    Maven - 环境配置 Maven 是一个基于 Java 的工具,所以要做的第一件事情就是安装 JDK. 系统要求 项目 要求 JDK Maven 3.3 要求 JDK 1.7 或以上Maven 3 ...

  3. ★Kali信息收集~2.Whois ：域名信息

     Web地址:http://whois.chinaz.com/ | http://www.whois.net/ 软件参数:whois  常用命令:whois 域名 (重点看whois server和R ...

  4. SQL Server 系列文章快速导航（SWF版）

    一.前言 在博客园写博客不自不觉已经有5个年头了,一开始只是为了记录工作中遇到的问题和解决办法,后来写的文章不自不觉的侧重在SQL Server方面的技术文章,在2014年1月终于鼓起勇气申请了微软S ...

  5. 【Win 10 应用开发】TCP通信过程

    基于TCP协议的通信,估计大伙儿都不陌生的,以前玩.net或玩C++的时候应该玩得很多吧.现在老周简单介绍一下在RT中如何用. TCP是基于连接的,所以,肯定有一方是监听者,通常称服务端或服务器,它负 ...

  6. Matlab 利用参数方程绘制空心球体

    基本原理: 实质为利用球面参数方程,利用网格化数据绘制 x=R*sin(theta)*cos(phi) y=R*sin(theta)*sin(phi) z=R*cos(theta) 绘制函数: fun ...

  7. C# 复制PDF页面到另一个PDF文档

    C# 复制PDF页面到另一个PDF文档 有时候我们可能有这样一个需求,那就是把PDF页面从一个PDF文档复制到另一个PDF文档中.由于PDF文档并不像word文档那样好编辑,因此复制也相对没有那么容易 ...

  8. 在Windows Server 2012中如何快速开关桌面上经典的“计算机、我的文档”等通用图标

    我们都知道,在Windows Server 2012系列的服务器版本中都已经引入了Modern的现代界面作为默认的用户交互界面,同时满足视觉一致化,新版的服务器管理程序也做成了扁平化.因此传统的计算机 ...

  9. JavaScript ： 零基础打造自己的类库

    写作不易,转载请注明出处,谢谢. 文章类别:Javascript基础(面向初学者) 前言 在之前的章节中,我们已经不依赖jQuery,单纯地用JavaScript封装了很多方法,这个时候,你一定会想, ...

  10. JavaWeb——tomcat安装及目录介绍

    一.web web可以说,就是一套 请求->处理->响应 的流程.客户端使用浏览器(IE.FireFox等),通过网络(Network)连接到服务器上,使用HTTP协议发起请求(Reque ...