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

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

下面我就直接贴上代码了

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=1024" />

<meta name="description" content="" />

<meta name="Keywords" content="" />

<title>cfjc</title>

<!--[if lt IE 9]><script type="text/javascript" src="http://www.ruifox.com/resouce/js/company/html5.js"></script><![endif]-->

<style type="text/css">

.left{float:left;}

.right{float:right;}

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

.clearfloat{zoom:1}

body{margin:0; padding:0;}

ul{margin:0; padding:0;}

.wp {width:1000px; margin:0 auto;position:relative;}

li{list-style:none;}

a{text-decoration:none;}

a:hover{text-decoration:underline;}

.nobrder{border-right:none;}

#banner{width:100%; height:500px; position:relative;}

#banner ul {position:relative; min-width:4000px;height: 500px;z-index: 0}

.bnnwp {position:relative;overflow:hidden; width:100%;  z-index:40;}

#banner ul li{float:left; min-width:1000px;  height:500px;}

#banner ul .b1{background:#423134 url(../images/banner01.jpg) no-repeat center center;}

#banner ul .b2 {background:#45239A;}

#banner ul .b3 {background:#45123A;}

#banner ul .b4{background:#46193A;}

#banner .nextbtn{position:absolute; top:40%;right:50px; z-index:43}

#banner .prvebtn{position:absolute; top:40%;left:50px;z-index:43}

.nextbtn{width:22px; height:43px; background:url(../images/next_hover.png) no-repeat; cursor:pointer; font-size:28px; color:#fff;}

.nextbtn:hover{ background:url(../images/next.png) no-repeat;}

.prvebtn{width:22px; height:43px; background:url(../images/prev.png) no-repeat;cursor:pointer; font-size:28px; color:#fff;}

.prvebtn:hover{ background:url(../images/prev_hover.png) no-repeat;}

#bancontr{position:absolute;bottom:20px; right:100px;z-index:42;}

.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);}

