Hướng dẫn thực hành Slider đơn giản với jQuery

Bài viết trước có hướng dẫn xây dựng một slider đơn giản với JavaScript - DOM, bài viết này tôi sẽ hướng dẫn xây dựng một slider đơn giản với jQuery.

Slider có thể chạy tốt trên hầu hết các trình duyệt hiện đại và đồng thời cũng chạy tốt trên trình duyệt Internet Explorer phiên bản 6,7,8... Slider cũng chiếm rất ít tài nguyên xử lý của CPU.

<div id="wrap-slide">
<div id="slideshow">
  <ul>
   <li class="current"><img src="images/image-1.bmp" /><p>tieu de hinh anh 1</p></li>
   <li><img src="images/image-2.jpg" /><p>tieu de hinh anh 2</p></li>
   <li><img src="images/image-3.jpg" /><p>tieu de hinh anh 3</p></li>
   <li><img src="images/image-4.bmp" /><p>tieu de hinh anh 4</p></li>
  </ul>
  <span id="prev">prev</span><span id="next">next</span>
  <p id="controlNav"></p>
</div>
</div>

Ở trên phần #wrap-slide chỉ là để tạo khung màu mè, bạn cần gán một hình ảnh làm măch định với class="current" để hình ảnh được hiển thị đầu tiên.

#wrap-slide{
margin: 0 auto;
padding: 20px 30px;
width: 600px;
background: rgba(255,255,255,0.7);
filter:progid:DXImageTransform.Microsoft.Gradient( GradientType=1, StartColorStr='#99fffffff', EndColorStr='#99ffffff');
border: 1px solid #ccc;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
#slideshow{
position: relative;
width: 600px; height: 245px;
}
#slideshow li img{
position: absolute;
top: 0; left: 0;
z-index: 0;
}
#slideshow li p{
position: absolute;
bottom:0; left:0;
z-index: 0;
width: 100%; height: 50px;
color: #efefef;
text-shadow: 0px 0px 2px #000;
background: rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.Gradient( GradientType=1, StartColorStr='#70000000', EndColorStr='#70000000');
}
#slideshow li p span{
padding: 5px 10px;
display: block;
}
#slideshow li p a{
color: #efefef;
text-decoration: none;
}
#slideshow li p a:hover{
color: #ffff00;
}
#slideshow .current img, #slideshow .current p{z-index: 50;}
#next, #prev{
position: absolute;
top: 120px;
width: 18px; height: 31px;
z-index: 1000;
text-indent: -99999px;
cursor: pointer;
}
#next{
right: -25px;
background: url(images/next-arrow.png) no-repeat 0 0;
}
#prev{
left: -25px;
background: url(images/prev-arrow.png) no-repeat 0 0;
}
#controlNav{
position: absolute;
top:0; right:0;
z-index: 1000;
padding: 5px;
}
#controlNav a{
display: block; float: left;
width:22px; height:22px;
background:url(images/bullets.png) no-repeat;
cursor: pointer;
}
.active{
background-position:0 -22px !important;
}

Ở trên mã CSS hơi dài để định kiểu cho slider màu mè một chút, điều quan trọng là bạn cần đặt #slideshow ở thuộc tính position là relative và định kích thước cho vừa với hình ảnh, kế tiếp là hình ảnh và thẻ mô tả được đặt ở thuộc tính position absolute với z-index bằng 0, kế tiếp là định kiểu cho hình ảnh và mô tả có class="current" ở thuộc tính z-index bằng 50.

Xây dựng hàm đổi vị trí và tạo hiệu ứng fade cho phần tử

function fadeElem(currElem,nextElem){
  currElem.removeClass('current').find('img') .css({'z-index':'50'}) .end() .find('p') .css({'z-index':'50'});
  nextElem.addClass('current').find('img') .css({'opacity': '0','z-index':'100'}) .animate({opacity: 1}, 700, function(){
   currElem.find('img') .css({'z-index': '0'});
  }).end().find('p') .css({'height':'0','z-index':'100'}) .animate({height: 50},500, function(){
   currElem.find('p') .css({'z-index': '0'});
  });
}

