java settimeout_this setTimeout setInterval

最新推荐文章于 2025-04-17 13:43:45 发布

原创最新推荐文章于 2025-04-17 13:43:45 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java settimeout

本文介绍了一个简单的图片轮播组件的实现方法，包括组件的基本结构、JavaScript 功能模块及使用方式。该组件能够实现图片自动轮播、手动切换等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 其实，这组件还很不足，还需要进一步优化扩展，版本还是1.0的。2 /*3 #wrapper_sp{height:222px;width: 170px;position:relative;z-index:1;clear:both;margin:4px 0 0 0;}4 #wrapper_sp .bound{height:225px;width: 170px;}5 #wrapper_sp .scroll_s{position:absolute;height:20px;width: 170px;display:block;bottom:0;left:0;z-index:2;}6 #wrapper_sp .bound a{height:225px;width: 170px;display: block;}7 #wrapper_sp .bound a img{height:225px;width: 170px;border:0;}8 #wrapper_sp .cpages{height:15px;float: right;margin:1px 0 0 5px;}9 #wrapper_sp .cpages a.shover{background: #ff0;color:#FF0101;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity:0.8;}10 #wrapper_sp .cpages a{float:left;height:14px;width:15px;background: #000;border:1px solid #ccc;margin:0 5px 0 0;color:#FFF; text-align:center; text-decoration:none;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity:0.5;}11 */12 /**13 * @function 单个图片轮换效果14 * @version 1.015 * @author zhangwang16 * @note 程序入口 m_scroll_pic.init(images,links,second,num,initImg,initLink);17 */18 19 var m_scroll_pic = (function(){20 var parentN = null;//img节点21 var linkN = null;//整个容器22 /**23 * @author zhangwang24 * @function 清楚前一个节点的样式25 * @version 1.026 */27 function clear(){28 var elem = document.getElementById('bhover_0' + this.pre);29 elem.className = '';30 }31 /**32 * @author zhangwang33 * @function 设置轮换节点样式以及图片节点的链接34 * @version 1.035 */36 function auto(){37 clear.apply(this);38 this.pre = this.time;39 linkN.setAttribute('src',this.arr[this.time - 1]);40 parentN.setAttribute('href',this.arrLinks[this.time - 1]);41 elem = document.getElementById('bhover_0' + this.time++);42 elem.className = 'shover';43 if(this.time > this.num){44 this.time = 1;45 }46 }47 /**48 * @author zhangwang49 * @function 图片滚动的构造函数50 * @version 1.051 */52 function m_scroll_pic(){//构造函数53 this.num = 4;//总图片个数54 this.time = 1;//当前在数组linkN第几个数值55 this.pre = 1;//保留当前第几个数值的记录56 this.arr = [];//图片地址57 this.arrLinks = [];//图片链接58 }59 /**60 * @author zhangwang61 * @function 图片滚动的原型62 * @version 1.063 */64 m_scroll_pic.prototype = {65 /**66 * @author zhangwang67 * @function 设置轮转时间68 * @param second 轮转间隔时间69 * @version 1.070 */71 autoScroll : function(second){72 var self = this;73 second = second ? second*1000 : 5000;74 setInterval(function(){

75 auto.apply(self);

76},second);77 },78 /**79 * @author zhangwang80 * @function 每次轮转更换图片以及点击图片链接和右下角81 * @param j 当前轮转图片的记录数82 * @version 1.083 */84 changeImage : function(j){85 self = this;86 clear.apply(self);87 this.time = j;88 this.pre = this.time;89 linkN.setAttribute('src',this.arr[this.time - 1]);90 parentN.setAttribute('href',this.arrLinks[this.time - 1]);91 elem = document.getElementById('bhover_0' + j);92 elem.className = 'shover';93 },94 /**95 * @author zhangwang96 * @function 设置点击图片链接97 * @param images 图片链接98 * @version 1.099 */100 setImages:function(images){101 if(!arguments[0]){throw new Error();}102 if(typeof images == 'string'){103 this.arr = images.split(',');104 }if(Object.prototype.toString.call(images) === '[object Array]'){105 this.arr = images;106 }107 },108 /**109 * @author zhangwang110 * @function 设置点击图片的链接111 * @param links 链接参数112 * @version 1.0113 */114 setLinks : function(links){115 if(!arguments[0]){throw new Error();}116 if(typeof links == 'string'){117 this.arrLinks = links.split(',');118 }if(Object.prototype.toString.call(links) === '[object Array]'){119 this.arrLinks = links;120 }121 },122 /**123 * @author zhangwang124 * @function 设置图片总数量125 * @param num 图片总数量126 * @version 1.0127 */128 setnum : function(num){129 this.num = num;130 },131 /**132 * @author zhangwang133 * @function 轮转图片结构134 * @param num 设置图片数量135 * @param initImg 默认放的第一张图片136 * @param length 轮转图片总数137 * @version 1.0138 */139 createTree : function(imgSrc,linkUrl,length){140 var wrapper = document.getElementById('wrapper_sp');141 var bound = document.createElement('div');142 var scroll_s = document.createElement('div');143 var clear = document.createElement('div');144 var cpages = document.createElement('span');145 var a = document.createElement('a');146 var img = document.createElement('img');147 148 img.setAttribute('src',imgSrc);149 img.setAttribute('id','ahover_01');150 a.setAttribute('href',linkUrl);151 a.setAttribute('target','_blank');152 bound.className = 'bound';153 scroll_s.className = 'scroll_s';154 cpages.className = 'cpages';155 clear.style.clear = 'both';156 157 wrapper.appendChild(scroll_s);158 wrapper.appendChild(bound);159 bound.appendChild(a);160 a.appendChild(img);161 scroll_s.appendChild(cpages);162 wrapper.appendChild(clear);163 164 for(var i = 1;i <= length;i++){

165 var link = document.createElement('a');

166 link.setAttribute('id','bhover_0' + i);

167 link.setAttribute('href','javascript:sp.changeImage(' + i + ')');

168 if(i == 1){

169 link.className = 'shover';

170 }

171 cpages.appendChild(link);

172 link.appendChild(document.createTextNode(i));

173 }

174 parentN = a;

175 linkN = img;

176 },