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. nginx代理https站点（亲测）

    nginx代理https站点(亲测) 首先,我相信大家已经搞定了nginx正常代理http站点的方法,下面重点介绍代理https站点的配置方法,以及注意事项,因为目前大部分站点有转换https的需要所 ...

  2. OpenSUSE下编译安装OpenFoam

    在不是Ubuntu系统下安装OpenFoam,需要采用编译安装的方式.以下以OpenSuSE为例进行编译安装. 1 软件包准备 需要下载两个程序包: OpenFOAM-4.x-version-4.1. ...

  3. angular中使用ngResource模块构建RESTful架构

    ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入 ...

  4. 2000条你应知的WPF小姿势 基础篇<8-14>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师,对C#和WPF有着极深的热情.最为出色的是他维护了两个博客:2,000Things You Should Know ...

  5. CSharpGL(38)带初始数据创建Vertex Buffer Object的情形汇总

    CSharpGL(38)带初始数据创建Vertex Buffer Object的情形汇总 开始 总的来说,OpenGL应用开发者会遇到为如下三种数据创建Vertex Buffer Object的情形: ...

  6. Entity Framework 6 Recipes 2nd Edition（11-6）译 -> 从一个”模型定义”函数里返回一个复杂类型

    11-6.从一个”模型定义”函数里返回一个复杂类型 问题 想要从一个”模型定义”函数返回一个复杂类型 解决方案 假设我们有一个病人(patient)和他们访客(visit)的模型,如 Figure 1 ...

  7. ajax基础学习

    AJAX即"Asynchronous JavaScript and XML",意思是异步JavaScript和XML,是指一种创建交互式网页的网页开发技术. 虽然现在很少有人去自己 ...

  8. 查看Windows下引起Oracle CPU占用率高的神器-qslice

    前言: qslice是一个win2000的工具包,能分析进程的cpu占用率,我们用于分析oracle的性能 这是绿色的软件无需安装. 我们经常会碰到oracle的CPU占用居高不下,无法快速定位到问题 ...

  9. JavaScript权威设计--JavaScript变量，作用域，声明提前(简要学习笔记四)

    1.宿主对象与宿主环境 宿主对象:由ECMAScript实现的宿主环境提供的对象,可以理解为:浏览器提供的对象.所有的BOM和DOM都是宿主对象.   宿主环境:一般宿主环境由外壳程序创建与维护,只要 ...

  10. SQL多表连接查询（详细实例）

    转载博客:joeleo博客(http://www.xker.com/page/e2012/0708/117368.html) 本文主要列举两张和三张表来讲述多表连接查询. 新建两张表: 表1:stud ...