Bài viết mới nhất :
Home » » Code Slide ảnh chạy ngang liên tục không bị khoảng trống

Code Slide ảnh chạy ngang liên tục không bị khoảng trống

Code Slide ảnh chay ngang liên tục không bị khoảng trống. Sau đây Blog Dạy Học SEO xin chia sẻ thủ thuật blogspot với các bạn cách tạo slide ảnh chạy ngay liên tục mà không có khoảng trống như khi ta dùng thẻ marquee

Hiệu ứng có thể làm cho một nhóm các hình ảnh (logo, banner,...) chạy ngang liên tục trên trang web, nếu không xem mã nguồn, có thể ta sẽ lầm tưởng rằng đây là một trong những đoạn mã sử dụng thẻ MARQUEE để thực hiện việc di chuyển. Bạn có thể xem demo phía dưới đây.

Cách tạo Slide ảnh chay ngang liên tục không bị khoảng trống

I./ Phần css và Javasctipt

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


<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>

II./ Phần HTML của bạn cần làm như sau 

<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://dayhocseoo.blogspot.com/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/1.jpg" width="126" /></a>
   <a href="http://dayhocseoo.blogspot.com/"><img border="0" height="60" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/2.jpg" width="120" /></a>
   <a href="http://dayhocseoo.blogspot.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://dayhocseoo.blogspot.com/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/4.jpg" width="126" /></a>
   <a href="http://dayhocseoo.blogspot.com/"><img border="0" height="60" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/5.jpg" width="120" /></a>
   <a href="http://dayhocseoo.blogspot.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>

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

LIKE & SHARE :
Code Slide ảnh chạy ngang liên tục không bị khoảng trống
Code Slide ảnh chạy ngang liên tục không bị khoảng trống

Bạn đang đọc bài viết :

Code Slide ảnh chạy ngang liên tục không bị khoảng trống tại Marketing Online

Đừng quên nhấn LIKE Chia Sẻ để ủng hộ website của mình nếu bài viết có ích!

3 nhận xét:

  1. Mình muốn làm slide chạy ảnh có nút nhấn qua trái qua phải giống như slide ảnh tiêu đề ở trên web này. Bạn nào có code share cho mình với nha. Cám ơn các bạn !

    Trả lờiXóa

 
Giấy phép ICP số: 100231235238259962931/Blogger-Google Plus
Địa chỉ:
Proudly powered by Dịch vụ Marketing Online
Copyright © 2011. Day Hoc Seo - All Rights Reserved
Ghi rõ nguồn "http://dayhocseoo.blogspot.com/" khi phát hành lại thông tin trên trang này
Marketing Online
Chứng nhận và bảo vệ bản quyền bởi
DMCA