一、簡單介紹：jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常見UI組件的jQuery插件，在這里，簡答說說他的Slide。像Tabs，在Jquery-UI和Jquery-EasyUI中也有Tabs。在我的博客中也使用到了，請看完整“信息發布系統”系列,下面就是Jquery-EasyUI的Tabs。
下面 這些是使用Switchable實現的效果：
1、今天就說說前台圖片滾動的“Slide”，大家應該並不陌生，因為大部分網站都用到了這種效果。如下：官方地址下載
2、今天就帶着大家完成如上圖的功能，包括添加完圖片后，自動添加數字（1、2、3、4），導向相應的頁面。
（1）項目結構如下：
（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>
2、因為有一個<input type="file" />上傳文件。所以得添加這種格式：{enctype = "multipart/form-data" }，簡單解釋一下：是設置表單的MIME編碼。默認情況，這個編碼格式是application/x-www-form-urlencoded，不能用於文件上傳；只有使用了multipart/form-data，才能完整的傳遞文件數據，進行下面的操作。
3、 @Html.Raw(Server.HtmlDecode(Html.Action("PictureRoll", "Extensions").ToHtmlString()))，圖片這部分是在Extensions中添加了一個Action，渲染出來圖片。下面看看Extensions/PictureRoll中的內容，使用的是：XElement，進行XML的操作。讀取XML的數據，不介紹它的使用了，都能看懂。使用System.Xml.Linq.最后ViewBag.picture=picture。把圖片渲染出來。前台進行接收。
private const string picturePath = "~/XML/Pic.xml"; public ActionResult PictureRoll() { string picture = string.Empty; XElement xe = XElement.Load(Server.MapPath(picturePath)); var query = from value in xe.Elements("img") select value; foreach (var item in query) { picture += "<img src=\"" + item.Element("path").Value + "\" title=\"" + item.Element("title").Value + "\" alt=\"" + item.Element("title").Value + "\" />"; } ViewBag.picture = picture; return View(); }
@{ Layout = null; } @ViewBag.picture
4、還得添加一個CSS。改變圖片和1234鏈接的樣式。
/* SwichTab圖片滾動 */ .slide-trigger{position:relative;top:-25px;width:465px;padding-right:5px;}.slide-trigger a{display:inline-block;margin-right:3px;width:16px;height:16px;line-height:16px;text-align:center;color:#d94b01;background-color:#fff5e1;border:1px solid #f47500;outline:none;overflow:hidden;text-decoration:none;}.slide-trigger a:hover{text-decoration:none;}.slide-trigger a.current{width:18px;height:18px;line-height:18px;font-weight:700;color:#FFF;background:url(/images/t-bg.png) repeat-x;}.slide-panel{position:relative;width:950px;height:240px;overflow:hidden;border:1px solid #B6D1E6;}.slide-panel div{position:absolute;}.slide-panel div img{display:block;width:950px;height:240px;} #slide1 div { width:2010em; /* 設置足夠的寬度 */ } #slide1 div img { float:left; } /* SwichTab圖片滾動 */
5、現在運行代碼：出現之前介紹的效果了吧。
（4）添加：上傳圖片的功能。
1、遍歷上傳上來的文件，使用HttpPostedFileBase進行接收。注意：參數 photo得和前台的name得一致。
2、判斷上傳文件的類型，防止一些惡意用戶，上傳木馬。
3、item.SaveAs(Server.MapPath("~/images/" + Path.GetFileName(item.FileName)));進行保存文件。
4、接下來又是XElement的使用，SetElementValue，為節點進行賦值。最后也得保存!Save();
5、出現上圖效果！
private const string picturePath = "~/XML/Pic.xml"; [HttpPost] public ActionResult AddImage(HttpPostedFileBase[] photo) { foreach (var item in photo) { if (item!=null) { var extention = Path.GetExtension(item.FileName); if (extention == ".aspx" || extention == ".html" || extention == ".exe" || extention == ".asp" || extention == ".jsp" || extention == ".js" || extention == ".htm" || extention == ".php") { return Content("<script>alert('不能上傳這類型文件')</script>"); } item.SaveAs(Server.MapPath("~/images/" + Path.GetFileName(item.FileName))); XElement xe = XElement.Load(Server.MapPath(picturePath)); XElement element = new XElement(XName.Get("img")); element.SetElementValue("id", DateTime.Now.ToString("yyyyMMddhhmmssfff")); element.SetElementValue("title", Path.GetFileName(item.FileName)); element.SetElementValue("path", "/images/" + Path.GetFileName(item.FileName)); xe.Add(element); xe.Save(Server.MapPath(picturePath)); } } return RedirectToAction("Index","Home"); }
二、總結：一個圖片焦點輪換的效果的實現，如果對您有一點點幫助的話，右下角”推薦“支持一下，讓更多的朋友來交流學習！如有問題，請留言！ 今天下午有中國男籃亞錦賽，得趕快回家看了。支持一下中國男籃吧。