SOURCE

console 命令行工具 X clear

                    
>
console
        var Index=0;
        var timer=null;
        var arrImg=["https://m.360buyimg.com/mobilecms/s1125x549_jfs/t16990/91/1072453031/195915/8de4233f/5ab9ec02N8e64711d.jpg","https://img1.360buyimg.com/da/s1138x556_jfs/t19018/104/1214766473/141963/d4c52b1c/5ac0a619N0d6e140c.jpg","https://m.360buyimg.com/mobilecms/s1138x556_jfs/t17302/242/1358363894/204942/119224cc/5ac495a7Nbd2d2d2d.jpg","https://m.360buyimg.com/mobilecms/s1138x556_jfs/t18193/325/1258624400/159622/c5037965/5ac4a381Na029e9b3.jpg"];
        timer=setInterval(function(){
        	autoLoop()
        },500)
        
        $(".container").mouseover(function(){
        	 clearInterval(timer)
        }).mouseout(function(){
        	timer = setInterval( function(){
				autoLoop();			
			}, 500 );
        })
       
        slide();
		function slide () {
	        $(".icon li").click(function(){
	        	var index=$(this).index();
		 	    $("slide img").attr("src",arrImg[index]);
	        	$(".icon li").eq(index).addClass('active').siblings("li").removeClass('active')	;
	        	Index = index;
	        })
       }
        
        function toggleSlide(){
        	$(".slide img").attr( "src", arrImg[Index] );
        	$(".icon li").eq(Index).addClass('active').siblings().removeClass('active')	
        }
           
        function autoLoop(){
        	Index++;
        	if(Index == arrImg.length){
        		Index=0
        	}
        	toggleSlide();
        }
	<div class="container">
		<div class="slide">
			<img src="https://m.360buyimg.com/mobilecms/s1125x549_jfs/t16990/91/1072453031/195915/8de4233f/5ab9ec02N8e64711d.jpg" style="display:block;">	
		</div>
		<div class="icon">
			<ul>
				<li class="active"><a href="javascript:;">1</a></li>
				<li><a href="javascript:;">2</a></li>
				<li><a href="javascript:;">3</a></li>
				<li><a href="javascript:;">4</a></li>
				<li><a href="javascript:;">5</a></li>
			</ul>	
		</div>
	</div>	
	* {
		margin: 0px;
		padding: 0px;
	}
	ul,li {
		list-style-type: none;
	}
	a {
		text-decoration: none;
		color:#000;
	}
	img {
		border: none;
		display: none;
	}
	.container {
		width: 760px;
		margin: 20px auto;
		position: relative;
	}
	.slide {
		width: 760px;
		height: 320px;
	}
	.slide img{
		width: 100%;
		height: 100%;
	}
	.icon {
		position: absolute;
		right: 50px;
		bottom: 10px;
	}
	.icon li {
		float: left;
		margin-left: 20px;
		background: green;
		padding: 5px 10px;
		cursor:pointer;
	}
	.icon li.active {
		background: yellow;
	}