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

所以自己花了些时间，自己来写了个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. javascript弹出框打印某个数值时，弹出NaN？（not a number）

    一.NaN:表示not a number null 未定义或空字符串 undefined 对象属性不存在 或是声明了变量但从未赋值. 二.出现这种情况有(1)此常数的值是零被零除所得到的结果. (2) ...

  2. IAP内购 返回的产品数量为0

    上个月搞IAP,提交到appstore审核被拒,根据附件截图 可以知道是请求产品信息的时候,产品数量返回0了. 返回产品数量为0 要么是Itunes Connect 里面的Contracts Tax ...

  3. Bluetooth 4.0之Android 解说

     Android平台包括了对蓝牙网络协议栈的支持,它同意一个蓝牙设备跟其它的蓝牙设备进行无线的数据交换.应用程序通过Android蓝牙API提供訪问蓝牙的功能. 这些API会把应用程序无线连接到其 ...

  4. 微软ASP.NET网站部署指南（10）：迁移至SQL Server

    1.  综述 第2章的部署SQL Server Compact和第9章的部署数据库更新里解释了为什么终于要升级到完整版SQL Server .本章节将告诉你怎样来做. SQL Server Expre ...

  5. golang 学习笔记

    golan 声明的变量必须要用到? 语法 a,b:=2323; b为 bool 类型 结构体的赋值 需要用到逗号分隔字段 并且最后一个字段后也必须加上逗号 这和 JavaScript 的对象不一样哦 ...

  6. [Oracle] Data Pump 详细使用教程（5）- 命令交互模式

    [Oracle] Data Pump 详细使用教程(1)- 总览 [Oracle] Data Pump 详细使用教程(2)- 总览 [Oracle] Data Pump 详细使用教程(3)- 总览 [ ...

  7. java面试32问

    第一,谈谈final, finally, finalize的区别. 第二,Anonymous Inner Class (匿名内部类) 是否可以extends(继承)其它类,是否可以implements ...

  8. Java基础知识强化之集合框架笔记32：集合之可变参数的概述和使用

    1. 可变参数的概述和使用: (1)可变参数:定义方法的时候不知道该定义多少个参数(2)格式:     修饰符  返回值类型  方法名(数据类型… 变量名){   }  注意: 这里的变量其实是一个数 ...

  9. 在Linux下用netstat查看网络状态、端口状态

    在Linux下用netstat查看网络状态.端口状态 在linux一般使用netstat 来查看系统端口使用情况步. netstat命令是一个监控TCP/IP网络的非常有用的工具,它可以显示路由表.实 ...

  10. 9.28noip模拟试题

    1.栅栏迷宫 田野上搭建了一个黄金大神专用的栅栏围成的迷宫.幸运的是,在迷宫的边界上留出了两段栅栏作为迷宫的出口.更幸运的是,所建造的迷宫是一个“完美的”迷宫:即你能从迷宫中的任意一点找到一条走出迷宫 ...