Thứ sáu, ngày 22 tháng 9 năm 2017

Hướng dẫn tạo SlideShow tin nổi bật

Ngày đăng: 10/12/2012, 17:19:53PM | Lượt xem: 17,784
Hot!
tag slideshow, asp.net,

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
stty
 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Tin tiêu điểm

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

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
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.