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

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>听说你也是——文字控</title>
 6 <link href="css/css.css" rel="stylesheet" type="text/css" />
 7 <SCRIPT src="js/js.js" type=text/javascript></SCRIPT>
 8 
 9 </head>
10 <body>
11 <div id="ifocus">
12  <div id="ifocus_pic">
13   <div id="ifocus_piclist" style="left:0; top:0;">
14    <ul>
15     <li><a href="#"><img src="img/01.jpg" alt="" /></a></li>
16     <li><a href="#"><img src="img/02.jpg" alt="" /></a></li>
17     <li><a href="#"><img src="img/03.jpg" alt="" /></a></li>
18     <li><a href="#"><img src="img/04.jpg" alt="" /></a></li>
19    </ul>
20   </div>
21   <div id="ifocus_opdiv"></div>
22   <div id="ifocus_tx">
23    <ul>
24     <li class="current">忧伤在我心中沉静下来，宛如降临在寂静山林中的夜色</li>
25     <li class="normal">我就像一只停泊在海滩上的小船，聆听着晚潮奏</li>
26     <li class="normal">生命是上天赋予的，我们惟有献出生命，才能真正得到它</li>
27     <li class="normal">今天大地在阳光下向我细语，用一种已被遗忘的语言</li>
28    </ul>
29   </div>
30  </div>
31  <div id="ifocus_btn">
32   <ul>
33    <li class="current"><img src="img/btn_01.jpg" alt="" /></li>
34    <li class="normal"><img src="img/btn_02.jpg" alt="" /></li>
35    <li class="normal"><img src="img/btn_03.jpg" alt="" /></li>
36    <li class="normal"><img src="img/btn_04.jpg" alt="" /></li>
37   </ul>
38  </div>
39 </div>
40 </body>
41 </html>
  1 @charset "utf-8";
  2 /* CSS Document */
  3 
  4 * 
  5 { 
  6     margin:0; 
  7     padding:0;
  8     word-break:break-all; 
  9  }
 10 body 
 11 { 
 12     background:#FFF;
 13      color:#333; 
 14      font:12px/1.6em Helvetica, Arial, sans-serif; 
 15      }
 16 h1, h2, h3, h4, h5, h6 
 17 {
 18      font-size:1em;
 19       
 20 }
 21 a 
 22 { 
 23     color:#0287CA; 
 24     text-decoration:none; }
 25 a:hover 
 26  {
 27       text-decoration:underline;
 28       }
 29 ul, li 
 30 { 
 31 list-style:none;
 32  }
 33 fieldset, img 
 34 { 
 35 border:none;
 36  }
 37 legend 
 38 { 
 39 display:none;
 40  }
 41 em, strong, cite, th {
 42      font-style:normal; 
 43      font-weight:normal;
 44       }
 45 input, textarea, select, button {
 46      font:12px Helvetica, Arial, sans-serif; 
 47      }
 48 table {
 49      border-collapse:collapse;
 50       }
 51 html {
 52      overflow:-moz-scrollbars-vertical;
 53       } 
 54 
 55 #ifocus { 
 56     width:525px;
 57     height:245px;
 58       margin:20px;
 59     border:1px solid #DEDEDE;
 60     background:#F8F8F8;
 61      }
 62  #ifocus_pic 
 63  {
 64       display:inline;
 65       position:relative; 
 66       float:left; 
 67       width:410px; 
 68       height:225px; 
 69       overflow:hidden; 
 70       margin:10px 0 0 10px; 
 71       }
 72 #ifocus_piclist { 
 73 position:absolute;
 74  }
 75 #ifocus_piclist li { 
 76      width:410px;
 77      height:225px; 
 78      overflow:hidden;
 79  }
 80 #ifocus_piclist img {
 81      width:410px;
 82       height:225px; 
 83       }
 84 #ifocus_btn { 
 85      display:inline; 
 86      float:right; 
 87      width:91px; 
 88      margin:9px 9px 0 0; 
 89      }
 90 #ifocus_btn li { 
 91 
 92      width:91px; 
 93      height:57px; 
 94      cursor:pointer; 
 95      opacity:0.5;
 96       -moz-opacity:0.5; 
 97       filter:alpha(opacity=50); 
 98       }
 99 #ifocus_btn img { 
