地图 广告
招租

←—
订阅
投稿
您的位置:网站首页 > 特效代码 > 网页图片特效 > 正文:JS+CSS实现超酷的回旋滚轴的图片幻灯切换效果

JS+CSS实现超酷的回旋滚轴的图片幻灯切换效果

日期:2011-12-29 8:50:00 标签:图片特效 图片切换 切换效果 js特效 css 幻灯片

由于代码运行框不够完善,本特效暂不提供运行预览,请见谅~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS+CSS实现超酷的回旋滚轴的图片幻灯切换效果丨芯晴网页特效丨CsrCode.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
<!--
span{overflow:hidden;font-size:0;line-height:0;}
.shutter{position:relative;overflow:hidden;height:240px;width:320px;}
.shutter li{position:absolute;left:0;top:0;}
ul,li{list-style:none;margin:0;padding:0}
img{display:block;border:none;}
.shutter-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#333;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;}
.shutter-cur-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#ff7a00;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;}
-->
</style>
<script type="text/javascript">
<!--
var Hongru={};
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
Hongru.shutter = function(){
 function init(anchor,options){this.anchor=anchor; this.init(options);}
 init.prototype = {
  init:function(options){ //options参数:id(必选):图片列表父标签id;auto(可选):自动运行时间;index(可选):开始的运行的图片序号
   var wp = H$(options.id), //获取图片列表父元素
   ul = H$$('ul',wp)[0], //获取
   li = this.li = H$$('li',ul);
   this.a = options.auto?options.auto:4; //自动运行间隔
   this.index = options.position?options.position:0; //开始运行的图片序号(从0开始)
   this.l = li.length;
   this.cur = 0; //当前显示的图片序号
   this.N = options.roller?options.roller:1;
   this.W = wp.offsetWidth;
   this.H = wp.offsetHeight;
   this.aw = options.speed?options.speed:5;
   this.mask = [];
   this.convolution = [];
   this.nav = [];
   ul.style.display = 'none';
   var container = this.container = document.createElement('div'),
    con_a = this._a = document.createElement('a');
   con_a.target = '_blank';
   container.style.cssText = con_a.style.cssText = 'position:absolute;width:'+this.W+'px;height:'+this.H+'px;left:0;top:0';
   container.appendChild(con_a);
   for (var x=0; x<4; x++) {
    var mask = document.createElement('span');
    mask.id = this.anchor + 'convolution-mask-' + (x+1);
    this.mask.push(mask);con_a.appendChild(mask);
    var cvl = document.createElement('span');
    cvl.id = this.anchor + 'convolution-' + (x+1);
    con_a.appendChild(cvl);
   }
   wp.appendChild(container);
   this.nav_wp = document.createElement('div'); //先建一个div作为控制器父标签,你也可以用<ul>或<ol>来做,语义可能会更好,这里我就不改了
   this.nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //为它设置样式
   for(var i=0;i<this.l;i++){
    /* == 绘制控制器 == */
    var nav = document.createElement('a'); //这里我就直接用a标签来做控制器,考虑语义的话你也可以用li
    nav.className = options.navClass?options.navClass:'shutter-nav'; //控制器class,默认为'shutter-nav'
    this.nav.push[nav];
    nav.innerHTML = i+1;
    nav.onclick = new Function(this.anchor+'.pos('+i+')'); //绑定onclick事件,直接调用之前写好的pos()函数
    this.nav_wp.appendChild(nav);
   }
   wp.appendChild(this.nav_wp);
   this.curC = options.curNavClass?options.curNavClass:'shutter-cur-nav';
   this.pos(this.index); //变换函数
  },
  auto:function(){
   this.li.a = setInterval(new Function(this.anchor+'.move(1)'),this.a*1000);
  },
  move:function(i){ //参数i有两种选择,1和-1,1代表运行到下一张,-1代表运行到上一张
   var n = this.cur+i;
   var m = i==1?n==this.l?0:n:n<0?this.l-1:n; //下一张或上一张的序号(注意三元选择符的运用)
   this.pos(m); //变换到上一张或下一张
  },
  pos:function(i){
   clearInterval(this.li.a);clearInterval(this.__a);clearInterval(this.__b);clearInterval(this.__c);clearInterval(this.__d);clearInterval(this.__e);clearInterval(this.__f);clearInterval(this.__g);clearInterval(this.__h);
   //this.aw = this.dir == 'H'?this.W/this.stN : this.H/this.stN;
   var src = H$$('img',this.li[i])[0].src;
   var _n = i+1>=this.l?0:i+1;
   var src_n = H$$('img',this.li[_n])[0].src;
   this.container.style.backgroundImage = 'url('+src_n+')';
   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>
<!--把下面代码加到<body>与</body>之间-->
<div id="shutter" class="shutter" style="">
 <ul>
  <li><a href="#" target="_blank"><img src="http://www.CsrCode.cn/images/m01.jpg"></a></li>
  <li><a href="#" target="_blank"><img src="http://www.CsrCode.cn/images/m07.jpg"></a></li>
  <li><a href="#" target="_blank"><img src="http://www.CsrCode.cn/images/m09.jpg"></a></li>
  <li><a href="#" target="_blank"><img src="http://www.CsrCode.cn/images/m04.jpg"></a></li>
  <li><a href="#" target="_blank"><img src="http://www.CsrCode.cn/images/m05.jpg"></a></li>
 </ul>
</div>
<div id="shutter2" class="shutter" style="margin-top:20px">
 <ul>
  <li><a href="#" target="_blank"><img src="http://www.CsrCode.cn/images/m02.jpg"></a></li>
  <li><a href="#" target="_blank"><img src="http://www.CsrCode.cn/images/m03.jpg"></a></li>
  <li><a href="#" target="_blank"><img src="http://www.CsrCode.cn/images/m08.jpg"></a></li>
  <li><a href="#" target="_blank"><img src="http://www.CsrCode.cn/images/m10.jpg"></a></li>
  <li><a href="#" target="_blank"><img src="http://www.CsrCode.cn/images/m05.jpg"></a></li>
 </ul>
</div>
<div id="shutter3" class="shutter" style="margin-top:20px">
 <ul>
  <li><a href="#" target="_blank"><img src="http://www.CsrCode.cn/images/m01.jpg"></a></li>
  <li><a href="#" target="_blank"><img src="http://www.CsrCode.cn/images/m02.jpg"></a></li>
  <li><a href="#" target="_blank"><img src="http://www.CsrCode.cn/images/m03.jpg"></a></li>
  <li><a href="#" target="_blank"><img src="http://www.CsrCode.cn/images/m04.jpg"></a></li>
  <li><a href="#" target="_blank"><img src="http://www.CsrCode.cn/images/m05.jpg"></a></li>
 </ul>
</div>
<script type="text/javascript">
<!--
var roller = new Hongru.shutter.init('roller',{
 id:'shutter',
 auto:2,
 speed:20
});
var roller2 = new Hongru.shutter.init('roller2',{
 id:'shutter2',
 speed:15,
 roller: 2
});
var roller4 = new Hongru.shutter.init('roller4',{
 id:'shutter3',
 roller: 4
});
//-->
</script>
</body>
</html>

<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。</font></p>

本站已开启防盗链,请根据代码中对应的url地址下载保存特效所需的图片、flash和js文件,请见谅,谢谢.
(本文由 CsrCode.CN|芯晴网页特效 收集丨www.CsrCode.cn
本文网址:
评论信息
抱歉,本文暂停评论留言。