Js回旋滾軸方式的圖片幻燈片切換代碼_圖片特效特效

回旋滾軸幻燈片切換代碼，以回旋的方式切換每一張圖片，切換方式的改變讓人有耳目一新的感覺，以往大家常用的效果有淡入淡出、模糊切換等，本效果同樣可設定開始運行的圖片序號、自動運行時間、運行間隔設置等，同時也是您學習的好范例。

<html>
<head>
<meta http-equiv="Content-type" mrc="text/html; charset=utf-8" />
<title>Roller-回旋滾軸幻燈片切換代碼</title>
<style  type="text/css">background:url('http://p1.mb5u.com/texiao/1/20110225160607691')';
			for(var n=0;n<4;n++){
				this.mask[n].style.cssText = 'position:absolute;background:#fff;width:'+this.W/2+'px;height:'+this.H/2+'px;left:'+(n%2 == 0 ? 0 : this.W/2)+'px;top:'+(n>1 ? this.H/2 : 0) +'px';
			}
			H$(this.anchor+'convolution-1').style.cssText = 'position:absolute;border-width:0px '+this.W/4+'px;border-style:solid solid dashed dashed;border-color:#fff #fff transparent transparent;width:0;height:0;left:0;top:'+this.H/2+'px;font-size:0;line-height:0';
			H$(this.anchor+'convolution-2').style.cssText = 'position:absolute;border-width:'+this.H/4+'px 0px;border-style:dashed solid solid dashed;border-color:transparent #fff #fff transparent;width:0;height:0;left:'+this.W/2+'px;top:0;overflow:hidden;font-size:0;line-height:0';
			H$(this.anchor+'convolution-3').style.cssText = 'font-size:0;line-height:0;position:absolute;border-width:0px '+this.W/4+'px;border-style:dashed dashed solid solid;border-color:transparent transparent #fff #fff;width:0;height:0;left:'+this.W/2+'px;top:'+this.H/2+'px';
			H$(this.anchor+'convolution-4').style.cssText = 'font-size:0;line-height:0;position:absolute;border-width:'+this.H/4+'px 0px;border-style:solid dashed dashed solid;border-color:#fff transparent transparent #fff;width:0;height:0;left:'+this.W/2+'px;top:'+this.H/2+'px';
			this.cur = i; //綁定當前顯示圖片的正確序號
			this.li.a = false;
			for(var x=0;x<this.l;x++){
				H$$('a',this.nav_wp)[x].className = x==i?this.curC:'shutter-nav'; //綁定當前控制器樣式
				}
			this._a.href = H$$('a',this.li[i])[0].href;
			//this.auto(); //自動運行
			//this.li[i].a = setInterval(new Function(this.anchor+'.anim('+i+')'), 4*this.stN);
			this.anim();
		},
		anim: function () {
			this.__a = setInterval(new Function(this.anchor+'._1()'), 20);
			if (this.N == 2) this.__e = setInterval(new Function(this.anchor+'._5()'), 20);
			if (this.N == 4) {
				this.__c = setInterval(new Function(this.anchor+'._3()'), 20);
				this.__e = setInterval(new Function(this.anchor+'._5()'), 20);
				this.__g = setInterval(new Function(this.anchor+'._7()'), 20);
			}
		},
		_1 : function () {
			var s =  H$(this.anchor+'convolution-2'), a = H$(this.anchor+'convolution-mask-2'), d = parseInt(s.style.borderRightWidth)+this.aw;
			if(d>=this.W/4){
				clearInterval(this.__a);
				d = this.W/4;
				this.__b = setInterval(new Function(this.anchor+'._2()'), 20);
			}
			s.style.borderLeftWidth = s.style.borderRightWidth = d+'px';
			a.style.left = 2*d + this.W/2 + 'px';
		},
		_2 : function () {
			var s =  H$(this.anchor+'convolution-2'), d = parseInt(s.style.borderTopWidth)-this.aw;
			if(d<=0){
				clearInterval(this.__b);
				d = 0;
				if (this.N == 1 || this.N == 2) this.__c = setInterval(new Function(this.anchor+'._3()'), 20);
			}
			s.style.borderTopWidth = s.style.borderBottomWidth = d + 'px';
			s.style.top = this.H/2-2*d + 'px';
		},
		_3 : function () {
			var s =  H$(this.anchor+'convolution-3'), a = H$(this.anchor+'convolution-mask-4'), d = parseInt(s.style.borderTopWidth)+this.aw;
			if(d>=this.H/4){
				clearInterval(this.__c);
				d = this.H/4;
				this.__d = setInterval(new Function(this.anchor+'._4()'), 20);
			}
			s.style.borderTopWidth = s.style.borderBottomWidth = d+'px';
			a.style.top = 2*d + this.H/2 + 'px';
		},
		_4 : function () {
			var s =  H$(this.anchor+'convolution-3'), dm = parseInt(s.style.borderRightWidth)-this.aw;
			if(dm<=0){
				clearInterval(this.__d);
				dm = 0;
				if (this.N == 1) this.__e = setInterval(new Function(this.anchor+'._5()'), 20);
			}
			s.style.borderLeftWidth = s.style.borderRightWidth = dm + 'px';
		},
		_5 : function () {
			var s =  H$(this.anchor+'convolution-4'), a = H$(this.anchor+'convolution-mask-3'), d = parseInt(s.style.borderRightWidth)+this.aw;
			if(d>=this.W/4){
				clearInterval(this.__e);
				d = this.W/4;
				this.__f = setInterval(new Function(this.anchor+'._6()'), 20);
			}
			s.style.borderLeftWidth = s.style.borderRightWidth = d+'px';
			s.style.left = this.W/2-2*d + 'px';
			a.style.left = -2*d + 'px';
		},
		_6 : function () {
			var s =  H$(this.anchor+'convolution-4'), dm = parseInt(s.style.borderTopWidth)-this.aw;
			if(dm<=0){
				clearInterval(this.__f);
				dm = 0;
				if (this.N == 1 || this.N == 2) this.__g = setInterval(new Function(this.anchor+'._7()'), 20);
			}
			s.style.borderTopWidth = s.style.borderBottomWidth = dm + 'px';
		},
		_7 : function () {
			var s =  H$(this.anchor+'convolution-1'), a = H$(this.anchor+'convolution-mask-1'), d = parseInt(s.style.borderTopWidth)+this.aw;
			if(d>=this.H/4){
				clearInterval(this.__g);
				d = this.H/4;
				this.__h = setInterval(new Function(this.anchor+'._8()'), 20);
			}
			s.style.borderTopWidth = s.style.borderBottomWidth = d+'px';
			s.style.top = this.H/2-2*d + 'px';
			a.style.top = -2*d + 'px';
		},
		_8 : function () {
			var s =  H$(this.anchor+'convolution-1'), dm = parseInt(s.style.borderRightWidth)-this.aw;
			if(dm<=0){
				clearInterval(this.__h);
				dm = 0;
				if (!this.li.a) this.auto();
			}
			s.style.borderLeftWidth = s.style.borderRightWidth = dm + 'px';
			s.style.left = this.W/2-2*dm + 'px';
		}
	}
	return {init:init}
}();
// --></script>
</head>
<body>
<div   class="f7r5jbd"   id="shutter" class="shutter" style="">
	<ul>
		<li><a href="#" target="_blank"><img src="http://p1.mb5u.com/texiao/1/20110225160607692.jpg" /></a></li>
		<li><a href="#" target="_blank"><img src="http://p1.mb5u.com/texiao/1/20110225160607693.jpg" /></a></li>
		<li><a href="#" target="_blank"><img src="http://p1.mb5u.com/texiao/1/20110225160607694.jpg" /></a></li>
		<li><a href="#" target="_blank"><img src="http://p1.mb5u.com/texiao/1/20110225160607695.jpg" /></a></li>
		<li><a href="#" target="_blank"><img src="http://p1.mb5u.com/texiao/1/20110225160607696.jpg" /></a></li>
	</ul>
