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

所以自己花了些时间，自己来写了个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. UIView hitTest的原理

    [转自:http://blog.sina.com.cn/s/blog_59fb90df0101ab26.html] UIView 两个方法: - (UIView *)hitTest:(CGPoint) ...

  2. bzoj 2286 [Sdoi2011]消耗战（虚树+树上DP）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2286 [题意] 给定一棵树,切断一条树边代价为ci,有m个询问,每次问使得1号点与查询 ...

  3. 三大跨平台网盘--google driver

    背景介绍 Google Drive,美国谷歌公司于2012年4月24日正式推出的一项云存储服务,可以向用户提供5GB的免费存储空间,同时还可以付费扩容. 准备工作 google帐号--帐号注册 软件- ...

  4. windows调用ubuntu下的sublimeText2环境搭建

    部署需求: windows: windows 7 32 sp1 32位: linux :ubuntu 12.04 LTS 64位: 环境: windows安装:xmanager 4 linux安装:g ...

  5. [git] git 的基本认知

    版本管理 ( Version Control ) 版本管理系统是一个记录文件变更的系统,让你在一段时间后可以恢复指定版本的文件.版本管理系统大致可分为三类:独立的本地版本管理系统.中心化版本管理系统. ...

  6. 你不一定能做对的JavaScript闭包面试题

    由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...

  7. redis基本用法

    java连接redis基本用法 package Redis;    import java.util.HashMap;  import java.util.List;  import java.uti ...

  8. linux —— 学习笔记（文件、文件夹操作）

    目录:1.常用的文件文件夹操作 2.文件属性的设置 1.常用的文件文件夹操作 mkdir  创建文件夹 -p 如果指定 a/b/c 时 a .b 不存在,一起创建出来 cp       复制文件或文件 ...

  9. java 新手

    public class hello{ public static void main(String args[]){ int a=23,b=32,c=34; int s=Math.max(a,c); ...

  10. OSChina 的全文搜索设计说明 —— 索引过程

    http://www.oschina.net/question/12_71591 言: OSChina 的搜索做得并不好,很久之前一直想在细节方面进行改造,一直也没什么好的思路.但作为整体的结构或许对 ...