Hàm trên có 2 tham số là phần tử hiện tại và phần tử kế tiếp. Hàm này sẽ hoạt động là bỏ class=current của phần tử hiện tại (phần tử hiện tại là phần tử ở trên cùng có thể nhìn thấy) sau đó định kiểu z-index bằng 50 cho hình ảnh và thẻ mô tả để nó nằm dưới phần tử kế tiếp. Tiếp theo phần tử kế tiếp sẽ được gán class=current sau đó định kiểu z-index bằng 100 cho hình ảnh và thẻ mô tả để nó lên trên cùng đồng thời tạo hiệu ứng animation cho chúng với phương thức animate.

Sau khi thực hiện xong thì phần tử kế tiếp đã nằm lên trên cùng rồi trong phương thức animate ở đối số thứ 3 chúng ta gán một hàm thực hiện chức năng đặt lại z-index bằng 0 cho phần tử ở dưới phần tử kế tiếp tức là phần tử hiện tại ban đầu.

Xây dựng hàm xác định trạng thái wideget

function widegetStatus(slides){
  slides.each(function(index){
   if($(this).attr('class') == 'current')
    $('#controlNav a').removeClass('active') .eq(index) .addClass('active');
  });
}

Hàm trên sẽ xác định chỉ mục của phần tử hiện tại rồi gán class = active cho vị trí wideget tương ứng.

Xây dựng hàm chạy next và previous phần tử

function slideshow(prev){
  var slides = $('#slideshow li');
  var currElem = slides.filter('.current');
  var lastElem = slides.filter(':last');
  var firstElem = slides.filter(':first');
  // Xác định phần tử kế tiếp là prev hay next
  var nextElem = (prev)? currElem.prev() : currElem.next();
  if(prev){
   if(firstElem.attr('class') == 'current') nextElem = lastElem;
  }else if(lastElem.attr('class') == 'current')nextElem = firstElem;
  fadeElem(currElem,nextElem);
  widegetStatus(slides);
}

Hàm này sẽ xác định phần tử hiện tại và phần tử kế tiếp là gì rồi sau đó chạy 2 hàm fadeElem và  widegetStatus đã xây dựng ở trên. Tham số prev ở trên là để định nghĩa phần tử kế tiếp là phần tử phía trước hay phía sau theo cấu trúc DOM.

Xây dựng hàm chạy tới phần tử được chỉ định

function wideget(index){
  var slides = $('#slideshow li');
  var currElem = slides.filter('.current');
  var nextElem = slides.eq(index);
  fadeElem(currElem,nextElem);
  widegetStatus(slides);
}

Hàm này sẽ chạy 2 hàm fadeElem và  widegetStatus với phần tử kế tiếp được xác định với chỉ mục là tham số index.

Xây dựng hàm chạy slideshow

function vk_slideshow(time){
  var idset =setInterval('slideshow()', time);
  var liarr =$('#slideshow ul li');
  var controlNav =$('#controlNav');
  var str='';
  for(var i=0; i<liarr.length; i++){
   str+='<a></a>';
  }
  controlNav.append(str);
  controlNav.children().each(function(index){
   $(this).click(function(){
    wideget(index);clearInterval(idset);
    idset =setInterval('slideshow()', time);
   });
  }).eq(0).addClass('active');
  $('#next').click(function(){
   slideshow(); clearInterval(idset);
   idset =setInterval('slideshow()', time);
  });
  $('#prev').click(function(){
   slideshow(true); clearInterval(idset);
   idset =setInterval('slideshow()', time);
  });
}

Hàm vk_slideshow(time) sẽ chạy một lần khi tài liệu được tải, nó có nhiệm vụ gọi hàm setInterval trong JavaScript để chạy hàm slideshow() theo một chu kỳ thời gian time, nó gán hành động lên sự kiện click với các nút next, prev, wideget. Hàm vk_slideshow(time) cũng có nhiệm vụ đếm số slide và chèn vào số lượng wideget tương ứng cho phần tử controlNav.

Sử dụng

$(document).ready(function(){
  vk_slideshow(4000);
});

Việc sử dụng là vô cùng đơn giản chúng ta chỉ việc gọi hàm vk_slideshow() khi tài liệu được tải xong, tham số của hàm chính là thời gian tạm dừng mỗi lần chạy slide.

Vậy là đã thực hiện xong slider nếu bạn thấy bài viết của tôi hay và có ý nghĩa hãy giới thiệu web của tôi tới bạn bè của bạn