滚动

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

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

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

$('#marquee').Huimarquee({
  height: 22,
  speed: 3000,
  delay: 30
});

<div class="hui-rollpic clearfix">
  <a href="javascript:void(0)" class="prev"></a>
  <div class="hui-rollpic-body">
    <ul>
      <li><img width="170" height="143" title="" src="http://h-ui.net/temp/1.jpg"></li>
      <li><img width="170" height="143" title="" src="http://h-ui.net/temp/2.jpg"></li>
      <li><img width="170" height="143" title="" src="http://h-ui.net/temp/3.jpg"></li>
      <li><img width="170" height="143" title="" src="http://h-ui.net/temp/4.jpg"></li>
      <li><img width="170" height="143" title="" src="http://h-ui.net/temp/5.jpg"></li>
    </ul>
  </div>
  <a href="javascript:void(0)" class="next"></a>
</div>

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

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

引入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(){
  $(".hui-rollpic .hui-rollpic-body").jCarouselLite({
    auto: 2000, /*自动播放间隔时间*/
    speed: 500, /*速度*/
    btnNext:".next",/*向前滚动*/
    btnPrev:".prev",/*向后滚动*/
    visible:3 /*显示数量*/
  })});

<div id="scrollDiv" style="width:300px;">
  <div class="clearfix text-r"><span class="hui-btn up">&uarr; 向上</span> <span class="hui-btn down">&darr; 向下</span></div>
  <div class="scrollText bk_gray pd-10 mt-10" style="height:170px;min-height:25px;overflow:hidden">
    <ul style="margin-top: 0px;">
      <li>此滚动功能灵活好用</li>                
      <li><img src="//images.h-ui.net/www/2.png" width="300" height="150"><br>也可以是图片</li>
      <li>可以是文字</li>
      <li><img src="//images.h-ui.net/www/3.png" width="300" height="150"></li>
      <li><img src="//images.h-ui.net/www/1.png" width="300" height="150"></li>
      <li>这是公告标题的第六行</li>
      <li>这是公告标题的第七行</li>
      <li>这是公告标题的第八行</li>
      <li>这是公告标题的九行</li>
      <li>这是公告标题的第十行</li>
      <li>这是公告标题的第十一行</li>
      <li>这是公告标题的第十二行</li>
    </ul>
  </div>
</div>

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

引入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  /*间隔时间*/
  });
});