【插件笔记】两款短小精悍的滚动插件

     首页图片轮播，消息的滚动显示，栏目的滚动，总是有那么一两款滚动插件适合你。但今天分享的不是有花哨效果的轮播插件，而是两款平实好用的滚动插件。  

FlexSlider

   GitHub地址：https://github.com/woothemes/FlexSlider/

   FlexSlider灵活性很好，无论是大图片的轮播还是多个栏目的滚动代码都很简洁。

   首先引入文件：

<script src="~/Content/flexslider/jquery.flexslider-min.js"></script>
<link href="~/Content/flexslider/flexslider.css" rel="stylesheet" />

   

<!-- slider-->
        <div class="flexslider">
          <ul class="slides">
              <li><img src="slider/lrgimg4.jpg" alt="" />
              <div style="position: absolute; top:70px; left:45px;; 70%; height:400px;">
                  <div class="slide_content_left"><h2>Cya, Mary!</h2></div>
                  <div class="slide_desc_left">Hamburg, Germany( Photo <a href="http://www.cssmoban.com/">By Zanthia </a> )</div>
              </div>
              </li>
             //......
       </ul>
      </div>

需要注意的就是ul的class要带有slides，外围的div class包含flexslider.其他可以自己定义

  $('.flexslider').flexslider({
            animation: "slide",
            controlNav: false,
            directionNav: true,// 显示的是两次的导航键 prev&next
            slideshowSpeed: 10000
        });

有时候需要滚动多项目。比如

那在MVC中：

  <div class="station  "><h2><img src="../../Content/FireImg/station.png" alt="" /> 安全加油站/Security stations</h2> </div>
   <div class="carousel_box row" style="position: relative;padding-left: 20px;">
     @Html.Action("SecurityStation")
  </div>

我们定义一个li 最多包含2个元素。

@model IEnumerable<FireControl.Models.Article>
@{
    var i = 0;
    var count = Model.Count();
}
<ul class="bul slides">
    @foreach (var item in Model)
    {
        if (i % 2 == 0)
        {
        @Html.Raw("<li>")     
        }
        i++;
      
         <div class="span6">
                <div class="span6">
                    <div><strong>@item.Title</strong></div>
                    <a href="@Url.Action("Detail",new{aid=item.Id})">
                          @Html.Raw(item.Content)
                    </a>
                </div>
             <div class="span6">
                 <a  class="ulink" href="@Url.Action("Detail",new{aid=item.Id})">
                     <img src="@item.ImgUrl" alt="@item.Title" />
                 </a>
             </div>
            </div>
        if (i%2 == 0 || i == count)
        {
             @Html.Raw("</li>")  
        }
    }
</ul>

同样，ul 需要带有class slides 外围div class带有 carousel_box 即可。脚本代码几乎同上，只是将导航栏放到了下面。

   $('.carousel_box').flexslider({            
            animation: "slide",
            controlNav: true,
            directionNav: false,
            slideshowSpeed: 5000
        });

官网 http://flexslider.woothemes.com/  有更详细的说明  

jquery.vticker-min.js

 这款插件更简单，就是一个2kb的js文件，主要是用来做向上滚动，用来更新消息很方便。

下载地址:http://pan.baidu.com/s/1hquxKmo 

 

git 有点不流畅，滚动都是到位的。

<div id="news_update">
<ul class="mesul">
    @foreach (var item in Model)
    {
        <li><a class="ulink" href="@Url.Action("Detail", "Press", new { id = item.Id })"> @item.Title</a>
        </li>
    }
</ul>
</div>

 $('#news_update').vTicker({
                 speed: 1000,
                 pause: 5000,
                 animation: 'fade',
                 mousePause: true,
                 showItems: 1,
                 height: 23
             });

 一个li一个单位。脚本参数也很直观，速度，停留时间，效果，显示数目，高度。非常方便。

 特此分享，希望对你有帮助。