Question

用jquery实现两个li中的图片并列无缝向上滚动的代码 没有按钮控制，鼠标移上去停止滚动，离开开始滚动。

如下面的图片 两个图片向上滚动要代码！！！！

Answer 1

1. 下面的使用Jquery实现，使用的时候请引用Jquery.js，向上滚动看看js那里提示修改left为up即可。
   

   <style type="text/css">
   
   .scrollleft{width:491px; float:left; padding-top:15px;}
   .scrollleft li{float:left;display:inline;width:195px;text-align:center;}
   
   </style>

   <script>

   $.fn.imgscroll = function(o){
   	var defaults = {
   		speed: 40,
   		amount: 0,
   		width: 1,
   		dir: "left"
   	};
   	o = $.extend(defaults, o);
   	
   	return this.each(function(){
   		var _li = $("li", this);
   		_li.parent().parent().css({overflow: "hidden", position: "relative"}); //div
   		_li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul
   		_li.css({position: "relative", overflow: "hidden"}); //li
   		if(o.dir == "left") _li.css({float: "left"});
   		
   		//初始大小
   		var _li_size = 0;
   		for(var i=0; i<_li.size(); i++)
   			_li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true);
   		
   		//循环所需要的元素
   		if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"});
   		_li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone());
   		_li = $("li", this);
   
   		//滚动
   		var _li_scroll = 0;
   		function goto(){
   			_li_scroll += o.width;
   			if(_li_scroll > _li_size)
   			{
   				_li_scroll = 0;
   				_li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll });
   				_li_scroll += o.width;
   			}
   				_li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount);
   		}
   		
   		//开始
   		var move = setInterval(function(){ goto(); }, o.speed);
   		_li.parent().hover(function(){
   			clearInterval(move);
   		},function(){
   			clearInterval(move);
   			move = setInterval(function(){ goto(); }, o.speed);
   		});
   	});
   };
   
   $(document).ready(function(){
   
   	$(".scrollleft").imgscroll({
   		speed: 40,    //图片滚动速度
   		amount: 0,    //图片滚动过渡时间
   		width: 1,     //图片滚动步数
   		dir: "left"   // "left" 或 "up" 向左或向上滚动
   	});
   	
   });

   </script>

   <div class="scrollleft">
                           <ul>
                               <li>
                                   <a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
                               </li>
                               <li>
                                   <a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
                               </li>
                               <li>
                                   <a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
                               </li>
                                 <li>
                                   <a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
                               </li>
                                 <li>
                                   <a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
                               </li>
                                 <li>
                                   <a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
                               </li>
                                 <li>
                                   <a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
                               </li>
                                 <li>
                                   <a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
                               </li>
                           </ul>
                       </div>

追问

怎么一遍也没滚动到头 就闪现到第二遍了？也不是无缝啊

追答

固定的宽度的大小，你所放的图片至少要大于当前的宽度，图片中有间距你只要改样式就行了