Code Slide ảnh chạy ngang liên tục trong Blogspot

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. 

1. Phần css và Javascript:

Các bạn vào phần chủ đề => Chọn Tùy chỉnh HTML. Copy đoạn code dưới đây dán 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>


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

Các bạn vào phần bố cục => Chọn thêm một ứng dụng => HTML/ JAVASCRIPT => Dán đoạn code bên dưới vào phần nội dung.

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