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

所以自己花了些时间，自己来写了个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. 折腾iPhone的生活——通过设置使iPhone更省电

    入手了iPhone5s,上手感觉iPhone没有过去省电了,可能是iOS7的关系,也有可能是我一直在下应用的关系,但是iPhone5s那1500mA的电池的确是有点真的不那么够用的样子,通过设置来省电 ...

  2. [Java] Java IO 概况

    Java IO 是 Java 的一套 API, 用于读入和写出数据(输入和输出).Java IO API 位于 java.io package.实际上 java.io package 没有解决所有的输 ...

  3. zoj 2734 Exchange Cards【dfs+剪枝】

    Exchange Cards Time Limit: 2 Seconds      Memory Limit: 65536 KB As a basketball fan, Mike is also f ...

  4. android_小总结_方法过时的兼容处理

    随着android系统的升级,有些过时的方法已经不再使用,但是又要兼容老的版本,所以这个时候可以使用反射来处理下 举个列子pull_to_refresh 中有个方法找不到==initializeScr ...

  5. java对象数组的概述和使用

    1 public class Student 2 { 3 // 成员变量 4 private String name; 5 private int age; 6 7 // 构造方法 8 public ...

  6. 基于NPOI开源框架写的ExcelHelper【转载】

    namespace ExcelTest { using System; using System.Collections.Generic; using System.Data; using Syste ...

  7. ssl https服务 需要 php5.3以上

    php 5.2 升级 5.3 http://wdlinux.cn/bbs/viewthread.php?tid=37512&highlight=5.3 默认的升级不支持 pdo 升级前编辑升级 ...

  8. iOS开发中关于UIImage的知识点总结

    UIImage是iOS中层级比较高的一个用来加载和绘制图像的一个类,更底层的类还有 CGImage,以及iOS5.0以后新增加的CIImage.今天我们主要聊一聊UIImage的三个属性: image ...

  9. Android 颜色渲染(三) Shader颜色渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. 相信看过在上一篇中提到的三篇文章后,大家已经对颜色处理方面有更深的体会. 之前讲到颜色渐变的效果, 具体怎么做呢,这就需要应用颜色渲染. 首先要介 ...

  10. location.href的用户总结

    *.location.href 使用方法: top.location.href="url"          在顶层页面打开url(跳出框架) self.location.href ...