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
http://vietshare.vn/demo/SlideShow.aspx
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
<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();
});
Bước 2 : Dùng điều khiển Label hoặc Literal để hiển thị dữ liệu dùng để slideshow
<form id="form1" runat="server"> <asp:Label ID="lblFeature" runat="server" ></asp:Label>
Bước 3 : Viết hàm trả ra chuỗi dữ liệu slideshow . ở đây mình viết theo LINQ
{
DataClassesDataContext data
= new DataClassesDataContext
(); join c
in data
.Categories on p
.CatID equals c
.ID str += "<div class=\"slider-wrap\">\n";
str += "<div id=\"main-photo-slider\" class=\"csw\">\n";
str += "<div class=\"panelContainer\">\n";
{
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";
str += "<div id=\"movers-row\">\n";
{
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";
}
Bước 4 : Gắn giá trị cho Label hoặc Literal trong sự kiện Page_Load
Code:
protected void Page_Load(object sender, EventArgs e)
{
lblFeature.Text = BindFeature();
}
Nguồn : vietshare.vn[/URL]
Thành viên mới
Hướng dẫn tạo SlideShow tin nổi bật
Quyền hạn của bạn
Trả lời cùng với trích dẫn