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点击组图切换效果代码,包含 ...

随机推荐

redhat 5.0 python2.4升级到2.7
)安装devtoolset yum groupinstall "Development tools" )安装编译Python需要的包包 yum install zlib-devel ...
VOA学习-South Sudan Must Allow Aid
South Sudan Must Allow Aid The United States is gravelyconcerned by the serious escalation of the hu ...
I'm back
亲爱的博友们, 请忽略这一条, 这只是我个人的一个记录.
Java基础知识强化之IO流笔记46：IO流练习之把文本文件中数据存储到集合中的案例
1. 把文本文件中数据存储到集合中需求:从文本文件中读取数据(每一行为一个字符串数据)到集合中,并遍历集合. 分析: 通过题目的意思我们可以知道如下的一些内容, 数据 ...
[RAC] oracle rac 后台进程
一.RAC后台进程 LMON:LOCK Monitor Processes 也被称为Global enqueue service monitor 监控整个集群状况,维护GCS的内存结构监控非正常终止 ...
简单的实现QQ通信功能（二）
第二部分:功能需求以及大体思路一:功能需求: 1. 角色:登录用户. 2. 登录: (1)检查用户名和密码是否正确,正确登录成功,否则提醒用户名或密码错误. (2)登录时可以选择登录状态,送入数据库 ...
VS2010常用插件介绍之Javascript插件（一）
引自:http://blog.csdn.net/cyxlzzs/article/details/6583577 今天在写JS时,写到500多行时,感觉代码已经很难看了.想到C#代码都有折叠功能,是不是 ...
C#测量程序运行时间及cpu使用时间
转载:http://www.cnblogs.com/yanpeng/archive/2008/10/15/1943369.html 对一个服务器程序想统计每秒可以处理多少数据包,要如何做?答案是用处理 ...
使用ROW_NUMBER进行的快速分页
DECLARE @pageSize INT ; DECLARE @pageIndex INT ; SET @pageSize = 5 SET @pageIndex =2 ; --第二页,每页显示5条数 ...
javascript 函数学习
1.自以为好的部分,更多访问: http://www.runoob.com/js/js-tutorial.html 2.this 3.new 4.闭包 5.自执行

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

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

随机推荐

热门专题