web 前端（五）

最新推荐文章于 2023-03-21 10:36:05 发布

lanximu

最新推荐文章于 2023-03-21 10:36:05 发布

阅读量786

点赞数

分类专栏： web前端面试笔试文章标签： WEB 前端

web前端同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

面试笔试

11 篇文章 0 订阅

订阅专栏

js 实现图片滚动

原理：我是这么认为的。首先就是显示效果层，最外层，例如宽500.高200，超出的隐藏掉。定位左右滚动按钮图片；
第二层，内容排列层；许多图片装在这个无限大的容器内，操作需要几个图片对象能够平铺与最外层显示达到一致；
控制位移，也就是每一次移动的距离？这还要你的图片对象的宽度是否一样。。。直接根据图片对象的宽，加上两个图片之间的距离计算出每一次移动的距离；如果不一样的话，需要每一次都获取到图片的宽以及两图之间的距离。假如一次移动四张图片就需要获取4个对象的宽和距离；
至于定时嘛setInterval()；

<html>
  <head>
     <title>一个很好的js控制图片滚动效果</title>
  <style>.shishi {border: 1px solid #CBCBCB;}</style>
  </head>
  <body>
<table width="700" border="0" cellpadding="0" cellspacing="0" class="shishi" align="center">
   <tr>
     <td><font color="#f2f2f2"><script>//
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){
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="11.html" target="_blank"><img src="/img/11.jpg "  style="border:1px solid #f2f2f2"/></a>"
imgHtml += "<a href="12.html" target="_blank"><img src="/img/12.jpg "  style="border:1px solid #f2f2f2"/></a>"
imgHtml += "<a href="13.html" target="_blank"><img src="/img/13.jpg "  style="border:1px solid #f2f2f2"/></a>"
imgHtml += "<a href="14.html" target="_blank"><img src="/img/14.jpg "  style="border:1px solid #f2f2f2"/></a>"
imgHtml += "<a href="15.html" target="_blank"><img src="/img/15.jpg "  style="border:1px solid #f2f2f2"/></a>"
imgHtml += "<a href="16.html" target="_blank"><img src="/img/16.jpg "  style="border:1px solid #f2f2f2"/></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("imgs/11.jpg","../11.html","名字","_blank")

theAutoScroll.play()
</Script></font>
</td>
</tr>
</table>
</body>
</html>

lanximu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web 前端（五）

js 实现图片滚动原理：我是这么认为的。首先就是显示效果层，最外层，例如宽500.高200，超出的隐藏掉。定位左右滚动按钮图片；第二层，内容排列层；许多图片装在这个无限大的容器内，操作需要几个图片对象能够平铺与最外层显示达到一致；控制位移，也就是每一次移动的距离？这还要你的图片对象的宽度是否一样。。。直接根据图片对象的宽，加上两个图片之间的距离计算出每一次移动的距离；如果不一样的话，需
复制链接

扫一扫