论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

JS实现首页的幻灯片效果源码

文章类别:Javascript | 发表日期:2010-3-27 13:56:51

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,运行的时候,必须再刷新一次,很奇怪。

上一篇:javascript浏览器兼容手册发布 人气:2798
下一篇:jquery实现图片切换效果源码 人气:7311
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058