你的位置:首页 > Java教程

[Java教程]2D banner


1.这是我第一次发博客咯!我也就学了半年java的小菜鸟一只,看到本文章后不喜勿喷,有什么需要改进的地方请多多指教!

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