Bài viết này mình sẽ hướng dẫn các bạn tạo 1 slideshow đơn giản thường dùng để hiển thị tin nổi bật trong các site về tin tức
Các bạn có tìm kiếm trên mạng rất nhiều slideshow kèm theo đó là các bài viết hướng dẫn chi tiết và sourcecode kèm theo. Tư tưởng chung là họ xây dựng các thư viện javascipt kết hợp với style css định dạng cho các thẻ class và id tương ứng để hiển thị ra slideshow. Việc làm chúng ta là dựa trên cấu trúc mẫu html của họ , sẽ xây dựng trên dữ liệu động được truy cập từ CSDL của ta. Ở bài viết này hướng dẫn các bạn làm theo css-tricks.com/889-creating-a-slick-auto-playing-featured-content-slider/ . Các bạn download code của họ để lấy các css và js
Các bước thục hiện như sau : Bước 1 : Tạo 1 trang web sau đó đặt vào cặp thẻ head các liên kết đến css và js <head runat="server"> <title>SlideShow - VietShare.vn</title> <link rel="stylesheet" type="text/css" href="/Demo/style.css" /> <script type="text/javascript" src="/Demo/js/jquery-1.2.6.min.js" > </script> <script type="text/javascript" src="/Demo/js/jquery-easing-1.3.pack.js" > </script> <script type="text/javascript" src="/Demo/js/jquery-easing-compatibility.1.2.pack.js"> </script> <script type="text/javascript" src="/Demo/js/coda-slider.1.1.1.pack.js" > </script> <script type="text/javascript"> var theInt = null; var $crosslink, $navthumb; var curclicked = 0; theInterval = function (cur) { clearInterval(theInt); if (typeof cur != 'undefined') curclicked = cur; $crosslink.removeClass("active-thumb"); $navthumb.eq(curclicked).parent().addClass("active-thumb"); $(".stripNav ul li a").eq(curclicked).trigger('click'); theInt = setInterval(function () { $crosslink.removeClass("active-thumb"); $navthumb.eq(curclicked).parent().addClass("active-thumb"); $(".stripNav ul li a").eq(curclicked).trigger('click'); curclicked++; if (6 == curclicked) curclicked = 0; }, 2000); }; $(function () { $("#main-photo-slider").codaSlider(); $navthumb = $(".nav-thumb"); $crosslink = $(".cross-link"); $navthumb .click(function () { var $this = $(this); theInterval($this.parent().attr('href').slice(1) - 1); return false; }); theInterval(); }); </script> </head> Bước 2 : Dùng điều khiển Label hoặc Literal để hiển thị dữ liệu dùng để slideshow <body> <form id="form1" runat="server"> <div> <asp:Label ID="lblFeature" runat="server" ></asp:Label> </div> </form> </body> Bước 3 : Viết hàm trả ra chuỗi dữ liệu slideshow . ở đây mình viết theo LINQ private string BindFeature() { string str = string.Empty; DataClassesDataContext data = new DataClassesDataContext(); var obj = (from p in data.News join c in data.Categories on p.CatID equals c.ID where p.NewsFocus == 1 orderby p.ID descending select p).Take(6); if (obj.Count() == 0) return string.Empty; int i = 1; str += "<div class=\"slider-wrap\">\n"; str += "<div id=\"main-photo-slider\" class=\"csw\">\n"; str += "<div class=\"panelContainer\">\n"; foreach (var item in obj) { str += "<div class=\"panel\" title=\"Panel " + i + "\">\n"; str += "<div class=\"wrapper\">\n"; string img1 = (item.Picture.ToString().Contains("NewsData")) ? "/" + item.Picture.ToString() : item.Picture.ToString(); str += "<img src=\"" + img1 + "\" alt=\"temp\" />\n"; str += "<div class=\"photo-meta-data\">\n"; str += "<span><a href=\"/"+item.ID+"/"+item.CatID+"/"+Utils.LocDau(item.Title)+".aspx\">" + item.Title.ToString() + "</a></span><br />\n"; str += " </div>\n"; str += " </div>\n"; str += " </div>\n"; i++; } str += " </div>\n"; str += " </div>\n"; string img2 = (obj.FirstOrDefault().Picture.ToString().Contains("NewsData")) ? "/" + obj.FirstOrDefault().Picture.ToString() : obj.FirstOrDefault().Picture.ToString(); str += " <a href=\"#1\" class=\"cross-link active-thumb\"><img src=\"" + img2 + "\" class=\"nav-thumb\" alt=\"temp-thumb\" /></a>\n"; var tem = obj.Skip(1); int k = 2; str += "<div id=\"movers-row\">\n"; foreach (var item1 in tem) { string img3 = (item1.Picture.Contains("NewsData")) ? "/" + item1.Picture : item1.Picture; str += "<div><a href=\"#" + k + "\" class=\"cross-link\"><img src=\"" + img3 + "\" class=\"nav-thumb\" alt=\"temp-thumb\" /></a></div>\n"; k++; } str += "</div>\n"; str += "</div>\n"; return str; } Bước 4 : Gắn giá trị cho Label hoặc Literal trong sự kiện Page_Load protected void Page_Load(object sender, EventArgs e) { lblFeature.Text = BindFeature(); } Hiện nay chính vietshare.vn đang sử dụng slide show này đây là demo trực quan nhất cho các bạn |
Hướng dẫn tạo SlideShow tin nổi bật
stty
Ý kiến bạn đọc
Tin tức khác
ASP.NET – Serialize đối tượng .NET thành JSON và ngược lại
- 11/4/2012
ASP.NET – Sử dụng một số Extender trong Ajax Control Toolkit
- 4/4/2012
ASP.NET – Cài đặt và cấu hình Ajax Control Toolkit
- 4/4/2012
WebService – Cơ bản về SOAP, WSDL và ASP.NET Web Service
- 14/3/2012
Hiển thị danh sách các tùy chọn khi nhấn vào thuộc tính của ckeditor được đặt trong modalpopup
- 12/3/2012
Ajax – Ví dụ minh họa sử dụng XMLHttpRequest
- 12/3/2012
Ajax – Tìm hiểu về XMLHttpRequest
- 12/3/2012
Hướng dẫn xây dựng Active Menu với Asp.net - SQL Server
- 1/2/2012
Tổng hợp các hàm SQL server tự định nghĩa có thể hữu ích cho bạn
- 7/1/2012
Xây dựng chức năng tìm kiếm cho website
- 6/1/2012
Tin tiêu điểm
-
Export 1 Dataset hoặc DataTable thành file Excel,Word,PDF và CSV (29,947)
-
Xây dựng trang đăng nhập trong asp.net – C# (29,250)
-
Truyền dữ liệu theo phương thức POST sang 1 trang khác trong ASP.NET (23,897)
-
Lưu trữ và hiển thị hình ảnh trong Database - ASP.NET (20,698)
-
Tạo mã an toàn ( Captcha Image ) cho website (20,640)
-
Chọn và upload nhiều file giống như Gmail sử dụng Jquery và ASP.NET (20,382)
-
Import dữ liệu từ file Excel sử dụng ASP.NET (19,793)
-
Một số lỗi thường gặp khi rewrite url trong ASP.Net (sử dụng UrlRewritingNet) (18,806)
-
ViewState trong ASP.Net (18,256)
-
Hướng dẫn tạo SlideShow tin nổi bật (18,164)
Gallery
Text Links
Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online
Tags
asp.net
JavaScript
Lập trình
Cơ sở dữ liệu
jquery
Csharp
Ajax
Thủ thuật
JavaScript
menu
Sql Server
Lập trình C#
WebService
stty
Sql
Phân trang
Rewrite
Mã hoá
Backup
Thủ thuật lập trình
Store procedure
Accordion
Validation
Store
Upload
Slide
jQueryPlugin
StoreProcedure
Regular Expression
Regex
android
Quick and snow
HTML5
WPF
WCF
Copyright © 2011 - 2012 vietshare.vn
by
phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.