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>

上一个

下一个

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 ...

随机推荐

kafka
2016-11-13 20:48:43 简单说明什么是kafka? Apache kafka是消息中间件的一种,我发现很多人不知道消息中间件是什么,在开始学习之前,我这边就先简单的解释一下什么是消息 ...
Openfire阶段实践总结
从3月开始研究Openfire,其实就是要做一套IM系统,也正是这个原因才了解到Openfire.之前还真没想过有这么多的开源产品可以做IM,而且也没想到XMPP这个协议竟然如何强大.看来还是标准为先 ...
Visual Studio 2015 移动跨平台开发初体验
微软换了新 CEO 后变化很大,对我们团队最有利的消息就是 Visual Studio 2015 支持移动应用跨平台开发. 还记不记得很早之前,Xamarin 宣布与微软成为合作伙伴的消息.显然,Xa ...
Gulp探究折腾之路(I)
前言: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...
同步与异步 & 阻塞与非阻塞
在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式: 一.同步所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用 ...
SQL统计
--按周统计SELECT TOP 10DATENAME(year,AddDate) 年,DATENAME(week,AddDate) 周,COUNT(1) 单量,SUM(total) 总金额,AVG( ...
Laravel - 安装与配置
有多重途径可以安装Laravel,下面是通过composer安装laravel的方法.Composer 是 PHP 的一个依赖管理工具.它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们.c ...
Compile FreeCAD on Windows
Compile FreeCAD on Windows eryar@163.com 1.Introduction FreeCAD是一个参数化的三维造型软件,主要用于任意大小的实际模型的设计.参数化的建模 ...
Chrome调试中的奇技淫巧
网上有关Chrome调试的文章一搜一大堆,本文主要记录一下自己平时经常用并且又比较冷门的一些技巧. 打开Chrome调试工具 1.打开控制台的情况下,长按页面的“刷新”按钮可以选择按何种方式刷新(有正 ...
DDD及相关概念
领域:指一个具体的应用范围,比如电商.订票管理.会议管理等,实现某一领域的功能,与其对应的商业领域一致.譬如Contoso会议管理系统从两个方面来阐述(1)系统概览:销售会议座位.创建新会议[领域的活 ...

2D banner

2D banner的更多相关文章

随机推荐

热门专题