jQuery图片无缝滚动效果

快乐打工仔 分类:实例代码

jQuery图片无缝滚动效果属于前端实例代码,有关更多实例代码大家可以查看

图片滚动效果在众多网站都要应用,尤其是企业或者商城之类的站点,可以有效的进行产品展示,也使网站呈现一种动态的感觉。

代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<title>犀牛前端部落</title> 
<style type="text/css"> 
*{ 
  margin:0; 
  padding:0; 
} 
ul,li{list-style:none} 
.main_wrap{ 
  padding:50px; 
  width:1000px; 
  margin:0 auto; 
  background:#f9f9f9; 
} 
.pic_wrap{ 
  margin:0 auto; 
  position:relative; 
  overflow:hidden; 
  padding:10px; 
  width:580px; 
  height:100px; 
  border:1px solid #eee; 
  background:#fff; 
} 
.pic_inner  { 
  position:absolute; 
  overflow:hidden; 
} 
.pic_ul  { 
  float:left; 
  white-space:nowrap; 
  overflow:hidden; 
} 
.pic_ul li  { 
  float:left; 
  margin-left:10px; 
  width:200px; 
  height:100px; 
  display:inline; 
  background-color:green; 
  text-align:center; 
  line-height:100px; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  var $s_area=$('.pic_inner'); 
  var $s_li=$('.pic_inner').find('li'); 
  var $c_pic=$('.pic_ul').clone(); 
  var sum_width=($s_li.width()+10)*$s_li.length; 
   
  $s_area.width(sum_width*2); 
  $('.pic_inner').append($c_pic);  
  var i=0; 
  var flag=setInterval(play,10); 
  $("#scrollPic").mouseover(function(){ 
    clearInterval(flag); 
  }) 
  $("#scrollPic").mouseout(function(){ 
    flag=setInterval(play,30) 
  }) 
  function play(){ 
    $s_area.css("left",i); 
    i-=1; 
    if(Math.abs(parseInt($s_area.css("left")))>sum_width){i=0;} 
  } 
}) 
</script> 
</head> 
<body> 
<div class="main_wrap"> 
   <div class="pic_wrap" id="scrollPic"> 
    <div class="pic_inner"> 
       <ul class="pic_ul clearfix"> 
        <li class="green">one</li> 
        <li class="grey">two</li> 
        <li class="blue">three</li> 
        <li class="yellow">four</li> 
      </ul> 
     </div> 
  </div> 
</div> 
</body> 
</html>

以上代码实现了图片无缝滚动效果,当然这里为了方便演示,这里使用了因为数字替代了图片,下面介绍一下实现过程:

实现原理:

ul中的li元素是用来存放图片,尽管这里使用文字替代。这里将ul克隆一份放在之前的ul后面,并且将ul的父元素pic_inner元素宽度设置为两个ul所占用的宽度(占用宽度并不一定就是width值)之和,并且pic_inner采用的是绝对定位,并且绝对定位的参考对象是它的父元素,于是就可以通过不间断的设置pic_inner元素的left属性值,就可以实现图片的滚动的效果了。之所以能够实现无缝效果,关键在于对ul的克隆,这样当第一个ul滚动的时候,第二个ul能够很好的接续第一个的滚动,否则将会出现以下状况:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<title>犀牛前端部落</title> 
<style type="text/css"> 
*{ 
  margin:0; 
  padding:0; 
} 
ul,li{list-style:none} 
.main_wrap{ 
  padding:50px; 
  width:1000px; 
  margin:0 auto; 
  background:#f9f9f9; 
} 
.pic_wrap{ 
  margin:0 auto; 
  position:relative; 
  overflow:hidden; 
  padding:10px; 
  width:580px; 
  height:100px; 
  border:1px solid #eee; 
  background:#fff; 
} 
.pic_inner { 
  position:absolute; 
  overflow:hidden; 
} 
.pic_ul { 
  float:left; 
  white-space:nowrap; 
  overflow:hidden; 
} 
.pic_ul li { 
  float:left; 
  margin-left:10px; 
  width:200px; 
  height:100px; 
  display:inline; 
  background-color:green; 
  text-align:center; 
  line-height:100px; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  var $s_area=$('.pic_inner'); 
  var $s_li=$('.pic_inner').find('li'); 
  var sum_width=($s_li.width()+10)*$s_li.length; 
      
  $s_area.width(sum_width*2); 
  var i=0; 
  var flag=setInterval(play,10); 
     
  function play(){ 
    $s_area.css("left",i); 
    i-=1; 
    if(Math.abs(parseInt($s_area.css("left")))>sum_width){i=0;} 
  } 
     
  $("#scrollPic").mouseover(function(){ 
    clearInterval(flag); 
  }) 
  $("#scrollPic").mouseout(function(){ 
    flag=setInterval(play,30) 
  }) 
}) 
</script> 
</head> 
<body> 
<div class="main_wrap"> 
   <div class="pic_wrap" id="scrollPic"> 
    <div class="pic_inner"> 
       <ul class="pic_ul"> 
        <li>one</li> 
        <li>two</li> 
        <li>three</li> 
        <li>four</li> 
      </ul> 
     </div> 
  </div> 
</div> 
</body> 
</html>

注意:以上编辑器并不能完成演示,请复制到本机测试。

以上代码删除了克隆ul的代码,这样当滚动到一定尺寸之后,后面会出现空白。

代码分析:

(1).$s_area=$('.pic_inner')获取class属性值为pic_inner'的元素。

(2).$s_li=$('.pic_inner').find('li')获取pic_inner元素的li元素几何。

(3).sum_width=($s_li.width()+10)*$s_li.length获取ul元素所占用的宽度值。

(4).$s_area.width(sum_width*2)将ul元素的父元素宽度设置为两个ul元素所占用宽度的两倍。

(5).var i=0初始化一个变量,供设置left属性值之用。

(6).var flag=setInterval(play,10)每隔10毫秒执行一次play函数,并且返回一个唯一的标识值。

(7).play()函数内部可以通过css()函数设置pic_inner元素的left属性值,并且没执行一次此函数,用于设置left值的i值都会减一,然后通过if语句判断,如果向左滚动的尺寸超过ul的宽度,那么就会重置pic_inner元素left属性值。

(8).$("#scrollPic").mouseover()用于规定当鼠标放在scrollPic元素的时候,滚动停止,$("#scrollPic").mouseout()规定当鼠标离开scrollPic元素时候,滚动重新开始。

jQuery图片无缝滚动效果,这样的场景在实际项目中还是用的比较多的,关于jQuery图片无缝滚动效果就介绍到这了。

回复

我来回复
  • 暂无回复内容