滚动

4.16.1 上下滚动

HTML代码

<div id="marquee" class="marquee">
  <div id="holder">
    <ul>
      <li>第一条数据</li>
      <li>第二条数据</li>
      <li>第三条数据</li>
    </ul>
  </div>
</div>

CSS代码

.marquee{height:22px;overflow:hidden;line-height:22px}

JS代码

!function ($) {
	$.Huimarquee = function(height,speed,delay){
		var scrollT;
		var pause = false;
		var ScrollBox = document.getElementById("marquee");
		if(document.getElementById("holder").offsetHeight <= height) return;
		var _tmp = ScrollBox.innerHTML.replace('holder', 'holder2')
		ScrollBox.innerHTML += _tmp;
		ScrollBox.onmouseover = function(){pause = true}
		ScrollBox.onmouseout = function(){pause = false}
		ScrollBox.scrollTop = 0;
		var start = function(){
			scrollT = setInterval(scrolling,speed);
			if(!pause) ScrollBox.scrollTop += 2}
		var scrolling = function(){
			if(ScrollBox.scrollTop % height != 0){
				ScrollBox.scrollTop += 2;
				if(ScrollBox.scrollTop >= ScrollBox.scrollHeight/2) ScrollBox.scrollTop = 0}
			else{
				clearInterval(scrollT);
				setTimeout(start,delay)}
		}
		setTimeout(start,delay)}
}(window.jQuery);

注意： 如果页面中引用了h-ui.js，无需重复粘贴上面脚本代码。

调用代码：

$.Huimarquee(22,30,3000); /*移动高度,移动速度,间隔时间*/

4.16.2 左右自动滚动，带控制

HTML代码

<div class="rollpic cl"> <a href="javascript:void(0)" class="prev"></a>
  <div class="rollpicshow">
    <ul>
      <li><img width="170" height="143" title="" src="temp/1.jpg"></li>
      <li><img width="170" height="143" title="" src="temp/2.jpg"></li>
      <li><img width="170" height="143" title="" src="temp/3.jpg"></li>
      <li><img width="170" height="143" title="" src="temp/4.jpg"></li>
      <li><img width="170" height="143" title="" src="temp/5.jpg"></li>
    </ul>
  </div>
  <a href="javascript:void(0)" class="next"></a>
</div>

CSS代码

.rollpic .prev,.rollpic .next{display:block; height:38px; width:38px; cursor:pointer; float:left; background:url(../images/unslider-arrow2.png) no-repeat 0 0; margin-top:70px}
.rollpic .prev{background-position:0 0; margin-right:5px}
.rollpic .prev:hover{background-position:0 -38px}
.rollpic .next{background-position:0 -76px;margin-left:5px}
.rollpic .next:hover{background-position:0 -114px}
.rollpicshow{float:left; border:solid 1px #ddd}
.rollpicshow li{padding:10px}

JS代码

引入jQuery 和 jcarousellite

jcarousellite.js文件需要单独下载并引用，下载地址 /lib-h-ui-net/jcarousellite.min.js

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

调用代码：

$(function(){
	$(".rollpicshow").jCarouselLite({
		auto: 2000, /*自动播放间隔时间*/
		speed: 500, /*速度*/
		btnNext:".next",/*向前滚动*/
		btnPrev:".prev",/*向后滚动*/
		visible:3 /*显示数量*/
	})});

4.16.3 自动上下滚动，带控制

CSS代码

.scrollText{height:170px;overflow:hidden}/*容器高度必须设置，而且溢出隐藏*/

JS代码

引入jQuery 和 jquery.textSlider

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

调用代码：

$(function(){
	$("#scrollDiv").textSlider({
		line:2, /*一次滚动条数，跟li有关*/
		speed:500, /*速度*/
		timer:3000  /*间隔时间*/
	})});