FORK ME

console 命令行工具 X clear

                    
>
console
$.fn.prepare_slider = function(){	
		var x_pos = 0;
		var li_items_n = 0;	
		var right_clicks = 0;		
		var left_clicks = 0;					
		var li_col = $("#slider_list > li");		
		var li_width = li_col.outerWidth(true);		
		var viewWindow = Math.round($('.block-slider').width()/li_width);
		
		li_col.each(function(index){			
			x_pos += $(this).outerWidth(true);
			li_items_n++;								
		})	
		
		right_clicks = li_items_n - viewWindow;
		total_clicks = li_items_n - viewWindow;		
		
		$('#slider_list').css('position','relative');
		$('#slider_list').css('left','0px');
		$('#slider_list').css('width', x_pos+'px');
		
		var is_playing = false;
		var completed = function() { is_playing = false; }
		
		$('#left_but').click( function(){									
			cur_offset = $('#slider_list').position().left;
			if (!is_playing){						
				if (left_clicks > 0) {
						is_playing = true; $('#slider_list').animate({'left': cur_offset + li_width + 'px'}, 700, "linear", completed); 
						right_clicks++; 
						left_clicks--;
					} 
					else {
						is_playing = true;
						$('#slider_list').animate({'left':    -li_width*total_clicks	+ 'px'}, 700, "linear", completed); 
						right_clicks = 0;
						left_clicks = total_clicks;
					}
			}
		});		

		$('#right_but').click( function(){
			if (!is_playing){			
				cur_offset = $('#slider_list').position().left;			
			 	if (right_clicks > 0) {
						is_playing = true; 
						$('#slider_list').animate({'left': cur_offset - li_width + 'px'},700, "linear", completed );
						right_clicks--; left_clicks++; 
				} 
				else { 
						is_playing = true; $('#slider_list').animate({'left':    0	+ 'px'},700, "linear", completed ); 
						left_clicks = 0;
						right_clicks = total_clicks;
					}			 
			}
		});	
		
	}

$.fn.over = function(){						
	$(this).hover(
	   function () {
	 	 $(this).addClass("over");
	   },
	   function () {
	 	 $(this).removeClass("over");
	   }
	 );		
   }
   $(function(){
		$().prepare_slider(); 
		$('#slider_list > li').over();
		//=======intro================
		var slider_link = $('#right_but');
		var slider_link_index = 1;
		var slider_count = $('#slider_list > li').size();
		var time_prepare_slider = null;	

		function slider_intro(){
				slider_link.trigger('click');
				slider_link_index++;
			    time_prepare_slider = setTimeout(function(){slider_intro()}, 1000); //select change time
		}
		time_prepare_slider = setTimeout(function(){slider_intro()}, 1000);
		
		$('#left_but').hover(
		   function () {
			 clearTimeout(time_prepare_slider);		 
		   },
		   function () {
			 time_prepare_slider = setTimeout(function(){slider_intro()}, 1000);
		   }
		);
		
		$('#right_but').hover(
		   function () {
			 clearTimeout(time_prepare_slider);
		   },
		   function () {
			 time_prepare_slider = setTimeout(function(){slider_intro()}, 1000);  
		   }
		);
	});
<div class="cms-home">
	<div class="indent-col-main">
		<div class="block-slider">
			<div class="anythingSlider">
				<ul id="slider_list" class="products-grid">
					<li class="item"> 
						<a class=product-image title="Lorem ipsum dolor sit" href="#">
							<img alt="Lorem ipsum dolor sit" src="http://www.jq22.com/demo/jquery-huadong20150805/images/prod.jpg" width=170 height=257>
						</a>					
					</li>
					<li class=item>
						<a class=product-image title="Lorem ipsum dolor sit 2" href="#">
							<img alt="Lorem ipsum dolor sit 2" src="http://www.jq22.com/demo/jquery-huadong20150805/images/prod_2.jpg" width=170 height=257>
						</a>
					</li>
					<li class=item>
						<a class=product-image title="Lorem ipsum dolor sit 4" href="#">
							<img alt="Lorem ipsum dolor sit 4" src="http://www.jq22.com/demo/jquery-huadong20150805/images/prod_3.jpg" width=170 height=257>
						</a>
					</li>
					<li class=item>
						<a class=product-image title="Lorem ipsum dolor sit 8" href="#">
							<img alt="Lorem ipsum dolor sit 8" src="http://www.jq22.com/demo/jquery-huadong20150805/images/prod_4.jpg" width=170 height=257>
						</a>
					</li>
					<li class=item>
						<a class=product-image title="Lorem ipsum dolor sit 7" href="#">
							<img alt="Lorem ipsum dolor sit 7" src="http://www.jq22.com/demo/jquery-huadong20150805/images/prod_5.jpg" width=170 height=257>
						</a>
					</li>
					<li class="item"> 
						<a class=product-image title="Lorem ipsum dolor sit" href="#">
							<img alt="Lorem ipsum dolor sit" src="http://www.jq22.com/demo/jquery-huadong20150805/images/prod_3.jpg" width=170 height=257>
						</a>
					</li>					
				</ul>
			</div>
		</div>
		<a id=left_but class="box-left"><i></i></a>
		<a id=right_but class="box-right"><i></i></a>
	</div>
</div>
.cms-home .indent-col-main { position: relative; padding-left: 35px; padding-right: 35px; width: 930px; margin: 0px auto; }	
.cms-home .block-slider { position: relative;width: 930px; overflow: hidden; }
.cms-home .block-slider ul {list-style-type: none; margin: 0px;padding: 0; height: 90px; overflow: hidden;position: relative;}
.cms-home .block-slider li.item { position: relative; text-align: center; margin: 0px; width: 235px; float: left; height: 90px; display: block;}
.cms-home .block-slider .product-image { margin: 0px auto; width: 235px; display: block; height: 90px;text-decoration: none }	
.cms-home img {width: 225px;height: 90px;margin-right: 10px;border: none;}
.cms-home .products-grid:after { line-height: 0; display: block; height: 0px; clear: both; font-size: 0px; overflow: hidden; content: "." }
.cms-home .box-left,.cms-home .box-right {position: absolute;z-index: 999; margin: 0px; width: 25px;height: 90px;top: 0px; cursor: pointer;background:#d2d2d2;}
.cms-home .box-left{left: 0px;}
.cms-home .box-right{right: 0px }
.cms-home .box-left i,.cms-home .box-right i{background:#d2d2d2 url(http://oboiylrjj.bkt.clouddn.com/prevnext.png) no-repeat scroll 0 0;display: inline-block;height: 17px;margin-top: 36.5px;width: 10px;margin-left: 7.5px;}
.cms-home .box-right i{background-position: 0 -28px;}
.cms-home .box-left:hover,.cms-home .box-right:hover{background:#2f8bcd;}
.cms-home .box-left:hover i,.cms-home .box-right:hover i{background-color: #2f8bcd;}