JS实现首页的幻灯片效果源码_Javascript教程_H5之家

教程网3月27日整理

就是先显示第一张图，等后续图加载完成了再开始切换效果。因为毕竟一次性载入多张大图，会很慢，50k一张，假如有4张，就200K，太恐怖了，所以延迟加载，先把用到的图片放到一个input:hidden里面，逗号分隔。
觉得jquery好用，所以写成jquery的插件形式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>进一步优化的图片切换效果</title>
<style type="text/css">
img {border:0;}
.bannerImage{position:relative;width:452px;height:346px;margin-left:200px;margin-top:20px;border:1px solid #f60;overflow:hidden;}
.bannerImage p {font-size:0;height:346px;left:0px;position:absolute;}
.bannerImage p a{display:block;float:left;}
.bannerImage span { position:absolute; right:10px;bottom:10px; z-index:100;display:none;}
.bannerImage span a { text-decoration:none; margin-left:5px; display:block;border:1px solid #f60; text-align:center;width:14px; height:16px; background-color:#fff;color:#000; float:left; font-size:12px; background-color:#999;cursor:pointer;}
.bannerImage span a:hover { background-color:#eee;}
.bannerImage span a.cur {background-color:#eee;}
</style>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
jQuery.fn.flash = function(stopTime,moveTime){
var stopTime = (stopTime==undefined?4000:stopTime);
var moveTime = (moveTime==undefined?80:moveTime);
var container = $(this);
var p = container.find("p");
var imgs = container.find("p a img");
var imgsName = container.find("input[type='hidden']").val().split(",");
var len = imgsName.length;
var arr_temp = new Array();//动态生成数字部分<span><a class="cur">1</a><a>2</a></span>
for(var i=0;i<len;i++){
  if(i==0)
   arr_temp.push('<a class="cur">1</a>');
  else
   arr_temp.push('<a>'+ (i+1) +'</a>');
}
container.append("<span>"+ arr_temp.join("") +"</span>");
var orders = container.find("span a");
var width_each = 0;
var index = 0;
var auto = true;
var timer = null;
//加载图片的部分
var loadSign = 0;
var time1 = new Date().getTime();
for(var i=0;i<len;i++){
  loadImg(imgsName[i]);
}
function loadImg(url){
  var img = new Image();
  img.onload = function (){
   loadSign++;
   if(loadSign==len){//加载完成才开始运行
    width_each = img.width;
    for(var i=0;i<len;i++){
     imgs.eq(i).attr("src",imgsName[i]);
    }
    container.find("span").show();
    p.width(width_each*len);
    index = 0;
    var time2 = new Date().getTime();
    timer = window.setTimeout(run,stopTime-parseInt((time2-time1)/1000));//计算时间差是为了，因为平均是4秒，假如后面的花图片加载了2秒，第一张图只需要再等2秒就可以开始切换了
   }
  }
  img.src = url;
}
var t=0,b=0,c=0,d=moveTime;
function run(){
  if(auto){
   index++;
   if(index>=len) index = 0;
  }
  t=0;
  b = -parseInt(p.css("left"));
  c = index*width_each-b;
  for(var i=0;i<len;i++){
   orders.eq(i).removeClass("cur");
  }
  orders.eq(index).addClass("cur");
  move();
}
function move(){
  window.clearTimeout(timer);
  p.css("left","-" + Math.ceil(Exponential_easeOut(t,b,c,d)) + "px");
  if(t<d){
   t++;
   timer = window.setTimeout(move,10);
  }else{
   p.css("left", -index*width_each+"px");
   if(auto){
    timer = window.setTimeout(run,stopTime);
   }
  }
}
function Exponential_easeOut(t,b,c,d){//Tween算法中的一个
  return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
}
orders.bind("mouseover",function(){
  auto = false;
  var active = 0;
  for(var i=0;i<len;i++){
   if($(this).html()==orders.eq(i).html()){//very
    active = i;
    break;
   }
  }
  if(active!=index){
   index = active;
   run();
  }
});
orders.bind("mouseout",function(){
  auto = true;
  timer = window.setTimeout(run,stopTime);
});
}
$(document).ready(function(){
$(".bannerImage").flash(3000,80);
});
</script>
</head>
<body>
<div class="bannerImage">
<p>
  <a href="#" title="this is 01"><img src=""/></a>
  <a href="#" title="this is 02"><img src=""/></a>
  <a href="#" title="this is 03"><img src=""/></a>
  <a href="#" title="this is 04"><img src=""/></a>
</p>
<input type="hidden" value=",http://www.wholesale-retailer.com/zzz_js/latestsite_2.jpg,,http://www.wholesale-retailer.com/zzz_js/latestsite_4.jpg"/>
</div>
</body>
</html>

调用了google的juqery，运行的时候，必须再刷新一次，很奇怪。