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>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>听说你也是——文字控</title>

 <link href="css/css.css" rel="stylesheet" type="text/css" />

 <SCRIPT src="js/js.js" type=text/javascript></SCRIPT>

 </head>

 <body>

 <div id="ifocus">

  <div id="ifocus_pic">

   <div id="ifocus_piclist" style="left:0; top:0;">

    <ul>

     <li><a href="#"><img src="img/01.jpg" alt="" /></a></li>

     <li><a href="#"><img src="img/02.jpg" alt="" /></a></li>

     <li><a href="#"><img src="img/03.jpg" alt="" /></a></li>

     <li><a href="#"><img src="img/04.jpg" alt="" /></a></li>

    </ul>

   </div>

   <div id="ifocus_opdiv"></div>

   <div id="ifocus_tx">

    <ul>

     <li class="current">忧伤在我心中沉静下来，宛如降临在寂静山林中的夜色</li>

     <li class="normal">我就像一只停泊在海滩上的小船，聆听着晚潮奏</li>

     <li class="normal">生命是上天赋予的，我们惟有献出生命，才能真正得到它</li>

     <li class="normal">今天大地在阳光下向我细语，用一种已被遗忘的语言</li>

    </ul>

   </div>

  </div>

  <div id="ifocus_btn">

   <ul>

    <li class="current"><img src="img/btn_01.jpg" alt="" /></li>

    <li class="normal"><img src="img/btn_02.jpg" alt="" /></li>

    <li class="normal"><img src="img/btn_03.jpg" alt="" /></li>

    <li class="normal"><img src="img/btn_04.jpg" alt="" /></li>

   </ul>

  </div>

 </div>

 </body>

 </html>

 @charset "utf-8";

 /* CSS Document */

 *

 {

     margin:0;

     padding:0;

     word-break:break-all;

  }

 body

 {

     background:#FFF;

      color:#333;

      font:12px/1.6em Helvetica, Arial, sans-serif;

      }

 h1, h2, h3, h4, h5, h6

 {

      font-size:1em;

 }

 a

 {

     color:#0287CA;

     text-decoration:none; }

 a:hover

  {

       text-decoration:underline;

       }

 ul, li

 {

 list-style:none;

  }

 fieldset, img

 {

 border:none;

  }

 legend

 {

 display:none;

  }

 em, strong, cite, th {

      font-style:normal;

      font-weight:normal;

       }

 input, textarea, select, button {

      font:12px Helvetica, Arial, sans-serif;

      }

 table {

      border-collapse:collapse;

       }

 html {

      overflow:-moz-scrollbars-vertical;

       } 

 #ifocus {

     width:525px;

     height:245px;

       margin:20px;

     border:1px solid #DEDEDE;

     background:#F8F8F8;

      }

  #ifocus_pic

  {

       display:inline;

       position:relative;

       float:left;

       width:410px;

       height:225px;

       overflow:hidden;

       margin:10px 0 0 10px;

       }

 #ifocus_piclist {

 position:absolute;

  }

 #ifocus_piclist li {

      width:410px;

      height:225px;

      overflow:hidden;

  }

 #ifocus_piclist img {

      width:410px;

       height:225px;

       }

 #ifocus_btn {

      display:inline;

      float:right;

      width:91px;

      margin:9px 9px 0 0;

      }

 #ifocus_btn li { 

      width:91px;

      height:57px;

      cursor:pointer;

      opacity:0.5;

       -moz-opacity:0.5;

       filter:alpha(opacity=50);

       }

 #ifocus_btn img {

      width:75px;

     height:45px;

     margin:7px 0 0 11px;

     }

 #ifocus_btn .current {

      background: url(i/ifocus_btn_bg.gif) no-repeat;

      opacity:1; -moz-opacity:1; filter:alpha(opacity=100);

      }

 #ifocus_opdiv {

       position:absolute;

       left:0;

       bottom:0;

       width:410px;

        height:35px;

         background:#000;

          opacity:0.5;

          -moz-opacity:0.5;

          filter:alpha(opacity=50);

    }

 #ifocus_tx {

   position:absolute;

   left:8px;

   bottom:8px;

   color:#FFF; }

 #ifocus_tx .normal {

   display:none;

   }

 function $(id) { return document.getElementById(id); }

 function addLoadEvent(func){

  var oldonload = window.onload;

  if (typeof window.onload != 'function') {

   window.onload = func;

  } else {

   window.onload = function(){

    oldonload();

    func();

   }

  }

 }

 function moveElement(elementID,final_x,final_y,interval) {

   if (!document.getElementById) return false;

   if (!document.getElementById(elementID)) return false;

   var elem = document.getElementById(elementID);

   if (elem.movement) {

     clearTimeout(elem.movement);

   }

   if (!elem.style.left) {

     elem.style.left = "0px";

   }

   if (!elem.style.top) {

     elem.style.top = "0px";

   }

   var xpos = parseInt(elem.style.left);

   var ypos = parseInt(elem.style.top);

   if (xpos == final_x && ypos == final_y) {

   return true;

   }

   if (xpos < final_x) {

     var dist = Math.ceil((final_x - xpos)/10);

     xpos = xpos + dist;

   }

   if (xpos > final_x) {

     var dist = Math.ceil((xpos - final_x)/10);

     xpos = xpos - dist;

   }

   if (ypos < final_y) {

     var dist = Math.ceil((final_y - ypos)/10);

     ypos = ypos + dist;

   }

   if (ypos > final_y) {

     var dist = Math.ceil((ypos - final_y)/10);

     ypos = ypos - dist;

   }

   elem.style.left = xpos + "px";

   elem.style.top = ypos + "px";

   var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

   elem.movement = setTimeout(repeat,interval);

 }

 function classNormal(iFocusBtnID,iFocusTxID){

  var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');

  var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');

  for(var i=0; i<iFocusBtns.length; i++) {

   iFocusBtns[i].className='normal';

   iFocusTxs[i].className='normal';

  }

 }

 function classCurrent(iFocusBtnID,iFocusTxID,n){

  var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');

  var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');

  iFocusBtns[n].className='current';

  iFocusTxs[n].className='current';

 }

 function iFocusChange() {

  if(!$('ifocus')) return false;

  $('ifocus').onmouseover = function(){atuokey = true};

  $('ifocus').onmouseout = function(){atuokey = false};

  var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');

  var listLength = iFocusBtns.length;

  iFocusBtns[0].onmouseover = function() {

   moveElement('ifocus_piclist',0,0,5);

   classNormal('ifocus_btn','ifocus_tx');

   classCurrent('ifocus_btn','ifocus_tx',0);

  }

  if (listLength>=2) {

   iFocusBtns[1].onmouseover = function() {

    moveElement('ifocus_piclist',0,-225,5);

    classNormal('ifocus_btn','ifocus_tx');

    classCurrent('ifocus_btn','ifocus_tx',1);

   }

  }

  if (listLength>=3) {

   iFocusBtns[2].onmouseover = function() {

    moveElement('ifocus_piclist',0,-450,5);

    classNormal('ifocus_btn','ifocus_tx');

    classCurrent('ifocus_btn','ifocus_tx',2);

   }

  }

  if (listLength>=4) {

   iFocusBtns[3].onmouseover = function() {

    moveElement('ifocus_piclist',0,-675,5);

    classNormal('ifocus_btn','ifocus_tx');

    classCurrent('ifocus_btn','ifocus_tx',3);

   }

  }

 }

 setInterval('autoiFocus()',5000);

 var atuokey = false;

 function autoiFocus() {

  if(!$('ifocus')) return false;

  if(atuokey) return false;

  var focusBtnList = $('ifocus_btn').getElementsByTagName('li');

  var listLength = focusBtnList.length;

  for(var i=0; i<listLength; i++) {

   if (focusBtnList[i].className == 'current') var currentNum = i;

  }

  if (currentNum==0&&listLength!=1 ){

   moveElement('ifocus_piclist',0,-225,5);

   classNormal('ifocus_btn','ifocus_tx');

   classCurrent('ifocus_btn','ifocus_tx',1);

  }

  if (currentNum==1&&listLength!=2 ){

   moveElement('ifocus_piclist',0,-450,5);

   classNormal('ifocus_btn','ifocus_tx');

   classCurrent('ifocus_btn','ifocus_tx',2);

  }

  if (currentNum==2&&listLength!=3 ){

   moveElement('ifocus_piclist',0,-675,5);

   classNormal('ifocus_btn','ifocus_tx');

   classCurrent('ifocus_btn','ifocus_tx',3);

  }

  if (currentNum==3 ){

   moveElement('ifocus_piclist',0,0,5);

   classNormal('ifocus_btn','ifocus_tx');

   classCurrent('ifocus_btn','ifocus_tx',0);

  }

  if (currentNum==1&&listLength==2 ){

   moveElement('ifocus_piclist',0,0,5);

   classNormal('ifocus_btn','ifocus_tx');

   classCurrent('ifocus_btn','ifocus_tx',0);

  }

  if (currentNum==2&&listLength==3 ){

   moveElement('ifocus_piclist',0,0,5);

   classNormal('ifocus_btn','ifocus_tx');

   classCurrent('ifocus_btn','ifocus_tx',0);

  }

 }

 addLoadEvent(iFocusChange);

