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. Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映

    前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...

  2. 【月入41万】Mono For Android中使用百度地图SDK

    借助于Mono For Android技术,.Net开发者也可以使用自己熟悉的C#语言以及.Net来开发Android应用.由于Mono For Android把Android SDK中绝大部分类库都 ...

  3. raspberrypi（树莓派）上安装mono和jexus，运行asp.net程序

    参考网址: http://www.linuxdot.net/ http://www.cnblogs.com/mayswind/p/3279380.html http://www.raspberrypi ...

  4. 【腾讯Bugly干货分享】微信终端跨平台组件 Mars 系列 - 我们如约而至

    导语 昨天上午,微信在广州举办了微信公开课Pro.于是,精神哥这两天的朋友圈被小龙的"八不做"刷屏了.小伙伴们可能不知道,下午,微信公开课专门开设了技术分论坛.在分论坛中,微信开源 ...

  5. 超炫的HTML5粒子效果进度条 VS 如何规范而优雅地code

    最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜!   // _this.ch){ _this.particles.splice(i, 1); } }; this.Particle.p ...

  6. Lesson 19 Sold out

    Text 'The play may begin at any moment,' I said. 'It may have begun already,' Susan answered. I hurr ...

  7. Netty5使用自签证书实现SSL安全连接

    这次使用的Netty是最新的5.0 Alpha2版本,下载地址是:http://dl.bintray.com/netty/downloads/netty-5.0.0.Alpha2.tar.bz2,发布 ...

  8. mybatis Generator生成代码及使用方式

    本文原创,转载请注明:http://www.cnblogs.com/fengzheng/p/5889312.html 为什么要有mybatis mybatis 是一个 Java 的 ORM 框架,OR ...

  9. Android SQLite调试

    调试SQLite的神器,再也不用自己去打Log了,只需简单的几个命令. adb shell setprop log.tag.SQLiteLog V adb shell setprop log.tag. ...

  10. ABP源码分析五：ABP初始化全过程

    ABP在初始化阶段做了哪些操作,前面的四篇文章大致描述了一下. 为个更清楚的描述其脉络,做了张流程图以辅助说明.其中每一步都涉及很多细节,难以在一张图中全部表现出来.每一步的细节(会涉及到较多接口,类 ...