js带缩略图的图片切换效果
Posted ╭ 儛動嘚靈魂
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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" /></a></li> 16 <li><a href="#"><img src="img/02.jpg" /></a></li> 17 <li><a href="#"><img src="img/03.jpg" /></a></li> 18 <li><a href="#"><img src="img/04.jpg" /></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" /></li> 34 <li class="normal"><img src="img/btn_02.jpg" /></li> 35 <li class="normal"><img src="img/btn_03.jpg" /></li> 36 <li class="normal"><img src="img/btn_04.jpg" /></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);
以上是关于js带缩略图的图片切换效果的主要内容，如果未能解决你的问题，请参考以下文章