Code tạo banner quảng cáo chạy tự động ngang web Các bạn lưu ý phần code có 2 phần: Phần 1: add vào css .rollBox{width:620px;overflow:hidden;margin:0 auto;} .rollBox .Cont{width:620px;ov[r]
(1)Code tạo banner quảng cáo chạy tự động ngang web Các bạn lưu ý phần code có phần: Phần 1: add vào css rollBox{width:620px;overflow:hidden;margin:0 auto;} rollBox Cont{width:620px;overflow:hidden;margin:0 auto;padding-top:20px;} rollBox ScrCont{width:10000000px;} rollBox Cont pic{width:130px;float:left;text-align:center;padding-right:20px;} *+html rollBox Cont pic{width:130px;float:left;text-align:center;padding-right:30px;} rollBox Cont pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;} rollBox Cont pic p{line-height:26px;color:#505050;} rollBox Cont a:link,.rollBox Cont a:visited{color:#626466;text-decoration:none;} rollBox Cont a:hover{color:#f00;text-decoration:underline;} rollBox #List1,.rollBox #List2{float:left;} Các bạn có thể sữa lại cấu hình chiều rộng cao theo web mình ( nhớ là back up web trước nhé sau đó test đầy đủ hãy sử dụng) Phần 2: các bạn chèn vào nên cần đặt slide nhé: Lưu ý các phần sau: Màu đỏ là link hình nút chuyển hướng qua trái phải, các bạn có thể thiết kế lại cho đẹp và up lên web lấy link chèn vào nhé Màu xanh là link web tùy chỉnh cho hình ảnh và link hình ảnh kèm theo <div class="rollBox"><img class="img1" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()" src="http://www.sanphamnam.com/files/assets/Linkngoai/shqm_left_pic.gif" alt="" width="12" height="31" /> <div id="ISL_Cont" class="Cont"> <div class="ScrCont"> <div id="List1"><! B?t ??u > <div class="pic"><a href="link web" target="_blank"><img src="Link hình" alt="" width="130" height="95" /></a></div> <div class="pic"><a href="link web" target="_blank"><img src="Link hình" alt="" width="130" height="95" /></a></div> <div class="pic"><a href="link web" target="_blank"><img src="Link hình" alt="" width="130" height="95" /></a></div> <div class="pic"><a href="link web" target="_blank"><img src="Link hình" alt="" width="130" height="95" /></a></div> <div class="pic"><a href="link web" target="_blank"><img src="Link hình" alt="" width="130" height="95" /></a></div> <div class="pic"><a href="link web" target="_blank"><img src="Link hình" alt="" width="130" height="95" /></a></div> <div class="pic"><a href="link web" target="_blank"><img src="Link hình" alt="" width="130" height="95" /></a></div> <div class="pic"><a href="link web" target="_blank"><img src="Link hình" alt="" width="130" height="95" /></a></div> <div class="pic"><a href="link web" target="_blank"><img src="Link hình" alt="" width="130" height="95" /></a></div> (2) <div class="pic"><a href="link web" target="_blank"><img src="Link hình" alt="" width="130" height="95" /></a></div> <! K?t th?c ></div> <div id="List2"> </div> </div> </div> <img class="img2" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()" src="http://www.sanphamnam.com/files/assets/Linkngoai/shqm_right_pic.gif" alt="" width="12" height="31" /></div> <script type="mce-text/javascript" language="javascript">// <![CDATA[ // ><![CDATA[//><!-var Speed = 10; // var Space = 10; // var PageWidth = 160; // var fill = 0; // var MoveLock = false; var MoveTimeObj; var Comp = 0; var AutoPlayObj = null; GetObj("List2").innerHTML = GetObj("List1").innerHTML; GetObj('ISL_Cont').scrollLeft = fill; GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);} GetObj("ISL_Cont").onmouseout = function(){AutoPlay();} AutoPlay(); function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval ('document.all.'+objName)}} function AutoPlay(){ // clearInterval(AutoPlayObj); AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); // } function ISL_GoUp(){ // if(MoveLock) return; clearInterval(AutoPlayObj); MoveLock = true; MoveTimeObj = setInterval('ISL_ScrUp();',Speed); } function ISL_StopUp(){ // clearInterval(MoveTimeObj); if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){ Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth); CompScr(); }else{ MoveLock = false; } AutoPlay(); } function ISL_ScrUp(){ // if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj ('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth} GetObj('ISL_Cont').scrollLeft -= Space ; } function ISL_GoDown(){ // clearInterval(MoveTimeObj); if(MoveLock) return; clearInterval(AutoPlayObj); MoveLock = true; ISL_ScrDown(); MoveTimeObj = setInterval('ISL_ScrDown()',Speed); } (3) function ISL_StopDown(){ // clearInterval(MoveTimeObj); if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != ){ Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill; CompScr(); }else{ MoveLock = false; } AutoPlay(); } function ISL_ScrDown(){ // if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;} GetObj('ISL_Cont').scrollLeft += Space ; } function CompScr(){ var num; if(Comp == 0){MoveLock = false;return;} if(Comp < 0){ // if(Comp < -Space){ Comp += Space; num = Space; }else{ num = -Comp; Comp = 0; } GetObj('ISL_Cont').scrollLeft -= num; setTimeout('CompScr()',Speed); }else{ // if(Comp > Space){ Comp -= Space; num = Space; }else{ num = Comp; Comp = 0; } GetObj('ISL_Cont').scrollLeft += num; setTimeout('CompScr()',Speed); } } // ><! // ]]></script> Chúc các bạn thành công (4)