js 实现图片滚动
原理:我是这么认为的。首先就是显示效果层,最外层,例如宽500.高200,超出的隐藏掉。定位左右滚动按钮图片;
第二层,内容排列层;许多图片装在这个无限大的容器内,操作需要几个图片对象能够平铺与最外层显示达到一致;
控制位移,也就是每一次移动的距离?这还要你的图片对象的宽度是否一样。。。直接根据图片对象的宽,加上两个图片之间的距离计算出每一次移动的距离;如果不一样的话,需要每一次都获取到图片的宽以及两图之间的距离。假如一次移动四张图片就需要获取4个对象的宽和距离;
至于定时嘛setInterval();
<html>
var speed = 20;<!--速度控制,数值越大速度越慢-->
var intAWidth = 850;<!--滚动区域宽度-->
var intAHeight = 157;<!--滚动区域高度-->
var direction = "left";<!--滚动方向-->
var collectScroll;
var tab;
var tab1;
var tab2;
var MyMar;
function autoScroll(){
this.items = [];
this.addItem = function(adURL,strURL,strBak,intTarget){
}
this.play = function(){
}
}
function scrollHtml(){
var imgHtml = ""
for(var i=0;i<collectScroll.length;i++){
imgHtml += "<a href="11.html" target="_blank"><img src="/img/11.jpg "
imgHtml += "<a href="12.html" target="_blank"><img src="/img/12.jpg "
imgHtml += "<a href="13.html" target="_blank"><img src="/img/13.jpg "
imgHtml += "<a href="14.html" target="_blank"><img src="/img/14.jpg "
imgHtml += "<a href="15.html" target="_blank"><img src="/img/15.jpg "
imgHtml += "<a href="16.html" target="_blank"><img src="/img/16.jpg "
}
var b,c,d
if(direction == "left" || direction == "right"){
}else{
}
document.writeln("<div id="demo" on
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"){
}else if(direction == "down"){
}else if(direction == "left"){
}else if(direction == "right"){
}
}
var theAutoScroll= new autoScroll();
theAutoScroll.addItem("imgs/11.jpg","../11.html","名字","_blank")
<!--此处可以继续添加图片-->
theAutoScroll.play()
</Script></font>
</td>
</tr>
</table>
</body>
</html>