地图 广告
招租

←—
订阅
投稿
您的位置:网站首页 > 特效代码 > 网页图片特效 > 正文:一张图片打造的超级精美的五屏图片幻灯切换效果

一张图片打造的超级精美的五屏图片幻灯切换效果

日期:2011-12-19 21:36:00 标签:图片特效 图片切换 切换效果 幻灯片 css js特效

由于代码运行框不够完善,本特效暂不提供运行预览,请见谅~~
<!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>一张图片打造的超级精美的五屏图片幻灯切换效果丨芯晴网页特效丨CsrCode.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.scroller{border:1px solid #ddd;}
.scroller .block{overflow:hidden;}
.scroller .block a{display:block;}
.scroller .guide{position:absolute;}
.scroller .guide p{background:url(http://www.CsrCode.cn/html/txdm_2/images/20100903/num_bg.gif);color:#fff;font-weight:bold;font-size:12px;float:left;margin:0 0 0 5px;line-height:18px;padding:0 6px;cursor:pointer;display:inline;}
.scroller .guide .now{background:#ff9933;}
.scroller .flat{position:absolute;}
.scroller .flat a{display:block;}
.ad{font-size: 10px;width:960px;margin:0 auto;}
</style>
</head>
<body>
本例图片样式和地址:<a href="http://www.CsrCode.cn/html/txdm_2/images/20100903/banner.jpg"  target="_blank">http://www.CsrCode.cn/html/txdm_2/images/20100903/banner.jpg</a><br>
<!--把下面代码加到<body>与</body>之间-->
<div class="ad">
<script type="text/javascript">
var width = 960;//宽
var height = 272;//高
var pictureCount = 5;//图片数量
var href = ["http://www.CsrCode.cn","http://www.CsrCode.cn","http://www.CsrCode.cn","http://www.CsrCode.cn","http://www.CsrCode.cn"];//链接地址
var time = 5000;//5秒
var now = 0;//默认显示第一个
var blockCount = 10;//分10块移动
var defer = 50;//块延迟基数
var order = 3;// 0(从上到下) 1(从下到上) 2(随机顺序) 3(随机出现012)
var blockHeight = Math.floor(height/blockCount);
var remain = new Array(pictureCount);
var direct;
var list = [];
document.write("<div class=\"scroller\" id=\"scroller\" style=\"width:"+width+"px\">");
document.write("<div class=\"flat\"><a style=\"width:"+width+"px;height:"+height+"px;\" id=\"flat\" href=\""+href[now]+"\"></a></div>");
document.write("<div class=\"guide\" id=\"guide\" style=\"margin-top:"+(height-23)+"px;margin-left:"+(width-125)+"px\">");
for(var i=0;i<pictureCount;i++)document.write("<p onclick=\"changeItem("+i+")\">"+parseInt(i+1)+"</p>");
document.write("</div>");
for(var i=0;i<blockCount;i++){
 document.write("<div class=\"block\" id=\"item"+i+"\" style=\"height:"+blockHeight+"px\">");
 for(var j=0;j<pictureCount;j++){
  document.write("<a href=\""+href[i]+"\" target=\"_blank\" style=\"background:url(http://www.CsrCode.cn/html/txdm_2/images/20100903/banner.jpg) 0 "+(j+now)*height+"px;height:"+height+"px\"></a>");
 }
 document.write("</div>");
 if(i>0)$("item"+i).scrollTop = i*blockHeight;
}
document.write("</div>");
for(var i=0;i<blockCount;i++)list[i] = i;
Array.prototype.chaos = function(){
 var randomNumber,temp;
 for(var i=0;i<this.length;i++){
  randomNumber = getRandom(0,this.length-1);
  temp = this[i];
  this[i] = this[randomNumber];
  this[randomNumber] = temp;
 }
}
Array.prototype.total = function(){
 var count=0;
 for(var i=0;i<this.length;i++){
  count += this[i];
 }
 return count;
}
function getRandom(start,end){
 var number = parseInt(Math.random()*(end-start+1));
 if(start>0)number++;
 return number;
}
function sortList(o){
 if(o==undefined)o=order;
 switch(o){
  case 0:
   list.sort();
   break;
  case 1:
   list.sort();
   list.reverse();
   break;
  case 2:
   list.chaos();
   break;
  case 3:
   sortList(getRandom(0,2));
   break;
 }
}
function $(element){return document.getElementById(element)}
function $$(parent,element){return parent.getElementsByTagName(element)}
function offset(i){
 var step = Math.ceil(remain[i]/10);
 if(step > 0){
  if(direct){
   $("item"+i).scrollTop += step;
  }else{
   $("item"+i).scrollTop -= step;
  }
  remain[i] -= step;
  setTimeout("offset("+i+")",10);
 }
}
function changeStyle(index,type){
 $$($("guide"),"p")[index].className = type?"now":"";
}
function changeItem(index){
 if(remain.total()>0)return;
 changeStyle(now,false);
 if(index==undefined){
  if(++now>=pictureCount)now=0;
 }else{
  if(index==now){
   changeStyle(now,true);
   return false;
  }else{
   now = index;
  }
 }
 changeStyle(now,true);
 $("flat").href = href[now];
 var offsetSize = now*height-$("item0").scrollTop;
 direct = offsetSize>0?1:0;
 if(order>1)sortList();
 for(var i=0;i<blockCount;i++){
  remain[list[i]] = Math.abs(offsetSize);
  setTimeout("offset("+list[i]+")",i*defer);
 }
}
changeStyle(now,true);
if(order>0)sortList();
$("flat").onmouseover = function(){clearInterval(auto)}
$("flat").onmouseout = function(){auto = setInterval("changeItem()",time);}
$("guide").onmouseover = function(){clearInterval(auto)}
var auto = setInterval("changeItem()",time);
</script>
</div>
</body>
</html>

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

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