图片轮播

不管前端技术如何日新月异，有的需求总是不变的，比如图片轮播

那么如何实现呢？

biubiu~思路来了！

首先，我们理一下需求：

界面上每次展示一张图片，间隔一段时间候展示下一张图片；

咦，这里我们是不是有点想法，很明显需要用到setTimeout。

还有一个需求就是，鼠标移动到图片的index时，切换到这张图片；

那么如何切换呢？

很简单，隐藏当前图片，停止它参与的动画，并使选择index对应的图片进入。

思路清晰了，我们来构建HTML吧！

<div class="main">
    	<div class="preview-list">
			<ul>
				<li>
	            <a href=""><img src="http://images.17173.com/2012/news/2012/08/26/lj0826dm30s.jpg" alt=""></a>
				</li>
				<li>
				<a href=""><img src="http://i0.hdslb.com/bfs/archive/65089d306ddf3d92a1f31ff7b1ab6575835d7798.jpg" alt=""></a>
				</li>
				<li>
				<a href=""><img src="http://i0.hdslb.com/bfs/archive/ed58ff87e8139346e1da668884a738fb7b8d99df.jpg" alt=""></a>
				</li>
				<li><a href=""><img src="http://i0.hdslb.com/bfs/archive/aea1866919699dedb0d6ab8de02606c2690361eb.jpg" alt=""></a>
				</li>
				<li><a href=""><img src="http://i0.hdslb.com/bfs/archive/2f2c6adf9b645c5d08a535c5333669533532c8bd.jpg" alt=""></a>
				</li>
			</ul>
		</div>
		<div class="clear"></div>
		<div class="list-dot">
		    <span class="onselect">1</span>
	        <span>2</span>
	        <span>3</span>
	        <span>4</span>
	        <span>5</span>
		</div>
    </div>

CSS渲染：

.main{
	position: relative;
}
.preview-list ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}
.preview-list {
	position: relative;
	height: 220px;
	width: 440px;
	overflow: hidden;
	margin-top: 30px;
}
.preview-list img {
	height: 220px;
	width: 440px;
}
.preview-list ul li {
	position: absolute;
	float: left;
	list-style: none;
}
.preview-list ul li.select {
	display: block;
}
.clear {
	overflow: hidden;
	clear: both;
	width: 0px;
	height: 0px;
}
.list-dot {
	text-align: center;
	position: absolute;
	left: 250px;
	bottom: 10px;
}
.list-dot span {
	border-radius: 10px;
	font: normal normal bold 12px/15px "Microsoft YaHei";
	color: #FFF;
	margin-left: 5px;
	padding: 3px 6px 3px 6px;
	background-color: #F90;
	cursor: pointer;
}
.list-dot span.onselect {
	background-color: #F00;
}

接下来，大显身手吧！

$(document).ready(function(){
		var time = "";
        var index = 1;
		showimg(index);
         //鼠标移入移出
         $(".list-dot span").hover(function () {
            clearTimeout(time);
            var icon=$(this).text();
            $(".list-dot span").removeClass("onselect").eq(icon-1).addClass("onselect");
            $(".preview-list li").hide().stop(true,true).eq(icon-1).fadeIn("slow");
         }, function () {
            index=$(this).text()> 4 ? 1 :parseInt($(this).text())+1;
            time = setTimeout("showimg(" + index + ")", 3000);
         });
     });

     function showimg(num) {
         index = num;
         $(".list-dot span").removeClass("onselect").eq(index-1).addClass("onselect");
         $(".preview-list li").hide().stop(true,true).eq(index-1).fadeIn("slow");
         index = index + 1 > 5 ? 1 : index + 1;
         time = setTimeout("showimg(" + index + ")", 3000);
     }

具体参考： http://codepen.io/ClayLing/pen/Wpjwoy