free web
free web
free web
[ Tin mới · Thành viên · Nội quy · Tìm kiếm · RSS ]
  • Page 1 of 1
  • 1
Forum » Giao lưu chia sẻ kinh nghiệm về website » Tổng hợp code và javascript » Tạo một album slide show ảnh đơn giản cho blog đẹp
Tạo một album slide show ảnh đơn giản cho blog đẹp
Hoang_CLB Date: Thứ tư, 28.Dec.2016, 4:51 AM | Message # 1
Offline
Cấp độ: ₷oáiҪa
Bài viết: 6
Phần hướng dẫn sau đây sẽ hướng dẫn bạn tạo một album slide show ảnh đơn giản sử dụng Javascript & jQuery.

Ảnh đẹp cứ tìm trên anh google cả mớ nhá...!
Theo các bước dưới đây để tạo được slide show ảnh như hình trên.
Bước 1. Chuẩn bị các hình ảnh cần thiết để tạo slide show. Nếu chưa có bạn có thể dùng các hình mẫu download ở bên dưới
Bước 2. Đặt đoạn code include thư viện jQuery vào trong phần head của mã html. (Nếu file html của bạn đã có sử dụng jQuery thì bạn có thể bỏ qua bước này)
Code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Bước 3. Tạo file css và include vào trong phần head của mã html như sau.
Code
<link type="text/css" href="css/style.css" rel="stylesheet" />

Nội dung của file css như sau..
Code
.slideshow { 
        position:relative; /*Make the slideshow container  position:relative and make the sub elements absolute to position the sub element absolute to the container*/
        height:320px; /*The slide show height*/
        overflow:hidden;
    }
    .slideshow div {
        position:absolute; 
        top:0px;;
        left:0;
        z-index:8;
    }
    .slideshow div img
    {
        width:600px; /*The image slide show width*/
        height:320px; /*The image slide show height*/
    }
    .slideshow div.active {
        z-index:10;
    }
    .slideshow div.lastactive {
        z-index:9;
    }

Bước 4. Tiếp tục đặt đoạn code sau vào trong phần head của mã html.
Code
<script language="javascript">
   /***************************************************************************************
   * Run when page load
   ***************************************************************************************/
   $(document).ready(function()
   {
      initSlideShow();
      
   });
   /***************************************************************************************
   ****************************************************************************************/
   function initSlideShow()
   {
      if($(".slideshow div").length > 1) //Only run slideshow if have the slideshow element and have more than one image.
      {
         var transationTime = 5000;//5000 mili seconds i.e 5 second
         $(".slideshow div:first").addClass('active'); //Make the first image become active i.e on the top of other images
         setInterval(slideChangeImage, transationTime); //set timer to run the slide show.
      }
   }
   /***************************************************************************************
   ****************************************************************************************/
   
   function slideChangeImage()
   {
      var active = $(".slideshow div.active"); //Get the current active element.
      if(active.length == 0)
      {
         active = $(".slideshow div:last"); //If do not see the active element is the last image.
      }
      
      var next = active.next().length ? active.next() : $(".slideshow div:first"); //get the next element to do the transition
      active.addClass('lastactive');
      next.css({opacity:0.0}) //do the fade in fade out transition
            .addClass('active')
            .animate({opacity:1.0}, 1500, function()
            {
               active.removeClass("active lastactive");   
            });
       
   }

</script>

Bước 5. Sau đó đặt đoạn code sau vào trong phần body của mã html. Đây là đoạn mã html danh sách các hình cần để chạy slide show.
Code
<div class="slideshow">
   <div><a href="#"><img src="images/flower-1.jpg" alt="" border="0" /></a></div>
   <div><a href="#"><img src="images/flower-2.jpg" alt="" border="0" /></a></div>
   <div><a href="#"><img src="images/flower-3.jpg" alt="" border="0" /></a></div>
   <div><a href="#"><img src="images/flower-4.jpg" alt="" border="0" /></a></div>
</div>

Bước 6. Đã xong. Bạn có thể chạy thử kế quả hoặc click vào liên kết bên dưới để tải mã nguồn về.
Files đính kèm: 2496761.jpg(52.2 Kb)


Sống với đam mê và theo đuổi tới cùng
 
Forum » Giao lưu chia sẻ kinh nghiệm về website » Tổng hợp code và javascript » Tạo một album slide show ảnh đơn giản cho blog đẹp
  • Page 1 of 1
  • 1
Search: