html中同时添加多个滚动图片区域出现问题
来源:互联网 发布:如何投诉淘宝 编辑:程序博客网 时间:2024/06/06 04:59
以下是我在做第一个html文件,界面和风格有点僵化,但毕竟是新手情有可原,但是在添加多个滚动区域的时候发现第一个区域的滚动图片可以正常播放,第二个就出现了问题,下面我就问题表现代码附带,希望看到的小伙伴看看哪出了问题。第一个滚动区域我写的是:div id = b1;第二个滚动区域我写的是:div id = b2 下面代码是滚动区域<script type="text/javascript"> //主函数 var s=function(){ var interv=2000; //切换间隔时间 var interv2=10; //切换速度 var opac1=80; //文字背景的透明度 var source="show" //焦点轮换图片容器的id名称 //获取对象 function getTag(tag,obj){ if(obj==null){ return document.getElementsByTagName(tag); }else{ return obj.getElementsByTagName(tag); } } function getid(id){ return document.getElementById(id); }; var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3; var id=getid(source); id.removeChild(getTag("div",id)[0]); var li=getTag("li",id); var div=document.createElement("div"); var title=document.createElement("div"); var span=document.createElement("span"); var button=document.createElement("div"); button.className="button"; for(var i=0;i<li.length;i++){ var a=document.createElement("a"); a.innerHTML=i+1; a.onclick=function(){ clearTimeout(timer); clearTimeout(timer2); clearTimeout(timer3); j=parseInt(this.innerHTML)-1; scton=0; t=63; opac=0; fadeon(); }; a.className="b1"; a.onmouseover=function(){ this.className="b2"; }; a.onmouseout=function(){ this.className="b1";sc(j); }; button.appendChild(a); } //控制图层透明度 function alpha(obj,n){ if(document.all){ obj.style.filter="alpha(opacity="+n+")"; }else{ obj.style.opacity=(n/100); } } //控制焦点按钮 function sc(n){ for(var i=0;i<li.length;i++){ button.childNodes[i].className="b1"; }; button.childNodes[n].className="b2"; } title.className="num_list"; title.appendChild(span); alpha(title,opac1); id.className="d1"; div.className="d2"; id.appendChild(div); id.appendChild(title); id.appendChild(button); //渐显 var fadeon=function(){ opac+=5; div.innerHTML=li[j].innerHTML; span.innerHTML=getTag("img",li[j])[0].alt; alpha(div,opac); if(scton==0){ sc(j); num=-2; scrolltxt(); scton=1; }; if(opac<100){ timer=setTimeout(fadeon,interv2); }else{ timer2=setTimeout(fadeout,interv); } }; //渐隐 var fadeout=function(){ opac-=5; div.innerHTML=li[j].innerHTML; alpha(div,opac); if(scton==0){ num=2; scrolltxt(); scton=1; } if(opac>0){ timer=setTimeout(fadeout,interv2); }else{ if(j<li.length-1){ j++; }else{ j=0; } fadeon(); } }; //滚动文字 var scrolltxt=function(){ t+=num; span.style.marginTop=t+"px"; if(num<0 && t>3){ timer3=setTimeout(scrolltxt,interv2); }else if(num>0 && t<62){ timer3=setTimeout(scrolltxt,interv2); }else{ scton=0 } }; fadeon(); } //初始化 window.onload=s; </script>最后出来的效果图如下:
0 0
- html中同时添加多个滚动图片区域出现问题
- [JS]HTML中把图片划分成多个作用区域的区域标记
- POI3.2中同时多个sheet中插入多个图片的问题
- SQL中union和多个order by同时出现的问题
- iOS中防止多个按钮同时点击出现的问题
- UIimageView中图片滚动出现
- JQ复选框,选择后按钮触发后出现图片,可同时出现多个图片
- eclipse添加多个项目同时启动时的问题
- 同时添加多个用户
- HTML:img标签usemap,一个图片中添加多个链接
- HTML:img标签usemap,一个图片中添加多个链接
- 图片 文字 同时滚动
- 添加tabs出现两个滚动条问题
- html中设置某个区域手动上下滚动
- 不间断滚动代码,可支持N多个同时滚动
- html中图片的添加
- HTML中实现图片滚动效果
- Android中HorizontalScrollView添加水平滚动图片
- Spring - 资源文件properties的配置
- 在vusal studio 2008中编译c语言
- java 多线程join,合并线程
- 帝国CMS
- destroy-method="close"的作用
- html中同时添加多个滚动图片区域出现问题
- Robbins-Monro 随机逼近算法和序列学习(Sequential Learning)
- Compiler_编译原理复习小注
- 为什么每个前端开发者都要理解网页渲染?[转]
- ios硬编码支持的音频格式
- 【VC6.0】文件操作,读取PE文件
- 利用nginx做后台服务器的动态加载和负载均衡
- Emoji表情杀手
- JS实现经典生产者消费者模型