100      width:75px;
101     height:45px;
102     margin:7px 0 0 11px; 
103     }
104 #ifocus_btn .current {
105      background: url(i/ifocus_btn_bg.gif) no-repeat; 
106      opacity:1; -moz-opacity:1; filter:alpha(opacity=100); 
107      }
108 #ifocus_opdiv { 
109       position:absolute; 
110       left:0; 
111       bottom:0; 
112       width:410px;
113        height:35px;
114         background:#000;
115          opacity:0.5; 
116          -moz-opacity:0.5; 
117          filter:alpha(opacity=50); 
118    }
119 #ifocus_tx { 
120   position:absolute; 
121   left:8px; 
122   bottom:8px; 
123   color:#FFF; }
124 #ifocus_tx .normal { 
125   display:none;
126   }
  1 function $(id) { return document.getElementById(id); }
  2 function addLoadEvent(func){
  3  var oldonload = window.onload;
  4  if (typeof window.onload != 'function') {
  5   window.onload = func;
  6  } else {
  7   window.onload = function(){
  8    oldonload();
  9    func();
 10   }
 11  }
 12 }
 13 function moveElement(elementID,final_x,final_y,interval) {
 14   if (!document.getElementById) return false;
 15   if (!document.getElementById(elementID)) return false;
 16   var elem = document.getElementById(elementID);
 17   if (elem.movement) {
 18     clearTimeout(elem.movement);
 19   }
 20   if (!elem.style.left) {
 21     elem.style.left = "0px";
 22   }
 23   if (!elem.style.top) {
 24     elem.style.top = "0px";
 25   }
 26   var xpos = parseInt(elem.style.left);
 27   var ypos = parseInt(elem.style.top);
 28   if (xpos == final_x && ypos == final_y) {
 29   return true;
 30   }
 31   if (xpos < final_x) {
 32     var dist = Math.ceil((final_x - xpos)/10);
 33     xpos = xpos + dist;
 34   }
 35   if (xpos > final_x) {
 36     var dist = Math.ceil((xpos - final_x)/10);
 37     xpos = xpos - dist;
 38   }
 39   if (ypos < final_y) {
 40     var dist = Math.ceil((final_y - ypos)/10);
 41     ypos = ypos + dist;
 42   }
 43   if (ypos > final_y) {
 44     var dist = Math.ceil((ypos - final_y)/10);
 45     ypos = ypos - dist;
 46   }
 47   elem.style.left = xpos + "px";
 48   elem.style.top = ypos + "px";
 49   var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
 50   elem.movement = setTimeout(repeat,interval);
 51 }
 52 function classNormal(iFocusBtnID,iFocusTxID){
 53  var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
 54  var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
 55  for(var i=0; i<iFocusBtns.length; i++) {
 56   iFocusBtns[i].className='normal';
 57   iFocusTxs[i].className='normal';
 58  }
 59 }
 60 function classCurrent(iFocusBtnID,iFocusTxID,n){
 61  var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
 62  var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
 63  iFocusBtns[n].className='current';
 64  iFocusTxs[n].className='current';
 65 }
 66 function iFocusChange() {
 67  if(!$('ifocus')) return false;
 68  $('ifocus').onmouseover = function(){atuokey = true};
 69  $('ifocus').onmouseout = function(){atuokey = false};
 70  var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
 71  var listLength = iFocusBtns.length;
 72  iFocusBtns[0].onmouseover = function() {
 73   moveElement('ifocus_piclist',0,0,5);
 74   classNormal('ifocus_btn','ifocus_tx');
 75   classCurrent('ifocus_btn','ifocus_tx',0);
 76  }
 77  if (listLength>=2) {
 78   iFocusBtns[1].onmouseover = function() {
 79    moveElement('ifocus_piclist',0,-225,5);
 80    classNormal('ifocus_btn','ifocus_tx');
 81    classCurrent('ifocus_btn','ifocus_tx',1);
 82   }
 83  }
 84  if (listLength>=3) {
 85   iFocusBtns[2].onmouseover = function() {
 86    moveElement('ifocus_piclist',0,-450,5);
 87    classNormal('ifocus_btn','ifocus_tx');
 88    classCurrent('ifocus_btn','ifocus_tx',2);
 89   }
 90  }
 91  if (listLength>=4) {
 92   iFocusBtns[3].onmouseover = function() {
 93    moveElement('ifocus_piclist',0,-675,5);
 94    classNormal('ifocus_btn','ifocus_tx');
 95    classCurrent('ifocus_btn','ifocus_tx',3);
 96   }
 97  }
 98 }
 99 setInterval('autoiFocus()',5000);
100 var atuokey = false;
101 function autoiFocus() {
102  if(!$('ifocus')) return false;
103  if(atuokey) return false;
104  var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
105  var listLength = focusBtnList.length;
106  for(var i=0; i<listLength; i++) {
107   if (focusBtnList[i].className == 'current') var currentNum = i;
108  }
109  if (currentNum==0&&listLength!=1 ){
110   moveElement('ifocus_piclist',0,-225,5);
111   classNormal('ifocus_btn','ifocus_tx');
112   classCurrent('ifocus_btn','ifocus_tx',1);
113  }
114  if (currentNum==1&&listLength!=2 ){
115   moveElement('ifocus_piclist',0,-450,5);
116   classNormal('ifocus_btn','ifocus_tx');
117   classCurrent('ifocus_btn','ifocus_tx',2);
118  }
119  if (currentNum==2&&listLength!=3 ){
120   moveElement('ifocus_piclist',0,-675,5);
121   classNormal('ifocus_btn','ifocus_tx');
122   classCurrent('ifocus_btn','ifocus_tx',3);
123  }
124  if (currentNum==3 ){
125   moveElement('ifocus_piclist',0,0,5);
126   classNormal('ifocus_btn','ifocus_tx');
127   classCurrent('ifocus_btn','ifocus_tx',0);
128  }
129  if (currentNum==1&&listLength==2 ){
130   moveElement('ifocus_piclist',0,0,5);
131   classNormal('ifocus_btn','ifocus_tx');
132   classCurrent('ifocus_btn','ifocus_tx',0);
133  }
134  if (currentNum==2&&listLength==3 ){
135   moveElement('ifocus_piclist',0,0,5);
136   classNormal('ifocus_btn','ifocus_tx');
137   classCurrent('ifocus_btn','ifocus_tx',0);
138  }
139 }
140 addLoadEvent(iFocusChange);

 

posted @ 2016-06-01 22:27  待繁华落尽  阅读(385)  评论(0)    收藏  举报