JS技术

Javascript实现图片切换效果_Javascript教程

字号+ 作者：H5之家 来源：H5之家 2015-09-26 12:06 我要评论( )

Javascript实现图片切换效果,学习Javascript实现图片切换效果,Javascript实现图片切换效果,查看Javascript实现图片切换效果,详细代码：!DOCTYPE html PUBLIC -//

详细代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
 #focus_m{position:relative; width:420px; height:384px; background:#133775}
 .f_img_roll{width:350px; height:300px; position:relative;}
 .f_img_roll img{position:absolute; left:0; top:0; width:350px; height:300px;}
 .f_img_tree{position:absolute; width:75px; height:300px; right:3px; top:0;}
 .f_img_tree div{position:absolute; z-index:300; top:3px; right:0; width:75px; height:47px; background:url() no-repeat;}
 .f_img_tree ul{margin:0; padding:0; list-style:none; position:absolute; right:0;}
 .f_img_tree li{width:60px; height:45px; border:1px solid #0066cc; margin-top:3px;}
    .f_img_tree img{width:54px; height:39px; border:3px solid #000066; vertical-align:top;}
 .f_con{color:#fff; height:70px;}
 .f_con .title{font-size:14px; height:30px; line-height:30px; margin-top:5px; font-weight:bold; text-align:center;}
 .f_con .title a:link, .f_con .title a:visited{color:#fff; text-decoration:none}
 .f_con .title a:hover{text-decoration:underline}
 .f_con .con{font-size:12px; padding:0 10px; height:40px; line-height:150%;}
  </style>
<script type="text/javascript">
function $A(iterable) {
 var results = [];
 for (var i = 0; i < iterable.length; i++)results.push(iterable[i]);
 return results;
}
Function.prototype.bind = function() {
 var __method = this, args = $A(arguments), object = args.shift();
 return function() {
  return __method.apply(object, args.concat($A(arguments)));
 }
}
var imgs = [
  {max:'http://www.kuanghong.com/han/images/img_1.jpg', min:'http://www.kuanghong.com/han/images/img_1s.jpg', url:'#', title:'标题01标题01标题01标题01标题01', con:'内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01'},
  {max:'http://www.kuanghong.com/han/images/img_2.jpg', min:'http://www.kuanghong.com/han/images/img_2s.jpg', url:'#', title:'标题02标题02标题02标题02标题02', con:'内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02'},
  {max:'http://www.kuanghong.com/han/images/img_3.jpg', min:'http://www.kuanghong.com/han/images/img_3s.jpg', url:'#', title:'标题03标题03标题03标题03标题03', con:'内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03'},
  {max:'http://www.kuanghong.com/han/images/img_4.jpg', min:'http://www.kuanghong.com/han/images/img_4s.jpg', url:'#', title:'标题04标题04标题04标题04标题04', con:'内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04'},
  {max:'http://www.kuanghong.com/han/images/img_5.jpg', min:'http://www.kuanghong.com/han/images/img_5s.jpg', url:'#', title:'标题05标题05标题05标题05标题05', con:'内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05'},
  {max:'http://www.kuanghong.com/han/images/img_6.jpg', min:'http://www.kuanghong.com/han/images/img_6s.jpg', url:'#', title:'标题06标题06标题06标题06标题06', con:'内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06'}
 ];
function Focus(){ this.initialize.apply(this, arguments) };
Focus.prototype = {
 initialize: function(imgObj, focus, tim, speed){
  this.imgs  = imgObj;
  this.tim  = tim*1000 || 2000;
  this.speed  = speed  || 0.3;
  this.img_m  = null; // 大图
  this.img_m2  = null; // 大图2
  this.lis  = []; // 小图列表
  this.mask  = null; // 蒙板
  this.title  = null; // 标题
  this.con  = null; // 内容
  this.cur  = 0; // 当前位置
  this.t   = null; // 整体计时
  this.tm   = null; // mask位置
  this.ti   = null; // img 切换
  this.stoped  = true; // 停止状态
  this.tem  = 0; // 临时数据
  this.loaded  = {imgs:[], num:0}; // 加载进度
  this.getElement(document.getElementById(focus));
  this.preload();
 },
 preload: function(){
  for(var i=0; i<this.imgs.length; i++){
   this.loaded.imgs[i]   = new Image();
   this.loaded.imgs[i].onload = this.load_num.bind(this);
   this.loaded.imgs[i].src  = this.imgs[i].max;
  }
 },
 load_num: function(){
  this.loaded.num++;
  if(this.loaded.num == this.imgs.length)
   this.start();
 },
 getElement: function(focus){ // 获得蒙板，小图列表，标题/内容容器等。。。
  var ds = focus.getElementsByTagName('div');
  for(var i=0; i<ds.length; i++)
   switch(ds[i].className){
    case 'f_img_roll':
     this.img_m       = document.createElement('img');
     this.img_m2       = document.createElement('img');
     this.img_m.src      = this.imgs[0].max;
     this.img_m.style.zIndex    = 101;
     this.img_m2.style.zIndex   = 100;
     ds[i].onmouseover     = this.stop.bind(this);
     ds[i].onmouseout     = this.start.bind(this);
     ds[i].appendChild(this.img_m);
     ds[i].appendChild(this.img_m2);
    
    case 'f_img_tree':
     this.mask       = document.createElement('div');
     this.mask.onmouseover    = this.stop.bind(this);
     this.mask.onmouseout    = this.start.bind(this);
     var ul        = document.createElement('ul');
     var oThis       = this;
     for(var n=0; n<this.imgs.length; n++){
      this.lis[n]      = document.createElement('li');
      this.lis[n].n     = n;
      this.lis[n].innerHTML   = '<img src="'+this.imgs[n].min+'" />';
      this.lis[n].onmouseover   = function(){ this.style.border = "1px solid #cc0000"; }
      this.lis[n].onmouseout   = function(){ this.style.border = "1px solid #0066cc"; }
      this.lis[n].onclick    = function(){ if(oThis.lis[oThis.cur] != this) oThis.nextFrame.call(oThis, this.n); }
      ul.appendChild(this.lis[n]);
     };
     ds[i].appendChild (this.mask);
     ds[i].appendChild (ul);
     break;
    case 'title':
     this.title       = ds[i];
     this.title.innerHTML    = this.imgs[0].title;
     this.title.parentNode.onmouseover = this.stop.bind(this);
     this.title.parentNode.onmouseout = this.start.bind(this);
     break;
    case 'con':
     this.con       = ds[i];
     this.con.innerHTML     = this.imgs[0].con;
     break;
   }
 },
 
 nextFrame: function(n){
  if (this.t) clearTimeout(this.t);
  if (this.tm) clearInterval(this.tm);
  if (this.ti) clearInterval(this.ti);
  if (n)   this.cur = n-1;
  var top = 0, posTo = 0;
  if (n!=0 && this.imgs[this.cur+1]){
   posTo = this.lis[this.cur+1].offsetTop;
   this.cur = this.cur+1;
  }else{
   posTo = this.lis[0].offsetTop;
   this.cur = 0;
  }
  this.tem = this.mask.offsetTop;
  this.tem > posTo? top = 1 : top = 0;
  this.tm  = setInterval(this.moveTo.bind(this, top, posTo), 25);
 },
 
 moveTo: function(top, posTo){
  if(!top){
   if((this.tem+2) >= posTo+1){
    clearInterval(this.tm);
    this.mask.style.top = posTo+'px';
    this.img_swap();
    return;
   }
   this.tem += (posTo - this.tem) * this.speed
  }else{
   if((this.tem-2) <= posTo-1){
    clearInterval(this.tm);
    this.mask.style.top = posTo+'px';
    this.img_swap();
    return;
   }
   this.tem -= (this.tem-posTo)*this.speed;
  }
  this.mask.style.top = this.tem+'px';
 },
 img_swap: function(){
  var t, b;
  if(this.img_m.style.zIndex > this.img_m2.style.zIndex){
   t = this.img_m;
   b = this.img_m2;
  }else{
   t = this.img_m2;
   b = this.img_m;
  }
  this.title.innerHTML = '<a href="'+this.imgs[this.cur].url+'">'+this.imgs[this.cur].title+'</a>';
  this.con.innerHTML  = this.imgs[this.cur].con;
  b.src     = this.imgs[this.cur].max;
  /MSIE/.test(navigator.userAgent) ?
   this.tem = t.style.filter ? t.style.filter.replace(/^.+=(\d+).+$/,'$1') : 100
   : this.tem = t.style.opacity ? t.style.opacity*100 : 100;
  if (this.ti) clearInterval(this.ti);
  this.ti = setInterval(this.img_hid.bind(this, t, b), 25);
 },
 img_hid: function(t,b){
  this.tem -= 7;
  if (/MSIE/.test(navigator.userAgent))
   t.style.filter = 'alpha(opacity='+this.tem+')';
  else
   t.style.opacity = this.tem/100;
  if(this.tem <=0){
   clearInterval(this.ti);
   var tz   = t.style.zIndex;
   var bz   = b.style.zIndex;
   t.style.zIndex = bz
   b.style.zIndex = tz;
   if (/MSIE/.test(navigator.userAgent))
    t.style.filter = 'alpha(opacity=100)';
   else
    t.style.opacity = 1;
   if(this.stoped) return;
   this.start(); // 继续循环
  }
 },
 start: function(){
  if(this.t) clearTimeout(this.t);
  this.t  = setTimeout(this.nextFrame.bind(this, null), this.tim);
  this.stoped = false;
 },
 stop: function(){
  clearTimeout(this.t);
  this.stoped = true;
 }
}
  window.onload = function(){
   var focus = new Focus(imgs,'focus_m');
   //focus.start();
  }
  </script>
</head>
<body>
<div id="focus_m">
  <div class="f_img_roll"></div><div class="f_img_tree"></div>
  <div class="f_con">
 <div class="title"></div>
 <div class="con"></div>
  </div>
</div>
</body>
</html>

　

查看Javascrip

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JavaScript入门教程(二)_javascript教程教程

    JavaScript入门教程(二)_javascript教程教程

    2015-10-10 14:25

  • JavaScript入门教程(五)_javascript教程教程

    JavaScript入门教程(五)_javascript教程教程

    2015-10-10 14:21

  • JavaScript入门教程(四)_javascript教程教程

    JavaScript入门教程(四)_javascript教程教程

    2015-10-10 14:19

  • JavaScript入门教程(三)_javascript教程教程

    JavaScript入门教程(三)_javascript教程教程

    2015-10-10 14:17

网友点评
精彩导读
【JavaScript.2】辨析Typeof操作符作用，罗列JS五大数据类型阵容 - 孟东辉 廊坊师范学院信息技术提高班

【JavaScript.2】辨析Typeof操作符作用，罗列

Word Search -- LeetCode - Code Ganker - 博客频道 - CSDN.NET Code

Word Search -- LeetCode - Code Ganker - 博

ubuntu 14.04 安装 minidwep-gtk, aircrack-ng, reaver 搭建抓包环境 - 心

ubuntu 14.04 安装 minidwep-gtk, aircrack-n

求职篇-带我装逼，带我飞 - 巫_1曲待续 - 博客频道 - CSDN.NET 巫_1曲待续 一个人走到任何境地全都是因

求职篇-带我装逼，带我飞 - 巫_1曲待续 - 博

ubuntu thrift 0.9.3编译安装 - Dean Chen的专栏 - 博客频道 - CSDN.NET Dea

ubuntu thrift 0.9.3编译安装 - Dean Chen的

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习