jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)

jQuery不间断滚动效果是网页中常见的一种滚动方式，其可以模拟百度新闻支持文字、图片、垂直滚动等效果，非常实用。下面就是一份完整的攻略，包含了实现该滚动效果的详细步骤，以及示例代码。

1. HTML结构

首先，我们需要在HTML中设置一个容器，并且在容器中插入滚动元素。以下是一个简单的HTML结构示例：

<div id="scrollBox">
  <ul>
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li>文本内容1</li>
    <li>文本内容2</li>
  </ul>
</div>

这个HTML结构中，我们设置了一个id为scrollBox的div容器，其中包含一个ul列表，列表里包含了四个li元素，每个li元素里有一张图片或一段文本内容。这些元素都将在滚动效果中参与滚动。

2. CSS样式

接下来，我们需要对滚动盒子进行样式设置。

#scrollBox{
  overflow:hidden;
  position:relative;
  width:300px;
  height:200px;
}

我们将滚动盒子的overflow属性设置为hidden，这样我们可以隐藏超出盒子大小的内容。接着，我们设置了相对定位的position值，这是因为我们需要在滚动盒子里运用绝对定位来设置每个滚动元素的位置。最后，我们设置了滚动盒子的宽和高。

#scrollBox ul{
  list-style:none;
  position:absolute;
  top:0;
  left:0;
}

接下来，我们要对滚动盒子中的ul元素进行样式设置。我们将它们的list-style设为none，这样我们就可以隐藏项目符号。再次使用了绝对定位，我们将它们的top值设为0，使得每个元素都可以从最上方开始滚动。

#scrollBox ul li{
  float:left;
  margin-right:5px;
  width:100px;
  height:70px;
}

最后，我们对ul内的每个li元素进行样式设置。将其float设置为left，这样它们就可以在一排内展示。margin-right属性设置了项目之间相隔5px的距离。我们还为每个元素设置了100px的宽和70px的高。

3. jQuery实现

现在，我们已经为滚动效果设置好了HTML结构和CSS样式，在此之上，我们可以开始使用jQuery来实现滚动效果了。

//获取滚动盒子并且获取滚动元素
var $scrollBox = $('#scrollBox');
var $itemList = $scrollBox.find('ul');

//克隆一份滚动元素，使滚动效果不间断
$itemList.append($itemList.html());

//获取滚动元素的总个数
var itemNum = $itemList.children().length;

//设置滚动元素总长度
$itemList.css('width',(100*itemNum)+'px');

//设置定时器，控制滚动
var index = 0;
setInterval(function(){
  if(index>=itemNum-1){
    index = 0;
    $itemList.css('left','0px');
  }else{
    index++;
  }
  $itemList.animate({'left':-100*index+'px'},500);
},2000);

上述代码片段分为四个部分。首先，我们通过jQuery获取了scrollBox和itemList两个元素。然后，我们在itemList末尾添加一个完全一样的副本，这样我们就可以实现滚聚效果的持续性。接着，我们获取了itemList里的子元素个数，也就是整个滚动序列的长度，并且设置了itemList的总长度。

最后，我们使用了一个定时器，每隔两秒让滚动序列向左移动100px的距离。如果序列滚动到最后一个元素后，就将序列的left值重设为0，从头开始循环滚动。

4. 示例说明

下面是两个实现了不同滚动效果的代码 示例。

示例1：支持文字和图片垂直滚动

<div id="scrollBox">
  <ul>
    <li><img src="image1.jpg">文本内容1</li>
    <li><img src="image2.jpg">文本内容2</li>
    <li><img src="image3.jpg">文本内容3</li>
    <li><img src="image4.jpg">文本内容4</li>
  </ul>
</div>

#scrollBox{
  overflow:hidden;
  position:relative;
  width:300px;
  height:150px;
}
#scrollBox ul{
  list-style:none;
  position:absolute;
  top:0;
  left:0;
}
#scrollBox ul li{
  float:left;
  margin-right:5px;
  width:300px;
  height:70px;
  line-height:70px;
  padding-left:5px;
}
#scrollBox ul li img{
  float:left;
  margin-right:5px;
  width:60px;
  height:60px;
}

var $scrollBox = $('#scrollBox');
var $itemList = $scrollBox.find('ul');

$itemList.append($itemList.html());

var itemNum = $itemList.children().length;

$itemList.css('width',(300*itemNum)+'px');

var index = 0;
setInterval(function(){
  if(index>=itemNum-1){
    index = 0;
    $itemList.css('top','0px');
  }else{
    index++;
  }
  $itemList.animate({'top':-70*index+'px'},500);
},2000);

在这个示例中，我们使用了一个宽高各为300px和70px的li元素作为滚动元素。每个li元素中都包含了一张60px*60px的图片和一段文本内容。我们对滚动盒子和滚动元素都进行了样式设置。

示例2：支持图片水平滚动

<div id="scrollBox">
  <ul>
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
    <li><img src="image4.jpg"></li>
  </ul>
</div>

#scrollBox{
  overflow:hidden;
  position:relative;
  width:300px;
  height:175px;
}
#scrollBox ul{
  list-style:none;
  position:absolute;
  top:0;
  left:0;
}
#scrollBox ul li{
  float:left;
  margin-right:5px;
  width:100px;
  height:100px;
}

var $scrollBox = $('#scrollBox');
var $itemList = $scrollBox.find('ul');

$itemList.append($itemList.html());

var itemNum = $itemList.children().length;

$itemList.css('width',(100*itemNum)+'px');

var index = 0;
setInterval(function(){
  if(index>=itemNum-1){
    index = 0;
    $itemList.css('left','0px');
  }else{
    index++;
  }
  $itemList.animate({'left':-100*index+'px'},500);
},2000);

在这个示例中，我们使用了100px*100px的图片作为滚动元素，对滚动盒子和滚动元素进行了样式设置。这个示例的滚动方式是水平滚动，代码与示例1相似，只是滚动的距离由垂直改为了水平。

小结

通过这份攻略，我们成功实现了jQuery不间断滚动效果，支持文字、图片、垂直和水平滚动。这种滚动方式在一些新闻、公告头条之类的场景非常常见，能够为网页效果提供很好的增强。希望这份攻略能够对你有所帮助。