jQuery+CSS3实现图片的无缝轮播

今天萌生了一个写博客的想法，主要是想对一段时间所学的东西进行总结，加深印象，也方便自己日后查看。。。。

   在实现前要弄明白的知识点：

   文档流：将窗体自上而下分成一行行，并在每一行中按从左到右的顺序排放元素

   一、Css的一些属性

      1. position属性：

          static：默认值，元素将按照正常的文档流规则排列。

          relative：相对定位，元素仍处于正常的文档流中，但可以通过left、top、right、bottom来改变元素位置，参考点为原来位置的border外边框四角。原来位置将保留，不被其他元素所占据。

          absolute：绝对定位，元素脱离正常文档流，可通过left、top、right、bottom来改变元素位置，参考点为父级元素的padding外边框。元素不再占据原来的位置。

          fixed：固定定位，元素脱离正常文档流，可通过left、top、right、bottom来改变元素位置，参考点为浏览器的可视区域的四角。元素不再占据原来的位置。

          * html{

            background-image:url(about:blank);

            background-attachmen:fixed;

          }可解决拖动滚动条元素闪烁的bug

      2. overflow属性：规定当内容溢出元素框时发生的事情。

          visible：默认值，内容不会被修剪，会呈现在元素框外。hidden：溢出部分不可见。scroll：浏览器会显示滚动条以便查看其余内容。

          auto：如果内容被修剪，浏览器会显示滚动条以便查看其余内容。inherit：从父元素继承overflow属性的值。

      3. line-height属性：设置行间的距离（行高）。line-height与font-size的差值为行间距。

      4. display属性：规定元素应该生成的框的类型。举几个常用的值：

         none：不显示。    inline：显示为内联元素，元素前后没有换行符。block：显示为块级元素，元素前后会带有换行符。

         inline-block：行内块元素。list-item：元素会为列表显示。

   二、jQuery函数

         .clone():克隆当前匹配元素集合的一个副本，并以jQuery对象的形式返回。

         .append()：向每个匹配元素内部的末尾位置追加指定的内容。内容可以是：html字符串，DOM元素（或数组）、jQuery对象、函数(返回值)。相对的函数是prepend()；

         .addClass():向被选元素添加一个或多个类，用removeClass()来移除。

         .hover():当鼠标移动到该元素上响应对应的事件

         setInterval()：每隔一定的时间就调用函数，方法或对象

         .animate()：执行css属性的自定义动画。$(selector).animate(styles,speed,easing,callback)

                                $(selector).animate(styles,options) options 可选，规定动画的额外选项，可以是speed --设置动画的速度，easing--规定要使用的easing函数，callback--  规定动画完成之后要执行的函数。。。。

主要代码：

index.html 主要代码：

<div class="banner"><ul class="img"><li><a><img src="5.jpg"></a></li><li><a><img src="2.jpg"></a></li><li><a><img src="3.jpg"></a></li><li><a><img src="4.jpg"></a></li></ul><ul class="num"><li></li><li></li><li></li><li></li></ul><div class="btn btn_l"><</div><div class="btn btn_r">></div></div>

js代码：

$(function(){var i=0;/* 复制第一张图片*/var clone=$(".banner .img li").first().clone();$(".banner .img").append(clone);var size=$(".banner .img li").size();$(".banner .num li").first().addClass("on");/*鼠标移动到下方的点时轮播*/$(".banner .num li").hover(function(){i=$(this).index();move();})var t=setInterval(function(){i++;move();},2000);/*鼠标离开图片时自动轮播*/$(".banner").hover(function(){clearInterval(t);$(".banner .btn").show(500);}, function(){t =setInterval(function(){i++;move();},2000);$(".banner .btn").hide(500);})/*左按钮轮播*/$(".banner .btn_l").click(function(){i++;move();})/*右按钮轮播*/$(".banner .btn_r").click(function(){i--;move();})/*图片移动逻辑*/function move() {if (i == size) {$(".banner .img").css({left: 0});i = 1;}if (i == -1) {$(".banner .img").css({left: -(size - 1) * 220});i = size - 2;}$(".banner .img").animate({left: -i * 220}, 500);$(".banner .num li").eq(i % (size - 1)).addClass("on").siblings().removeClass("on");}})

style.css

</pre><pre name="code" class="css">*{    margin:0px;    padding: 0px;    font-size: 12px;    font-style: normal;    list-style: none;}.banner{    margin: 100px auto;    border:2px solid  #000;    width:220px;    height:147px;    overflow: hidden;    position: relative;}.banner .img{    width: 5000px;    position: absolute;    left: 0px;    top: 0;}.banner .img li{    float:left;}.banner .num{    position: absolute;    width:100%;    bottom:10px;    left:0;    text-align: center;    font-size: 0px;}.banner .num li{    width: 6px;    height: 6px;    background: #888;    border-radius: 50%;    display: inline-block;    margin:0 2px;    cursor: pointer;}.banner .num li.on{    background-color: #F60;}.banner .btn{    width: 20px;    height: 30px;    background: rgba(0,0,0,0.5);    position: absolute;    top:50%;    margin-top: -15px;    cursor: pointer;    text-align: center;    line-height: 30px;    color: #fff;    font-size: 20px;    font-family: "宋体";    display: none;}.banner .btn_l{left:0}.banner .btn_r{right: 0;}

效果图：