图片自动播放特效

作者:sky 点击:1452 评论:0 发布时间:周日, 10/12/2008 - 05:07 所属分类:图像特效

图片定时自动切换，也可以点击底部滚动条切换。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /> <title>图片自动播放 zzjs.net收集，站长特效网欢迎您。</title> <style type="text/css"> * { margin: 0; padding: 0 } body { background: #1c1c1c; width: 100%; height: 100% } img { border: none } #www_zzjs_net { position: absolute; top: 30px; left: 30%; width: 400px; height: 220px; } #www_zzjs_net img { width: 200px; height: 200px } #www_zzjs_net .main_zzjs_net{ position: absolute; top: 0; left: 0; width: 400px; height: 220px; z-index: 999; background: #1f1f1f; opacity: 0.0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer } #www_zzjs_net .left_zzjs_net { position: absolute; z-index: 998; top: 0; left: 0; width: 100px; height: 200px; background: #1f1f1f; opacity: 0.9; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); } #www_zzjs_net .right_zzjs_net { position: absolute; z-index: 998; top: 0; left: 300px; width: 100px; height: 200px; background: #1f1f1f; opacity: 0.9; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); } #www_zzjs_net .scrollbar { position: absolute; z-index: 1000; bottom: 0; left:0; background: transparent; border-bottom: 2px solid #292929; width: 400px; height: 18px; cursor: pointer; } #www_zzjs_net .scrollbar .currentScroll { position: absolute; left: 0; top: 0px; width: 30px; height: 18px; border-bottom: 2px solid #fc4e08; background: #1c1c1c; text-align: center; color: #fff; font-weight: bold; } #www_zzjs_net .zzjs{ left: 0; top: 0; width:400px; height: 200px; overflow: hidden; } #www_zzjs_net .zzjs_net{ list-style: none; width: 1700px; margin-left: 100px; } #www_zzjs_net .zzjs_net li{ float: left; display: inline; } #www_zzjs_net .zzjs_net li a { width: 200px; height: 200px; } #content { position: absolute; top: 280px; left: 30%; width: auto; height: auto; color: #fff; } </style> <script> var sliderIMG = (function(){ function getElementsByClass(object, tag, className) { var o = object.getElementsByTagName(tag); for ( var i = 0, n = o.length, ret = []; i < n; i++) if (o[i].className == className) ret.push(o[i]); if (ret.length == 1) ret = ret[0]; return ret; } function MouseXY(e){ if(window.event){ return {x:window.event.offsetX, y:window.event.offsetY}; }else{ return {x:e.layerX, y:e.layerY}; } } function addEvent(elem, type, handle){ if(window.addEventListener){ elem.addEventListener(type, handle, false); }else if(window.attachEvent){ elem.attachEvent('on'+type, handle); }else{ elem['on'+type] = handle; } } function _property(obj){ var o = {}; for(var pro in obj){ o[pro] = obj[pro]; } return o; } function www_zzjs_net(id,properties){ this.DIV = document.getElementById(id); this.DIVpros = _property(properties); this.init = function(){ this.zzjs = getElementsByClass(this.DIV, 'div', 'zzjs'); this.face = getElementsByClass(this.DIV, 'div', 'main_zzjs_net'); this.current = getElementsByClass(this.DIV, 'span', 'currentScroll'); this.count = this.DIVpros.count; this.spanWidth = this.zzjs.offsetWidth/this.count; this.current.style.width = this.spanWidth + 'px'; this.current.innerHTML = 1; this.scrollBar = this.current.parentNode; this.index = 0; if(this.index == 0){ this.current.style.left = 0 + 'px'; } this.timer = this.DIVpros.timer || 5000; this.time = this.DIVpros.time || 10; this.speed = this.DIVpros.speed || 5; this.target = 0; this.auto = this.DIVpros.auto || false; this.check = true; this.che = false; clearInterval(this.doRoll); clearInterval(this.checkedRoll); clearTimeout(this.autoed); } this.start = function(e){ this.init(); var self = this; addEvent(self.face, 'click', function(e){ var mouse = MouseXY(e); var x = mouse.x; var y = mouse.y; if(self.check){ self.check = false; self.roll(x, y, e); } }); addEvent(self.scrollBar, 'click', function(e){ var mouse = MouseXY(e); var x = mouse.x; if(self.check){ self.check = false; self.checkRoll(x, e); } clearTimeout(this.autoed); self.che == false if(self.auto == false) return; if(self.auto && self.che == false){ clearTimeout(this.autoed); clearInterval(this.checkedRoll); clearInterval(this.doRoll); self.autoed = setTimeout(function(e){ self.autoScroll(e); }, self.timer); } }); if(self.auto == true){ addEvent(self.face , 'mouseover', function(){ self.auto = false; self.autoScroll(e); }); addEvent(self.face , 'mouseout', function(){ self.auto = true; self.autoed = setTimeout(function(e){ self.autoScroll(e); }, self.timer); }); self.autoed = setTimeout(function(e){ if(self.check){ self.check = false; self.autoScroll(e); } }, self.timer); } } this.autoScroll = function(e){ clearTimeout(this.autoed); var self = this; if(self.auto == true){ var left = parseInt(self.current.style.left); var x = left + self.spanWidth; if(left == self.zzjs.offsetWidth - self.spanWidth){ x = 0; } self.checkRoll(x, e); self.autoed = setTimeout(function(){ self.autoScroll(e); }, self.timer); } } this.setOpacity = function(){ } //欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站.收集大量高质量js代码，还有许多广告代码下载。 this.roll = function(x, y, e){ clearTimeout(this.autoed); clearInterval(this.checkedRoll); clearInterval(this.doRoll); var w = this.zzjs.offsetWidth; var h = this.zzjs.offsetHeight; var self = this; if(y>=0 && y<=h){ var step = []; var target = []; if(x>0 && x<w/2){ var t1 = self.zzjs.scrollLeft + w/2; self.index++; }else{ //欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 var t1 = self.zzjs.scrollLeft - w/2; self.index--; } var t2 = self.index*self.spanWidth; if(self.index<0 || self.index>self.count-1){ var left = parseInt(self.current.style.left), n; if(self.index<0) { self.index = 0; t2 = self.spanWidth*(self.count-1); } if(self.index>self.count-1) { self.index = self.count-1; t2 = 0; } n = Math.floor((t2 - left)/self.spanWidth); t1 = self.zzjs.scrollLeft + w/2*n; self.index += n; } target[0] = t1; target[1] = t2; this.doRoll = setInterval(function(){ self.doing(self, step, target); }, this.time); } } //欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就.是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 this.doSrcoll = function(step, target){ if(step[0] != 0){ this.zzjs.scrollLeft += step[0]; var left = parseInt(this.current.style.left) + step[1]; this.current.style.left = left + 'px'; this.current.innerHTML = this.index+1; this.check = false; this.che = true; }else{ this.zzjs.scrollLeft = target[0]; this.current.style.left = target[1] + 'px'; clearInterval(this.doRoll); clearInterval(this.checkedRoll); this.check = true; this.che = false; } } //欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码.，还有许多广告代码下载。 this.doing = function(self, step, target){ var now = self.zzjs.scrollLeft; var left = parseInt(self.current.style.left); step[0] = self.getStep(target[0], now, self.speed); step[1] = self.getStep(target[1], left, self.speed); self.doSrcoll(step, target); } this.checkRoll = function(x,e){ clearTimeout(this.autoed); //欢迎来到x站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 clearInterval(this.doRoll); clearInterval(this.checkedRoll); var left = parseInt(this.current.style.left); var n = Math.floor((x - left)/this.spanWidth); this.index += n; var target = [], step = []; target[0] = this.zzjs.scrollLeft + n*this.zzjs.offsetWidth/2; target[1] = left + n*this.spanWidth; var self = this; this.checkedRoll = setInterval(function(){ self.doing(self, step, target); }, this.time); } this.getStep = function(target, now, speed){ var step = (target - now)/speed; if(step == 0) return 0; if (Math.abs(step) < 1) return (step > 0 ? 1 : -1); return step; } } //欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码.，还有许多广告代码下载。 return { create : function(id, pros){ var IMG = new www_zzjs_net(id, pros); IMG.start(); } } })(); </script> <script> window.onload = function(){ sliderIMG.create('www_zzjs_net',{count:8, speed:5, auto:true,timer:5000}); }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 </script> </head> <body> <a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>  <div id='www_zzjs_net'> <div class='top STYLE1'></div> <div class='zzjs'> <ul class='zzjs_net'> <li><a href='http://zzjs.net'><img src='/ad/1.gif' /></a></li> <li><a href='http://zzjs.net'><img src='/ad/2.gif' /></a></li> <li><a href='http://www.zzjs.net'><img src='/ad/3.gif' /></a></li> <li><a href='http://zzjs.net'><img src='/ad/4.gif' /></a></li> <li><a href='http://www.zzjs.net'><img src='/ad/5.gif' /></a></li> <li><a href='http://zzjs.net'><img src='/ad/1.gif' /></a></li> <li><a href='http://www.zzjs.net'><img src='/ad/2.gif' /></a></li> <li><a href='http://www.zzjs.net'><img src='/ad/3.gif' /></a></li> <li><a href='http://zzjs.net'><img src='/ad/4.gif' /></a></li> </ul> </div> <div class='main_zzjs_net'></div> <div class='left_zzjs_net'></div> <div class='right_zzjs_net'></div> <div class='scrollbar'> <span class='currentScroll'></span> </div> </div> <div id='content'> <h3>使用方法：</h3> <p>sliderIMG.create('DIVid',{count:*, speed:*, auto:*, timer:*}); </p> <br /> <pre>必须参数： count ----> 数字类型，图片数量; 可选参数： speed ----> 数字类型，滚动速率，默认为：5； auto ----> 布尔类型，设置自动滚动，为true则自动，反之不自动，默认为： false; timer ----> 数字类型，设置每个几秒自动滚动一次，默认为： 5000ms = 5s; </pre> </div> </body> </html>

提示：你可以先修改部分代码再运行。

顶一下

(2)

66.67%

踩一下

(1)

33.33%

标签: