Phiên bản đầy đủ: jsB@nk » Hình ảnh » Trình diễn ảnh » Luồng ảnh di chuyển
URL: https://www.javascriptbank.com/streaming-banners.html
Đoạn mã này sẽ làm cho ảnh trong hai thẻ <div>: slideA, slideB di chuyển">di chuyển theo chiều từ dưới lên trên nhưng xen kẽ nhau. Rất dễ cài đặt và chỉnh sửa theo ý mình.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Trình diễn ảnh » Luồng ảnh di chuyển
URL: https://www.javascriptbank.com/streaming-banners.html
<style type="text/css">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/.jsbank_sample_cont {margin: 20px; padding: 20px;}.jsbank_sample_tit {font-weight: bold; margin-bottom: 10px; padding: 5px; width: auto; background-color: #c0c0c0; border: 5px solid #a0a0a0; color: black; text-align: center;}/*Created by: Jeroen Haan Web Site: http://www.haan.net/*/#slideCont {margin: 10px;border: solid 1px #000;text-align: center;}#slideCont img {margin: 5px;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript">/* ----------------------------------------------- Streaming banners - v.1.1 (c) 2006 www.haan.net contact: jeroen@haan.net You may use this script but please leave the credits on top intact. Please inform us of any improvements made. When useful we will add your credits. ------------------------------------------------ *//* usage<body><div id="slideCont" style="position:relative;z-index:1;width:140px;left:0px;overflow:hidden;"> <div id="slideA" style="position:absolute;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;"> your banners (images inside anchor tags)<div id="slideB" style="position:relative;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;"> your banners (images inside anchor tags)</div></div></div></body>*/function clip() { // width of the banner container var contWidth = 150; // height of the banner container var contHeight = 300; var id1 = document.getElementById('slideA'); var id2 = document.getElementById('slideB'); var height = id1.offsetHeight; id1.style.top = parseInt(id1.style.top)-1 + 'px'; document.getElementById('slideCont').style.height = contHeight + "px"; document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)'; id2.style.display = ''; if(parseFloat(id1.style.top) == -(height/2)) { id1.style.top = '0px'; } setTimeout(clip,50)}// Multiple onload function created by: Simon Willison// http://simon.incutio.com/archive/2004/05/26/addLoadEventfunction 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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="slideCont" style="position:relative;z-index:1;width:140px;left:400px;overflow:hidden;"> <div id="slideA" style="position:absolute;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;"> <a href="http://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="44" border="0"></a> <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="120" height="60" border="0"></a> <a href="http://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="64" border="0"></a> <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="126" height="44" border="0"></a> <a href="http://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="44" border="0"></a> <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="126" height="34" border="0"></a> <div id="slideB" style="position:relative;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;"> <a href="http://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="44" border="0"></a> <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="120" height="60" border="0"></a> <a href="http://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="64" border="0"></a> <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="126" height="44" border="0"></a> <a href="http://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="44" border="0"></a> <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="126" height="34" border="0"></a> </div> </div></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->