jQuery简易图片无缝滚动特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

6 22 8



特效描述:简易图片 无缝滚动。jQuery简单的图片无缝滚动,鼠标悬停图片显示标题效果代码。 设置图片高度统一,宽度可以自适应。 

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

2. HTML代码

	<div class="one">
       <ul>
       	<li><a href="javascript:;"><img src="images/a1.png" alt=""><span>hi~hi!我是孝文</span></a></li><!-- 神啊!请赐给大师兄一个女盆友吧!-->
       	<li><a href="javascript:;"><img src="images/a2.png" alt=""><span>hi~hi!我们是单身汪</span></a></li>
       	<li><a href="javascript:;"><img src="images/a3.png" alt=""><span>hi~hi!我是小辉</span></a></li>
       	<li><a href="javascript:;"><img src="images/a4.png" alt=""><span>hi~hi!我是Rin</span></a></li>
       </ul>
	</div>
    <div class="two">
       <ul>
       	<li><a href="javascript:;"><img src="images/pic1.png" alt=""><span>LOGO1</span></a></li>
       	<li><a href="javascript:;"><img src="images/pic2.png" alt=""><span>LOGO2</span></a></li>
       	<li><a href="javascript:;"><img src="images/pic3.png" alt=""><span>LOGO3</span></a></li>
       	<li><a href="javascript:;"><img src="images/pic4.png" alt=""><span>LOGO4</span></a></li>
       	<li><a href="javascript:;"><img src="images/pic5.png" alt=""><span>LOGO5</span></a></li>
       	<li><a href="javascript:;"><img src="images/pic6.png" alt=""><span>LOGO6</span></a></li>
       </ul>
	</div>
<script>
/* 有的浏览器第一次加载不会动画  刷新当前页面一次 可以不加的*/
function reurl(){ 
	   url = location.href;var times = url.split("?"); 
	   if(times[1] != 1){url += "?1"; self.location.replace(url);} 
}
 onload=reurl ;
/* 有的浏览器第一次加载不会动画  刷新当前页面一次 */
$(document).ready(function () {
    var box0 = $(".one"),v0 = 1.5; //这里添加滚动的对象和其速率
	var box1 = $(".two"),v1 = 1;
	Rin(box0,v0);
	Rin(box1,v1); 
		 function Rin($Box,v){//$Box移动的对象,v对象移动的速率
           var $Box_ul = $Box.find("ul"),
               $Box_li = $Box_ul.find("li"),
               $Box_li_span = $Box_li.find("span"),
	           left = 0,
	           s=0,
	           timer;//定时器
			      $Box_li.each(function(index){
			       $($Box_li_span[index]).width($(this).width());//hover
                   s += $(this).outerWidth(true); //即要滚动的长度
			     })
		window.requestAnimationFrame = window.requestAnimationFrame||function(Tmove){return setTimeout(Tmove,1000/60)};
	    window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout;
                  if( s>=$Box.width()){//如果滚动长度超出Box长度即开始滚动,没有的话就不执行滚动
                           $Box_li.clone(true).appendTo($Box_ul);                       
					       Tmove();
						      function Tmove(){
						           //运动是移动left  从0到-s;(个人习惯往左滚)
						           left -= v;
						           if(left <= -s){left = 0;$Box_ul.css("left",left)}else{ $Box_ul.css("left",left) }
					                   timer = requestAnimationFrame(Tmove);   
						      }
					    $Box_ul.hover(function(){cancelAnimationFrame(timer)},function(){Tmove()})    
		          }  
	} 	 	
}) 	
</script>	



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到