介绍一款网站前台图片滚动插件之"switchable"

一、简单介绍：jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件，在这里，简答说说他的Slide。像Tabs，在Jquery-UI和Jquery-EasyUI中也有Tabs。在我的博客中也使用到了，请看完整“信息发布系统”系列,下面就是Jquery-EasyUI的Tabs。

下面这些是使用Switchable实现的效果：

1、今天就说说前台图片滚动的“Slide”，大家应该并不陌生，因为大部分网站都用到了这种效果。如下：官方地址下载

介绍一款网站前台图片滚动插件之"switchable"

2、今天就带着大家完成如上图的功能，包括添加完图片后，自动添加数字（1、2、3、4），导向相应的页面。

（1）项目结构如下：

介绍一款网站前台图片滚动插件之"switchable"

（2）、首先得在Scripts文件夹下加入jquery.switchable[all].min.js。如果没有的话，请留言。

（3）、在Home/Index中View中:

1、$("#trigger1").switchable("#slide1 > div > img", { effect: "scroll", speed: .2 }).autoplay(2).carousel();

属性的简单介绍：

effect：切换效果。内置效果有：default"：最简单的显/隐效果"还有“fade”,也可以自己手动添加效果。

speed：动画的速度，单位是秒。默认值即700毫秒。

delay:触发延迟，单位是秒。默认值即100毫秒。

easing:"swing":动画的效果。

circular:false,是否循环。

vertical：是否纵向切换。

方法的简答介绍：

autoplay:是否自动播放。

interval：自动播放间隔，单位是秒。默认值即3000毫秒。当插件的参数是数字时，就是配置这个属性。例如：
$("trigger-container-selector").switchable("panel-selector").autoplay(1.8);

autopause：通过该属性可以控制鼠标 mouseenter 进 panel 区域是否暂停动画。mouseleave 后将自动恢复动画。

@{
    ViewBag.Title = "主页";
}
<link href="@Url.Content("~/Content/SwitchTabs.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.switchable[all].min.js")" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#trigger1").switchable("#slide1 > div > img", { effect: "scroll", speed: .2 }).autoplay(2).carousel(); //图片滚动
    });
    function SetVisable(index) {
        $(".nav_content li").eq(index).addClass("current").siblings().removeClass("current");
    }
</script>

<div id="slide1" class="slide-panel" style="border-style: none; width: 680px;">
    <div>
        @Html.Raw(Server.HtmlDecode(Html.Action("PictureRoll", "Extensions").ToHtmlString()))
    </div>
</div>
<div id="trigger1" class="slide-trigger" align="center">
    <!-- 自动创建 triggers -->
</div>


@using (Html.BeginForm("AddImage", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="file" name="photo" />   
    <input type="submit" value="添加" />
}


<div>
  
</div>

Home/View