今天萌生了一个写博客的想法，主要是想对一段时间所学的东西进行总结，加深印象，也方便自己日后查看。。。。
在实现前要弄明白的知识点：
文档流：将窗体自上而下分成一行行，并在每一行中按从左到右的顺序排放元素
一、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;
}
效果图：