</div>
<div   class="fjdjdt5"   id="shutter2" class="shutter" style="margin-top:20px">
	<ul>
		<li><a href="#" target="_blank"><img src="http://p1.mb5u.com/texiao/1/20110225160607692.jpg" /></a></li>
		<li><a href="#" target="_blank"><img src="http://p1.mb5u.com/texiao/1/20110225160607693.jpg" /></a></li>
		<li><a href="#" target="_blank"><img src="http://p1.mb5u.com/texiao/1/20110225160607694.jpg" /></a></li>
		<li><a href="#" target="_blank"><img src="http://p1.mb5u.com/texiao/1/20110225160607695.jpg" /></a></li>
		<li><a href="#" target="_blank"><img src="http://p1.mb5u.com/texiao/1/20110225160607696.jpg" /></a></li>
	</ul>
</div>
<div   class="vjbr5dp"   id="shutter3" class="shutter" style="margin-top:20px">
	<ul>
		<li><a href="#" target="_blank"><img src="http://p1.mb5u.com/texiao/1/20110225160607692.jpg" /></a></li>
		<li><a href="#" target="_blank"><img src="http://p1.mb5u.com/texiao/1/20110225160607693.jpg" /></a></li>
		<li><a href="#" target="_blank"><img src="http://p1.mb5u.com/texiao/1/20110225160607694.jpg" /></a></li>
		<li><a href="#" target="_blank"><img src="http://p1.mb5u.com/texiao/1/20110225160607695.jpg" /></a></li>
		<li><a href="#" target="_blank"><img src="http://p1.mb5u.com/texiao/1/20110225160607696.jpg" /></a></li>
	</ul>
</div>
<script type="text/javascript"></script>
</body>
</html>

所屬頻道：圖片特效特效/更新時間：2012-11-09

[收藏][報錯][返回列表]

相關圖片特效特效：

Js回旋滾軸方式的圖片幻燈片切換代碼_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些