js带缩略图的图片切换效果的更多相关文章

js原生带缩略图的图片切换效果
js原生带缩略图的图片切换效果本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...
jquery带按钮的图片切换效果
<!doctype html> <html> <head> <meta charset="gb2312"> <title> ...
js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
JS实现简单的图片切换效果
使用图片进行点击切换效果 <!doctype html> <html lang="en"> <head> <meta charset=&q ...
js应用之实现图片切换效果
数组的操作与应用数组的定义 var 数组名=new Array(); //创建空数组 var 数组名=new Array(size);//创建指定数组长度的数组 var 数组名=new Array( ...
jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发
详细内容请点击无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...
js实现中文简繁切换效果
html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
10款好用的 jQuery 图片切换效果插件
jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...
极简的js点击组图切换效果
程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...

随机推荐

关机相关(shutdown,reboot)
慣用的關機指令: shutdown 由於Linux的關機是那麼重要的工作,因此除了你是在主機前面以tty7圖形介面來登入系統時, 不論用什麼身份都能夠關機之外,若你是使用遠端管理工具(如透過piett ...
careercup-排序和查找 11.1
11.1 给定两个排序后的数组A和B,其中A的末端有足够的缓冲空间容纳B.编写一个方法,将B合并入A并排序. 解法: 已知数组A末端有足够的缓冲,不需要再分配额外空间.程序的处理逻辑很简单,就是逐一比 ...
【转】hibernate.hbm.xml详解
在Hibernate中,各表的映射文件….hbm.xml可以通过工具生成,例如在使用MyEclipse开发时,它提供了自动生成映射文件的工具.配置文件的基本结构如下: Xml代码 <?xmlve ...
移动终端学习一:css3 Media Queries简介
移动终端学习之一 css3 Media Queries简介 1.简介别人写过的我就不重复了,来个链接:http://www.w3cplus.com/content/css3-media-querie ...
Java并发（6）带返回结果的任务执行
携带结果的任务 JDK5提供了有可返回值的任务的执行.java.util.concurrent中Callable与Futrue用以实现带返回值的任务执行. 使用Callable与Futrue与使用Ru ...
html 微信开发——微信授权
微信JS-SDK说明文档链接地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 微信web开发:http: ...
ASP.NET反射
(转载至博客园 dodo-yufan) 两个现实中的例子:1.B超:大家体检的时候大概都做过B超吧,B超可以透过肚皮探测到你内脏的生理情况.这是如何做到的呢?B超是B型超声波,它可以透过肚皮通过向你体 ...
MyFramework框架搭建（一）DAL层
一直以来有一个想法,搭建一个属于自己的框架,将自己学到的东西整合到框架里,不断的完善,让它随着我的成长而成长,下面介绍我第一阶段的总结:DAL层搭建一.基础配置 1.我用的是Ibatis.net框架 ...
mysql嵌套查询
select * from(select t.`name` `name`,count(*) count from company t group by t.`name`) aa where aa.co ...
ios PromiseKit
简介: 高级开发是高度异步的,PromiseKit收集了一些帮助函数,让我们开发过程中使用的典型异步模式更加令人愉悦. 1.通过pod安装promisekit: 2. promise.h介绍 @imp ...

js带缩略图的图片切换效果

js带缩略图的图片切换效果的更多相关文章

随机推荐

热门专题