订阅如何实现在网页中图片与文字循环滚动
来源：网络收集 点击： 时间：2024-04-03先准备要制作成滚动效果的图片.我这里共有5张图片
2/5这里只是实现滚动效果,因此对画面效果没有太多讲究,所以CSS样式比较简单,以下是显示这次效果的样式,这里所有的代码都是放在一个文件里.
style type=text/css
!--
ul,li,div{margin:0;
padding:0; font-size:16px;list-style:none;text-align:center;
}
#test {
width:678px; float:left; overflow:hidden;height:144px; border:none;
}
#intest {
float: left;width: 800%;
}
#test1,#test2{height:144px;
float:left; display:inline-table;
}
#test1 li,#test2 li{ width:127px;height:144px;float:left; padding-left:8px; }
#test1 li img,#test2 li img{ display:block;background:#ccc; padding:1px; border:1px solid #ccc;}
#test1 li span,#test2 li span{ width:127px; height:30px; line-height:30px; text-align:center;overflow:hidden;
}
#test1 {
float: left;
}
#test2 {float: left;}
.lmboxb ul {margin-left:12px;margin-top:5px;}
.lmboxb ul li {
}
.lmboxb ul li a {
line-height:24px;}
}
--
/style
3/5以下是实现效果的文字与图片设置的基本html代码:
div id=test
div id=intest
div class=lmboxb id=test1
ul
li
diva href=#img src=images/1.jpg width=140 height=106 alt=奶皇包 //a/divdiva href=#̻奶皇包/a/div
/li
li
diva href=#img src=images/2.jpg width=140 height=106 alt=糯米鸡 //a/divdiva href=#糯米鸡/a/div
/li
li
diva href=#img src=images/3.jpg width=140 height=106 alt=凤爪 //a/divdiva href=#凤爪/a/div
/li
li
diva href=#img src=images/4.jpg width=140 height=106 alt=牛肉丸 //a/divdiva href=#牛肉丸/a/div
/li
li
diva href=#img src=images/5.jpg width=140 height=106 alt=叉烧包 //a/divdiva href=#叉烧包/a/div
/li
/ul
/div
div id=test2/div
/div
/div
div style=width:100%;
/div
4/5接着是最重要部分javascript代码,就是这个代码让图片与文字滚动起来的.
script
!--
var speed=20; //数字越大速度越慢
var tab=document.getElementById(test);
var tab1=document.getElementById(test1);
var tab2=document.getElementById(test2);
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
--
/script
5/5以下是实现后的效果,虽然页面不华丽,重在实现效果.
网页滚动 版权声明：
1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。
2、本站仅提供信息发布平台，不承担相关法律责任。
3、若侵犯您的版权或隐私，请联系本站管理员删除。
4、文章链接：http://www.1haoku.cn/art_409850.html