.heighlight_tip .current{background:#006ba4; no-repeat;}

</style>

</head>

<body>

<section id="banner">

<div class="bnnwp"><ul class="clearfloat">

             <li style="background: url("http://chengfei-en.brandmarketingsite.com/uploadfile/2014/0106/20140106014754577.jpg") no-repeat center "></li>

        　  <li style="background: url("http://chengfei-en.brandmarketingsite.com/uploadfile/2014/0106/20140106041757808.jpg") no-repeat  center"></li>

       　　<li style="background: url("http://chengfei-en.brandmarketingsite.com/uploadfile/2014/0106/20140106041812272.jpg") no-repeat  center"></li>

       　　<li style="background: url("http://chengfei-en.brandmarketingsite.com/uploadfile/2014/0106/20140106041820216.jpg") no-repeat  center"></li>

 　　 </ul>

</div>

<div class="prvebtn"><</div>

<div class="nextbtn">></div>

<div id="bancontr">

     <div class="heighlight_tip">

           <span class="current" ></span>

           <span></span>

           <span></span>

           <span></span>

           <div style="clear:both"></div>

      </div>

</div>

</section>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

var index="";

var timer="";

var index="";

var leng=$("li").size();

testLiw();                                                        //banner ——UL宽度设置；     用于自适应屏幕宽度！

$(window).resize(function() {

testLiw();

});

function testLiw(){

     Lwith=$("body").width();

     xl=(leng+2)*Lwith;

    $("#banner ul").width(xl);

    $("#banner ul li").width(Lwith);

    showpicSet(index);

  }

var sWidth=$("li").width(Lwith);

$("#banner ul").css("width", Lwith*(leng+2)); 　　　　　　　　　　 //设置ul的宽度;

$("#banner ul").prepend($("#banner ul li:last").clone());        //为了实现滑动更好的效果你懂的、

$("#banner ul").append($("#banner ul li:eq(1)").clone());

$("#banner ul").css("left", -Lwith+"px");                               //初始化幻灯片的位置！

$(".heighlight_tip span").mouseover(function(){

      index=$(".heighlight_tip span").index(this);

      showpic(index);

    }).eq(0).click();                                      //class="current"       初始化按钮位置！

$(".prvebtn").click(function(){prve();});

$(".nextbtn").click(function(){next();});

function next(){

           if(index==leng-1){

           index=0;

           showlast();

               }else{

               index++;

               showpic(index);    }} ; //下一页

function prve(){

     if(index==0){index=leng-1;

               showfirst();

               }

               else{

               index--;

               showpic(index);}}     //上一页

function showpicSet(index){                                                                                  //我也不知道为什么把这个函数写在这下面了，--用来调整在幻灯片播放过程中，自适应屏幕本身的宽度。

     var nowLeft= (-index-1)*Lwith;

     $(".bnnwp ul").stop(true,false).css('left',nowLeft);

}

function showpic(index){

        var nowLeft= (-index-1)*Lwith;

        $("#banner ul").stop(true,true).animate({'left':nowLeft},700);

        $(".heighlight_tip span").removeClass("current").eq(index).addClass("current");

    }

    function showlast(){                                                                                                              //最后一张跳到第一张的函数

        var nowLeft=(-leng-1)*Lwith;

        $("#banner ul").stop(true,false).animate({'left':nowLeft},700,function(){

                $("#banner ul").css('left',-Lwith+'px');

        })

        $(".heighlight_tip span").removeClass("current").eq(0).addClass("current");

    }

function showfirst(){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//第一张跳到最后一张的函数

        var nowleft=(-leng)*Lwith;

        $("#banner ul").stop(true,false).animate({'left':"0px"},700,function(){

            $("#banner ul").css('left',nowleft+'px');

        })

        $(".heighlight_tip span").removeClass("current").eq(leng-1).addClass("current");

    }

$("#banner").hover(function(){

        clearInterval(timer);},

        function(){timer=window.setInterval(function(){next();},6000);    }).mouseout();

</script>

</body>

</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. C++之函数指针

    函数指针常用的有三类 1.指向普通函数的函数指针 2.指向类中静态成员函数的函数指针 3.指向类的成员函数的函数指针 一.指向普通函数的函数指针 #include <iostream> u ...

  2. Bzoj 1703: [Usaco2007 Mar]Ranking the Cows 奶牛排名 传递闭包,bitset

    1703: [Usaco2007 Mar]Ranking the Cows 奶牛排名 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 323  Solved ...

  3. 实现自己的脚本语言ngscript之四：代码生成

    最近的进度 ngscript测试代码 function c1(a, b, c, d) { this.a = 1; this.b = new array(); this.b[0] = 1; this.b ...

  4. android ROM备份和还原，再也不用当心刷到垃圾ROM，而还原不了原有系统

    安卓刷机后如何还原以前ROM 和系统备份,本教程为大家介绍刷机后如何还原到以前的ROM 和系统备份. 很多人,看到了好多新的rom,包括测试版的新rom,心里痒痒的.想刷一刷.尝尝鲜,结果刷完,感觉新 ...

  5. rnqoj-82-又上锁妖塔-dp

    又是一个敢想就敢做的题目... 同时记录更新两个状态 dp[i] :第i层是飞上去的 df[i]  :第i层是走上去的 dp[i]=min(df[i-1],df[i-2]); df[i]=min(dp ...

  6. 【机房系统知识小结】微软自带RDLC报表，数据汇总设计

    在做机房系统报表的时候,借鉴 八期崔成龙学长的博客< VB.NET rdlc 报表的使用>,照虎画猫的敲了一遍,但是在“汇总项”中,出现了一点小问题. 具体的设计方法在这里就不做介绍了,请 ...

  7. 在Mapper中进行循环判断

    1.在Bo中将值保存在list中

  8. 匿名类型和Object转换

    本文转载:http://www.cnblogs.com/JustRun1983/archive/2012/05/13/2497997.html net中的匿名类型非常好用, 但是开发中遇到一个问题,当 ...

  9. MST最小生成树及Prim普鲁姆算法

    MST在前面学习了Kruskal算法,还有一种算法叫做Prim的.这两者的区别是Prim算法适合稠密图,比如说鸟巢这种几乎所有点都有相连的图.其时间复杂度为O(n^2),其时间复杂度与边的数目无关:而 ...

  10. android 27 ListView

    效果: 上图中ArrarAdapter是数组的适配器,CursorAdapter是游标适配器,用于操作数据库的数据. ListView是垂直列表,数据源是集合或者数组,这些View都是安卓里的Adap ...