Từ 1 tới 1 trên tổng số 1 kết quả

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

  1. #1
    Ngày gia nhập
    04 2010
    Bài viết
    21

    Mặc định Hướng dẫn tạo SlideShow tin nổi bật

    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
    Demo Link Code:

    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
    HTML Code:
    1. <head runat="server">
    2.     <title>SlideShow - VietShare.vn</title>
    3.     <link rel="stylesheet" type="text/css" href="/Demo/style.css" />
    4.     <script type="text/javascript" src="/Demo/js/jquery-1.2.6.min.js" > </script>
    5.     <script type="text/javascript" src="/Demo/js/jquery-easing-1.3.pack.js" > </script>
    6.     <script type="text/javascript" src="/Demo/js/jquery-easing-compatibility.1.2.pack.js"> </script>
    7.     <script type="text/javascript" src="/Demo/js/coda-slider.1.1.1.pack.js" > </script>
    8.    
    9.     <script type="text/javascript">
    10.         var theInt = null;
    11.         var $crosslink, $navthumb;
    12.         var curclicked = 0;
    13.  
    14.         theInterval = function (cur) {
    15.             clearInterval(theInt);
    16.  
    17.             if (typeof cur != 'undefined')
    18.                 curclicked = cur;
    19.  
    20.             $crosslink.removeClass("active-thumb");
    21.             $navthumb.eq(curclicked).parent().addClass("active-thumb");
    22.             $(".stripNav ul li a").eq(curclicked).trigger('click');
    23.  
    24.             theInt = setInterval(function () {
    25.                 $crosslink.removeClass("active-thumb");
    26.                 $navthumb.eq(curclicked).parent().addClass("active-thumb");
    27.                 $(".stripNav ul li a").eq(curclicked).trigger('click');
    28.                 curclicked++;
    29.                 if (6 == curclicked)
    30.                     curclicked = 0;
    31.  
    32.             }, 2000);
    33.         };
    34.  
    35.         $(function () {
    36.  
    37.             $("#main-photo-slider").codaSlider();
    38.  
    39.             $navthumb = $(".nav-thumb");
    40.             $crosslink = $(".cross-link");
    41.  
    42.             $navthumb
    43.             .click(function () {
    44.                 var $this = $(this);
    45.                 theInterval($this.parent().attr('href').slice(1) - 1);
    46.                 return false;
    47.             });
    48.  
    49.             theInterval();
    50.         });
    51.     </script>
    52. </head>
    Bước 2 : Dùng điều khiển Label hoặc Literal để hiển thị dữ liệu dùng để slideshow
    HTML Code:
    1.     <form id="form1" runat="server">
    2.     <div>
    3.         <asp:Label ID="lblFeature" runat="server" ></asp:Label>
    4.     </div>
    5.     </form>
    6. </body>
    Bước 3 : Viết hàm trả ra chuỗi dữ liệu slideshow . ở đây mình viết theo LINQ
    Visual C# Code:
    1. private string BindFeature()
    2.     {
    3.         string str = string.Empty;
    4.         DataClassesDataContext data = new DataClassesDataContext();
    5.         var obj = (from p in data.News
    6.                    join c in data.Categories on p.CatID equals c.ID
    7.                    where  p.NewsFocus == 1
    8.                    orderby p.ID descending
    9.                    select p).Take(6);
    10.         if (obj.Count() == 0) return string.Empty;
    11.         int i = 1;
    12.         str += "<div class=\"slider-wrap\">\n";
    13.         str += "<div id=\"main-photo-slider\" class=\"csw\">\n";
    14.         str += "<div class=\"panelContainer\">\n";
    15.  
    16.         foreach (var item in obj)
    17.         {
    18.             str += "<div class=\"panel\" title=\"Panel " + i + "\">\n";
    19.             str += "<div class=\"wrapper\">\n";
    20.             string img1 = (item.Picture.ToString().Contains("NewsData")) ? "/" + item.Picture.ToString() : item.Picture.ToString();
    21.             str += "<img src=\"" + img1 + "\" alt=\"temp\" />\n";
    22.             str += "<div class=\"photo-meta-data\">\n";        
    23.             str += "<span><a href=\"/"+item.ID+"/"+item.CatID+"/"+Utils.LocDau(item.Title)+".aspx\">" + item.Title.ToString() + "</a></span><br />\n";
    24.             str += " </div>\n";
    25.             str += " </div>\n";
    26.             str += " </div>\n";
    27.             i++;
    28.         }
    29.         str += " </div>\n";
    30.         str += " </div>\n";
    31.         string img2 = (obj.FirstOrDefault().Picture.ToString().Contains("NewsData")) ? "/" + obj.FirstOrDefault().Picture.ToString() : obj.FirstOrDefault().Picture.ToString();
    32.         str += " <a href=\"#1\" class=\"cross-link active-thumb\"><img src=\"" + img2 + "\" class=\"nav-thumb\" alt=\"temp-thumb\" /></a>\n";
    33.         var tem = obj.Skip(1);
    34.         int k = 2;
    35.         str += "<div id=\"movers-row\">\n";
    36.         foreach (var item1 in tem)
    37.         {
    38.             string img3 = (item1.Picture.Contains("NewsData")) ? "/" + item1.Picture : item1.Picture;
    39.             str += "<div><a href=\"#" + k + "\" class=\"cross-link\"><img src=\"" + img3 + "\" class=\"nav-thumb\" alt=\"temp-thumb\" /></a></div>\n";
    40.             k++;
    41.         }
    42.         str += "</div>\n";
    43.         str += "</div>\n";
    44.         return str;
    45.  
    46.     }
    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]
    Attached Files Attached Files

Các đề tài tương tự

  1. Slideshow không load được ảnh từ csdl, nguyên nhân có thể do đâu?
    Gửi bởi 823478 trong diễn đàn Thắc mắc lập trình ASP.NET
    Trả lời: 1
    Bài viết cuối: 23-01-2014, 06:36 PM
  2. Khắc phục Slideshow không chạy theo quy luật?
    Gửi bởi nguyenducbachy trong diễn đàn Thắc mắc lập trình ASP.NET
    Trả lời: 0
    Bài viết cuối: 14-06-2013, 09:45 AM
  3. ai có key phần mềm ProShow Slideshow cho em xin xài thử?
    Gửi bởi mr.star_insky trong diễn đàn Thắc mắc chung
    Trả lời: 0
    Bài viết cuối: 15-01-2013, 07:22 PM
  4. Làm thế nào để tạo slideshow tin tức mới nhất?
    Gửi bởi TearKoshan trong diễn đàn Thắc mắc lập trình ASP.NET
    Trả lời: 0
    Bài viết cuối: 04-10-2012, 05:22 PM
  5. Tạo slideshow mà các ảnh được lấy từ CSDL.
    Gửi bởi wintq trong diễn đàn Thắc mắc lập trình ASP.NET
    Trả lời: 10
    Bài viết cuối: 17-08-2011, 10:17 AM

Quyền hạn của bạn

  • Bạn không thể gửi đề tài mới
  • Bạn không thể gửi bài trả lời
  • Bạn không thể gửi các đính kèm
  • Bạn không thể chỉnh sửa bài viết của bạn