对于我这种菜鸟来讲,刚接触项目。叫我用插件,其实我说插件太臃肿不想用,倒不如说我是看不懂那些插件。。。- -(更愿意自己写点看得懂的代码,顺便也是个学习的过程)

所以自己花了些时间,自己来写了个demo, 效果很简单。(求轻喷-_-)

下面我就直接贴上代码了

  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="viewport" content="width=1024" />
  6. <meta name="description" content="" />
  7. <meta name="Keywords" content="" />
  8. <title>cfjc</title>
  9.  
  10. <!--[if lt IE 9]><script type="text/javascript" src="http://www.ruifox.com/resouce/js/company/html5.js"></script><![endif]-->
  11. <style type="text/css">
  12. .left{float:left;}
  13. .right{float:right;}
  14. .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
  15. .clearfloat{zoom:1}
  16. body{margin:0; padding:0;}
  17. ul{margin:0; padding:0;}
  18. .wp {width:1000px; margin:0 auto;position:relative;}
  19. li{list-style:none;}
  20. a{text-decoration:none;}
  21. a:hover{text-decoration:underline;}
  22. .nobrder{border-right:none;}
  23. #banner{width:100%; height:500px; position:relative;}
  24. #banner ul {position:relative; min-width:4000px;height: 500px;z-index: 0}
  25. .bnnwp {position:relative;overflow:hidden; width:100%; z-index:40;}
  26. #banner ul li{float:left; min-width:1000px; height:500px;}
  27. #banner ul .b1{background:#423134 url(../images/banner01.jpg) no-repeat center center;}
  28. #banner ul .b2 {background:#45239A;}
  29. #banner ul .b3 {background:#45123A;}
  30. #banner ul .b4{background:#46193A;}
  31. #banner .nextbtn{position:absolute; top:40%;right:50px; z-index:43}
  32. #banner .prvebtn{position:absolute; top:40%;left:50px;z-index:43}
  33. .nextbtn{width:22px; height:43px; background:url(../images/next_hover.png) no-repeat; cursor:pointer; font-size:28px; color:#fff;}
  34. .nextbtn:hover{ background:url(../images/next.png) no-repeat;}
  35. .prvebtn{width:22px; height:43px; background:url(../images/prev.png) no-repeat;cursor:pointer; font-size:28px; color:#fff;}
  36. .prvebtn:hover{ background:url(../images/prev_hover.png) no-repeat;}
  37. #bancontr{position:absolute;bottom:20px; right:100px;z-index:42;}
  38. .heighlight_tip span{display:inline-block;*zoom:1; font-size:28px; color:#fff; *display:inline; width:14px;height:14px; border-radius:50%; text-indent:6px; color:#fff; background:#61676C; line-height:21px; margin-left:10px;cursor:pointer; behavior: url(../images/pie/PIE.htc);}
  39. .heighlight_tip .current{background:#006ba4; no-repeat;}
  40. </style>
  41. </head>
  42. <body>
  43. <section id="banner">
  44. <div class="bnnwp"><ul class="clearfloat">
  45. <li style="background: url("http://chengfei-en.brandmarketingsite.com/uploadfile/2014/0106/20140106014754577.jpg") no-repeat center "></li>
  46.   <li style="background: url("http://chengfei-en.brandmarketingsite.com/uploadfile/2014/0106/20140106041757808.jpg") no-repeat center"></li>
  47.   <li style="background: url("http://chengfei-en.brandmarketingsite.com/uploadfile/2014/0106/20140106041812272.jpg") no-repeat center"></li>
  48.   <li style="background: url("http://chengfei-en.brandmarketingsite.com/uploadfile/2014/0106/20140106041820216.jpg") no-repeat center"></li>
  49.    </ul>
  50. </div>
  51. <div class="prvebtn"><</div>
  52. <div class="nextbtn">></div>
  53. <div id="bancontr">
  54. <div class="heighlight_tip">
  55. <span class="current" ></span>
  56. <span></span>
  57. <span></span>
  58. <span></span>
  59. <div style="clear:both"></div>
  60. </div>
  61. </div>
  62. </section>
  63. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  64. <script type="text/javascript">
  65. var index="";
  66. var timer="";
  67. var index="";
  68. var leng=$("li").size();
  69. testLiw(); //banner ——UL宽度设置; 用于自适应屏幕宽度!
  70. $(window).resize(function() {
  71. testLiw();
  72. });
  73.  
  74. function testLiw(){
  75.  
  76. Lwith=$("body").width();
  77. xl=(leng+2)*Lwith;
  78. $("#banner ul").width(xl);
  79. $("#banner ul li").width(Lwith);
  80. showpicSet(index);
  81. }
  82.  
  83. var sWidth=$("li").width(Lwith);
  84. $("#banner ul").css("width", Lwith*(leng+2));            //设置ul的宽度;
  85. $("#banner ul").prepend($("#banner ul li:last").clone()); //为了实现滑动更好的效果你懂的、
  86. $("#banner ul").append($("#banner ul li:eq(1)").clone());
  87. $("#banner ul").css("left", -Lwith+"px"); //初始化幻灯片的位置!
  88.  
  89. $(".heighlight_tip span").mouseover(function(){
  90. index=$(".heighlight_tip span").index(this);
  91. showpic(index);
  92. }).eq(0).click(); //class="current" 初始化按钮位置!
  93.  
  94. $(".prvebtn").click(function(){prve();});
  95. $(".nextbtn").click(function(){next();});
  96.  
  97. function next(){
  98. if(index==leng-1){
  99. index=0;
  100. showlast();
  101. }else{
  102. index++;
  103. showpic(index); }} ; //下一页
  104. function prve(){
  105. if(index==0){index=leng-1;
  106. showfirst();
  107. }
  108. else{
  109. index--;
  110. showpic(index);}} //上一页
  111.  
  112. function showpicSet(index){ //我也不知道为什么把这个函数写在这下面了,--用来调整在幻灯片播放过程中,自适应屏幕本身的宽度。
  113. var nowLeft= (-index-1)*Lwith;
  114. $(".bnnwp ul").stop(true,false).css('left',nowLeft);
  115. }
  116. function showpic(index){
  117. var nowLeft= (-index-1)*Lwith;
  118. $("#banner ul").stop(true,true).animate({'left':nowLeft},700);
  119. $(".heighlight_tip span").removeClass("current").eq(index).addClass("current");
  120. }
  121.  
  122. function showlast(){ //最后一张跳到第一张的函数
  123. var nowLeft=(-leng-1)*Lwith;
  124. $("#banner ul").stop(true,false).animate({'left':nowLeft},700,function(){
  125. $("#banner ul").css('left',-Lwith+'px');
  126. })
  127. $(".heighlight_tip span").removeClass("current").eq(0).addClass("current");
  128. }
  129.  
  130. function showfirst(){                                      //第一张跳到最后一张的函数
  131. var nowleft=(-leng)*Lwith;
  132. $("#banner ul").stop(true,false).animate({'left':"0px"},700,function(){
  133. $("#banner ul").css('left',nowleft+'px');
  134. })
  135. $(".heighlight_tip span").removeClass("current").eq(leng-1).addClass("current");
  136. }
  137.  
  138. $("#banner").hover(function(){
  139. clearInterval(timer);},
  140. function(){timer=window.setInterval(function(){next();},6000); }).mouseout();
  141.  
  142. </script>
  143. </body>
  144. </html>

//自己都觉得代码写的太冗长了,还请各位大神们多多批评啊,帮小弟我指出些错误。。- -

刚接触js不久,自己写的banner幻灯片效果。的更多相关文章

  1. 刚接触js感觉好吃力啊

    我是一个新手,最近刚刚开始学习js这门语言,感觉好难,有一种无从下手的感觉,不知道应该从哪里学习,虽然也看了很多的书,但是对于一个没有计算机基础的人来说,真的是一种煎熬,每一个名词都要去查.万事开头难 ...

  2. turn.js中文API 写一个翻页效果的参数详细解释

    $('.flipbook').turn({     width: 922,     height: 600,     elevation: 50,     gradients: true,     a ...

  3. java工程项目里,在一个包里面,不能出现同名的类名,这问题是刚接触java才会遇到的,特别是新手一般都没有建立包,而是使用默认的,易出现同名的类名,导致eclipse提示错误

    java工程项目里,在一个包里面,不能出现同名的类名,这问题是刚接触java才会遇到的,特别是新手一般都没有建立包,而是使用默认的,易出现同名的类名,导致eclipse提示错误. 问题: 创建了一个工 ...

  4. 刚接触HTML5应该先学哪里才好?

    好吧,话不多说,直接来点干货吧! 刚接触html的小白都感觉摸不着头脑?应该怎么学习呢,其实HTML5可能对于还没有接触过的小白来说会比较的难,听起来也比较新颖.这是个什么骚东西!其实不然,这个就是构 ...

  5. 刚接触SkyLine的一点小收获与感触

    因为刚接触Skyline不到一个星期,也怕把学习到的忘记掉,所以写一点学习到的一些皮毛的东西,赶紧记录一下,怕回头忘记 1.网上关于web端的开发非常多,也有很多牛人分享自己的经验,所以学习起来也相对 ...

  6. JS基于时间戳写的浏览访问人数

    Title:JS基于时间戳写的浏览访问人数  --2013-12-23 14:07 <script language="JavaScript"> var timesta ...

  7. 如何把js的代码写的更加容易维护(一)--面向对象编程

    总是头疼javascript的代码写起来不可维护,那么看看下面的代码: (function (w, $) { var app = { init: function () { var me = this ...

  8. 用node.js从零开始去写一个简单的爬虫

    如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...

  9. 2019前端面试系列——JS高频手写代码题

    实现 new 方法 /* * 1.创建一个空对象 * 2.链接到原型 * 3.绑定this值 * 4.返回新对象 */ // 第一种实现 function createNew() { let obj ...

随机推荐

  1. UnderStand Perspective Rasterization, SV_POSITION(gl_FragCoord) to Pixel, SV mean Systems Value

    Shader "UnderStandPRR" { Properties { _MainTex ("Texture", 2D) = "white&quo ...

  2. Redis教程02——管道(Pipelining)

    请求/响应协议和RTT Redis是一个使用客户端/服务器模型(也被称作请求/响应协议)的TCP服务器. 这说明通常来讲一个一个请求的实现有以下步骤: 客户端发送请求到服务器,并从socket中以堵塞 ...

  3. Conversion between json and object using SBJson lib

    Define two methods in an object class as follows: @interface MyObject : NSObject @property (nonatomi ...

  4. memcached与redis 对比

    一. 综述 读一个软件的源码,首先要弄懂软件是用作干什么的,那memcached和redis是干啥的?众所周知,数据一般会放在数据库中,但是查询数据会相对比较慢,特别是用户很多时,频繁的查询,需要耗费 ...

  5. myisam MySQL 锁问题

    2016-07-23  (点击上方公众号,可快速关注) 来源:阿里云 RDS - 数据库内核组 链接:http://mysql.taobao.org/monthly/2016/03/10/ 前言 最近 ...

  6. 不同车型 不同起步价不同费用的问题(switch语句)

    #include "stdio.h" #include "math.h" main() { int a; float meet,b; printf(" ...

  7. TreeComboBox控件范例

    本文转载:http://www.cnblogs.com/hoodlum1980/archive/2008/01/30/1058140.html 在我印象中有很多各种各样的自定义控件(例如TreeLis ...

  8. cocos2d-x3.0 ListView

    .h #include "cocos2d.h" #include "cocos-ext.h" #include "ui/CocosGUI.h" ...

  9. Hibernate的游离态与持久态转换

    在Hibernate中,一个PO可能经过长时间的操作,session已过时关闭,此时PO已经是一个游离态的对象,这时要转换为持久战态,有下面几种方法: 1.session.saveOrUpdate(o ...

  10. rancher 笔记 之 rancher应用中心

    rancher应用中心 rancher 的应用中心 可以 自定义,在 admin -> catlog 中 指定路劲 rancher的应用中心 就是一个git项目 指定git的路劲的时候 填写的是 ...