1.这是我第一次发博客咯！我也就学了半年java的小菜鸟一只，看到本文章后不喜勿喷，有什么需要改进的地方请多多指教！2.今天和大家分享一下2D banner，代码如下，注释都有。因为本地测试和上传到博客环境不太一样，样式变化比较大，样式表写的比较罗嗦！还望见谅！3.我仅仅是在ch ...
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='/images/loading.gif' data-original="http://images.cnblogs.com/cnblogs_com/zhangbin-java/872130/t_1.jpg" width=600 height=250/></li> <li><img src='/images/loading.gif' data-original="http://images.cnblogs.com/cnblogs_com/zhangbin-java/872130/t_2.jpg" width=600 height=250/></li> <li><img src='/images/loading.gif' data-original="http://images.cnblogs.com/cnblogs_com/zhangbin-java/872130/t_3.jpg" width=600 height=250/></li> <li><img src='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：2D banner
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
