網(wǎng)上有很多圖片無(wú)縫滾動(dòng)代碼,這個(gè)可以很容易地修改方向和添加圖片,關(guān)鍵地方我添加了文字注釋。
幾點(diǎn)說(shuō)明:
1、為了個(gè)人使用方便,圖片地址和鏈接地址已替換為文字,請自行添加
2、圖片大小最好一致
3、縱向滾動(dòng)時(shí),如果想讓圖片排成單列,請把滾動(dòng)區域寬度設成單張圖片寬度(像素單位),兩張以上為一行滾動(dòng)時(shí)要讓滾動(dòng)區域寬度=單張圖片寬度*圖片數。
<script>//<!--代碼開(kāi)始-->
var speed = 15;<!--速度控制,數值越大速度越慢-->
var intAWidth = 825;<!--滾動(dòng)區域寬度-->
var intAHeight = 250;<!--滾動(dòng)區域高度-->
var direction = "left";<!--滾動(dòng)方向-->
var collectScroll;
var tab;
var tab1;
var tab2;
var MyMar;
function autoScroll(){
this.items = [];
this.addItem = function(adURL,strURL,strBak,intTarget){
var newItem = {};
newItem.adURL = adURL;
newItem.strURL = strURL;
newItem.strBak = strBak;
newItem.intTarget = intTarget;
this.items[this.items.length] = newItem;
}
this.play = function(){
collectScroll = this.items
scrollHtml()
tab=document.getElementById("demo");
tab1=document.getElementById("demo1");
tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
MyMar=setInterval(Marquee,speed);
}
}
function scrollHtml(){
var imgHtml = ""
for(var i=0;i<collectScroll.length;i++){
var a = collectScroll
imgHtml += "<a href=\""+a.strURL+"\" target=\""+a.intTarget+"\"><img src=\""+a.adURL+"\" alt=\""+a.strBak+"\" border=\"0\" /></a>"
}
var b,c,d
if(direction == "left" || direction == "right"){
b = "<div id=\"indemo\" style=\"float: left;width: 800%\">"
c = " style=\"float: left\""
d = "</div>"
}else{
b = ""
c = ""
d = ""
}
document.writeln("<div id=\"demo\" onmouseover=\"clearInterval(MyMar)\" onmouseout=\"MyMar=setInterval(Marquee,speed)\" style=\"overflow:hidden; width:"+intAWidth+"px;height:"+intAHeight+"px\">")
document.writeln(b+"<div id=\"demo1\""+c+">")
document.writeln(imgHtml)
document.writeln("</div><div id=\"demo2\""+c+">"+d+"</div></div>")
}
function Marquee(){
if(direction == "top"){
if(tab2.offsetTop-tab.scrollTop<=0){
tab.scrollTop-=tab1.offsetHeight
}else{
tab.scrollTop++
}
}else if(direction == "down"){
if(tab1.offsetTop-tab.scrollTop>=0)
tab.scrollTop+=tab2.offsetHeight
else{
tab.scrollTop--
}
}else if(direction == "left"){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}else if(direction == "right"){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft--
}
}
}
var theAutoScroll= new autoScroll();
theAutoScroll.addItem("圖片地址","鏈接地址","鼠標指向時(shí)文字說(shuō)明","_blank")
theAutoScroll.addItem("圖片地址","鏈接地址","鼠標指向時(shí)文字說(shuō)明","_blank")
theAutoScroll.addItem("圖片地址","鏈接地址","鼠標指向時(shí)文字說(shuō)明","_blank")
theAutoScroll.addItem("圖片地址","鏈接地址","鼠標指向時(shí)文字說(shuō)明","_blank")
theAutoScroll.addItem("圖片地址","鏈接地址","鼠標指向時(shí)文字說(shuō)明","_blank")
theAutoScroll.addItem("圖片地址","鏈接地址","鼠標指向時(shí)文字說(shuō)明","_blank")
theAutoScroll.addItem("圖片地址","鏈接地址","鼠標指向時(shí)文字說(shuō)明","_blank")
theAutoScroll.addItem("圖片地址","鏈接地址","鼠標指向時(shí)文字說(shuō)明","_blank")
theAutoScroll.addItem("圖片地址","鏈接地址","鼠標指向時(shí)文字說(shuō)明","_blank")
theAutoScroll.addItem("圖片地址","鏈接地址","鼠標指向時(shí)文字說(shuō)明","_blank")
<!--此處可以繼續添加圖片-->
theAutoScroll.play()
</Script><!--代碼結束-->