Hướng dẫn code Slide ảnh chạy ngang liên tục không bị khoảng trống cho blog/web

Bài viết này mình sẽ hướng dẫn các bạn cách tạo Slide bằng code cực kỳ đơn giản và hiệu quả. Đây là code Slide ảnh chạy ngang liên tục không bị khoảng trống cho blog/web. Hiện nay có rất nhiều bạn đang muốn tìm Slide chạy ngang cho blog, nên hôm nay mình xin chia sẽ tới mọi người 1 đoạn mã code chuẩn nhất dành cho blog.

Các bạn xem ảnh minh họa bên dưới nhé. Khi các bạn đặt code vào web thì nó sẽ hiển thị như thế này đây.

    

Bước 1: Phần css và Javasctipt

Các bạn cop đoạn code dưới đây lên trên thẻ đóng </head> nhé.

<style type="text/css">
<!--
#slideCont {
  border:solid 1px #000;
  text-align:center;
}
#slideCont img {
  margin: 5px;
}
-->
</style>
<script type="text/javascript">
function clip() {
  // width of the banner container
  var contWidth = 425;
  // height of the banner container
  var contHeight = 90;
  var id1 = document.getElementById('slideA');
  var id2 = document.getElementById('slideB');
  id1.style.left = parseInt(id1.style.left)-1 + 'px';
  document.getElementById('slideCont').style.width = contWidth + "px";
  document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
  id2.style.display = '';
  if(parseFloat(id1.style.left) == -(contWidth))  {
   id1.style.left = '0px';
  }
  setTimeout(clip,25)
}
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
  clip();
});
//-->
</script>

Bước 2: Phần HTML của bạn cần làm như sau 

- Các bạn tùy biến chiều dài rộng kick cỡ ảnh cho phù hợp nhé

<div id="slideCont" style="clip: rect(auto, 425px, 90px, auto); height: 90px; overflow: hidden; position: relative; top: 0px; width: 425px; z-index: 1;">
<div id="slideA" style="height: 90px; left: -194px; overflow: hidden; position: absolute; top: 0px; width: 850px; z-index: 1;">
<div id="innerSlideA" style="float: left;">
<a href="http://www.apache.org/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/1.jpg" width="126" /></a>
   <a href="http://www.haan.net/"><img border="0" height="60" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/2.jpg" width="120" /></a>
   <a href="http://www.mysql.com/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/3.jpg" width="126" /></a>
  </div>
<div id="slideB" style="height: 90px; left: 0px; overflow: hidden; position: relative; top: 0px; width: 425px; z-index: 1;">
<a href="http://www.apache.org/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/4.jpg" width="126" /></a>
   <a href="http://www.haan.net/"><img border="0" height="60" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/5.jpg" width="120" /></a>
   <a href="http://www.mysql.com/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/6.jpg" width="126" /></a>
  </div>
</div>
</div>

+ Như vậy là xong rất đơn giản phải không nào, chỉ cần 2 bước như trên bạn sẽ có một Slide chạy ngang mà không sợ bị gián đoạn rất đẹp mắt. Mình nghỉ chắc hẵn bạn nào cũng làm được thôi vì nó không có khó đâu nhé.

Các bạn lưu ý: Trong Bước 2 mình có bôi đen hình ảnh cần thay vào, các bạn có thể thay đổi kiểu ảnh và kích thước theo ý muốn nhé. Nếu có gì thắc mắc hay làm chưa thành công các bạn có thể comment ngay bên dưới nhé. Mình sẽ hỗ trợ. Phía trên là một số thủ thuật blog hay các bạn có thể cập nhật thêm nhiều thủ thuật cho blog/web mới nhất tại hayquahihi.blogspot.com.

CHÚC BẠN THÀNH CÔNG