js图片轮播简单代码
2014-02-07 22:48
676 查看
一个较简单的js图片轮播网页特效,一张一张切换图片,就像放幻灯片一样,有渐变过渡效果。兼容IE,火狐等,图片路径定义在JavaScript代码内,请按顺序处理好所需图片,修改JS代码和CSS就可以了,美工好的自己拿去美化吧。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <style> #cnt{width:100%;height:80%;} .ctrl{text-align:center;border:1px solid gray;font-size:12px;cursor:pointer;} </style> <script defer='defer'> <!-- var curOpac = 0; var filterTimer; var isIE = /internet explorer/i.test(window.navigator.appName); function MyScroll(cnt, control){ this.data = []; // 存放图片路径 this.interval = 3000; // 过渡一次的间隔时间(过渡时间+图片显示时间) this.timer; // 定时器:控制当前显示的图片 this.container = cnt; this.curFrame = 0; this.oldFrame = 0; this.controls = control; // 按钮集合 Global = this; // 获取对象的指针 this.run = function(){ this.timer = window.setInterval("Global.showFrame()", this.interval); } // 按钮的处理程序 this.go = function(i){ curOpac = 0; // 透明度归0 this.curFrame = i; // 当前要过渡的图片 this.stop(); // 清空计时器 this.showFrame(); // 当前图片过渡 this.run(); // 循环播放 } this.stop = function(){ window.clearInterval(this.timer); window.clearInterval(filterTimer); } this.showFrame = function(){ // 设置当前按钮样式 this.controls[this.oldFrame].style.backgroundColor = "white"; this.controls[this.curFrame].style.backgroundColor = "gray"; if(isIE) this.container.style.filter = "alpha(opacity=0)"; else this.container.style.cssText = "-moz-opacity:0"; this.container.innerHTML = this.data[this.curFrame]; filterTimer = window.setInterval("blend()", 100); this.oldFrame = this.curFrame; this.curFrame ++; if(this.curFrame == this.data.length){ this.curFrame = 0; } } } // 增加透明度 function blend(){ curOpac+=10; if(isIE) Global.container.style.filter='alpha(opacity=' + curOpac + ')'; else Global.container.style.cssText = "-moz-opacity:" + curOpac/100.0; if(curOpac == 100){ curOpac = 0; window.clearInterval(filterTimer); } } //开始 function startIt(){ var imgArr = []; // 创建4个图片对象保存图片路径 for(var i=0;i<4;i++){ imgArr[i] = new Image(); imgArr[i].src = "/jscss/demoimg/wall" + (i + 1) + ".jpg"; } var controlArr = $("mainTb").getElementsByTagName("span"); for(var i=0;i<controlArr.length;i++){ controlArr[i].tag = i; controlArr[i].onclick = function(){ myScroll.go(this.tag); } } var myScroll = new MyScroll($("cnt"), controlArr); myScroll.data.push("<img src='" + imgArr[0].src + "'>"); myScroll.data.push("<img src='" + imgArr[1].src + "'>"); myScroll.data.push("<img src='" + imgArr[2].src + "'>"); myScroll.data.push("<img src='" + imgArr[3].src + "'>"); myScroll.go(0); } window.onload = startIt; function $(id){ return document.getElementById(id);} //--> </script> <BODY> <table width="300" height="100" id="mainTb"> <tr><th rowspan="4"><div id="cnt"> </div></td> <td width="15"><span class="ctrl"> 1 </span></td></tr> <tr><td><span class="ctrl"> 2 </span></td></tr> <tr><td><span class="ctrl"> 3 </span></td></tr> <tr><td><span class="ctrl"> 4 </span></td></tr> </table> </BODY> </HTML>
相关文章推荐
- js最简单焦点图片轮播代码
- 简单的js图片轮换代码(js图片轮播)
- 简单的js图片轮换代码(js图片轮播)
- JS图片放大查看效果! (代码全部重构,兼容IE,FF,OP,简单,健壮)
- 最简单的图片轮播--利用myfocus js焦点图库插件
- 用JS实现图片轮播效果代码(一)
- 简单的实现点击箭头图片切换的js代码
- js/html/css做一个简单的图片自动(auto)轮播效果//带注释
- 最简单的JS图片轮显-实现代码
- 带左右箭头图片轮播的JS代码
- 最简单的JavaScript图片轮播代码(两种方法)
- JavaEE day03 使用JS完成简单的数据校验、完成图片轮播效果、完成页面定时弹出广告、完成表单校验
- 最简单的JavaScript图片轮播代码(两种方法)
- JS制作简单图片轮播--通过调整margin制作
- js实现图片轮播(根据同事代码整理而得)
- js支持键盘控制的左右切换立体式图片轮播效果代码分享
- JQuery悬停控制图片轮播――代码简单
- javascript 超简单代码实现图片轮播功能
- 一段非常简单的让图片自动切换js代码
- js带点自动图片轮播幻灯片特效代码分享