21视频教程网3月27日整理
就是先显示第一张图，等后续图加载完成了再开始切换效果。因为毕竟一次性载入多张大图，会很慢，50k一张，假如有4张，就200K，太恐怖了，所以延迟加载，先把用到的图片放到一个input:hidden里面，逗号分隔。
觉得jquery好用，所以写成jquery的插件形式。
<!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>
<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="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></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="http://www.wholesale-retailer.com/zzz_js/latestsite_1.jpg"/></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_1.jpg,http://www.wholesale-retailer.com/zzz_js/latestsite_2.jpg,http://www.wholesale-retailer.com/zzz_js/latestsite_3.jpg,http://www.wholesale-retailer.com/zzz_js/latestsite_4.jpg"/>
</div>
</body>
</html>
调用了google的juqery，运行的时候，必须再刷新一次，很奇怪。
| Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
| HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
| ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |
QQ：2693987339(点击联系)购买教程光盘
:
