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. Mysql - 性能优化之子查询

    记得在做项目的时候, 听到过一句话, 尽量不要使用子查询, 那么这一篇就来看一下, 这句话是否是正确的. 那在这之前, 需要介绍一些概念性东西和mysql对语句的大致处理. 当Mysql Server ...

  2. 简单Linux命令学习笔记

    1.查看进程 ps -ef | grep 关键字       /*关键字为服务名*/ netstat -unltp | grep 关键字        /*关键字为服务名或者是端口均可*/ 2.杀死进 ...

  3. angularJS（6）

    angularJS(6) 一:angularJs的事件. 1.ng-click指令定义了AngularJS点击事件. <div ng-app="myapp" ng-contr ...

  4. TCP通信

    //网络套接字编程实例,服务器端,TCP通信. #include <WinSock2.h> #pragma comment(lib,"ws2_32.lib") #inc ...

  5. 解除win7网络限速.

    在电脑刚买或者系统重装了的时候,win7系统会默认限制20%的网络速度,限制了我们的上网速度,我们可以解决这个限制,让上网变得更快 下面是操作步骤 1.开始>运行 2.输入以下命令,然后确定 g ...

  6. 我的MYSQL学习心得（六） 函数

    我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

  7. IM 去中心化概念模型与架构设计

    今天打算写写关于 IM 去中心化涉及的架构模型变化和设计思路,去中心化的概念就是说用户的访问不是集中在一个数据中心,这里的去中心是针对数据中心而言的. 站在这个角度而言,实际上并非所有的业务都能做去中 ...

  8. Linux CentOS7通过yum命令安装Mono(尝先安装模式)

    前言 经过尝试网上各种安装mono的技术贴,这个安装过程经历了大约2周,尝试了各个版本,几目前博客所描述的所有安装方式.以下内容的安装方式可以为你尝试不同版本的mono.并非正式环境安装标准方式安装. ...

  9. Hadoop4 利用VMware搭建自己的hadoop集群

    前言:       前段时间自己学习如何部署伪分布式模式的hadoop环境,之前由于工作比较忙,学习的进度停滞了一段时间,所以今天抽出时间把最近学习的成果和大家分享一下.       本文要介绍的是如 ...

  10. Thread.Sleep(0) vs Sleep(1) vs Yeild

    本文将要提到的线程及其相关内容,均是指 Windows 操作系统中的线程,不涉及其它操作系统. 文章索引 核心概念 Thread.Yeild       Thread.Sleep(0) Thread. ...