|
|
此文章由 xiaotingluwazan 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 xiaotingluwazan 所有！转贴必须注明作者、出处和本声明，并保持内容完整
自己在百度还有Google上搜了好久，大多数都是教Hover，比如鼠标移动在图片上，图片就放大，或者变成字，或者变暗等等，可是就是找不到在上面单独区域或者右面单独区域显示大图。所以觉得自己可能是找偏了，请大侠指点一下迷津。至少可以找到正确的教程学习一下。
目的是把代码嵌入在Ebay Listing里的描述部分，下面显示一排小图，上面单独区域显示大图，鼠标放在一个小图上，上面的大图就随之变化，上面的大图始终是一个框里的。
有的说也是Hover的一部分，只是需要设定另外一个Section？
有的说必须要Java啥的。
因为没有专业知识，基本上是看到别人网站或者listing里面有什么自己喜欢的，就想业余学习一下。 下面的是我找到的，但是真正运用起来图片什么都没有显示。 这上面的images/x1.jpg 我放的是URL， images/d1.jpg， 还是同一个URL，需要怎么做呢？
<!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>js左侧小缩略图控制右侧大图切换显示相册代码</title>
<body>
<style type="text/css">
/* iFocus style */
#ifocus {width:510px; height:520px;margin:40px auto 0 auto;border:solid 1px #ddd;padding:10px 0 0 0;}
#ifocus ul{ margin:0; padding:0; list-style:none;}
#ifocus li{ list-style:none;}
#ifocus_btn {display:inline; float:left; width:91px; margin-right:20px;}
#ifocus_btn li {width:100px; height:103px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50);}
#ifocus_btn img {width:75px; height:90px; margin:7px 0 0 5px;}
#ifocus_btn .current {background: url(images/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:0.5; filter:alpha(opacity=100);}
#ifocus_pic {position:relative; float:left; width:380px; height:513px; overflow:hidden;}
#ifocus_piclist {position:absolute; float:right; display:inline}
</style>
<div id="ifocus">
<div id="ifocus_btn">
<ul style="margin-left:8px;">
<li class="current"><img src="images/x1.jpg" height="513" width="380"></li>
<li class="normal"><img src="images/x2.jpg" height="513" width="380"></li>
<li class="normal"><img src="images/x3.jpg" height="513" width="380"></li>
<li class="normal"><img src="images/x4.jpg" height="513" width="380"></li>
<li class="normal"><img src="images/x5.jpg" height="513" width="380"></li>
</ul>
</div>
<div id="ifocus_pic">
<div style="left: 0px; top: 0px;" id="ifocus_piclist">
<ul>
<li><a><img src="images/d1.jpg" height="513" width="380"></a></li>
<li><a><img src="images/d2.jpg" height="513" width="380"></a></li>
<li><a><img src="images/d3.jpg" height="513" width="380"></a></li>
<li><a><img src="images/d4.jpg" height="513" width="380"></a></li>
<li><a><img src="images/d5.jpg" height="513" width="380"></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>
<li class="normal"> </li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
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,5,0);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
if (listLength>=2) {
iFocusBtns[1].onmouseover = function() {
moveElement('ifocus_piclist',0,-513,0);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',1);
}
}
if (listLength>=3) {
iFocusBtns[2].onmouseover = function() {
moveElement('ifocus_piclist',0,-1032,0);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',2);
}
}
if (listLength>=4) {
iFocusBtns[3].onmouseover = function() {
moveElement('ifocus_piclist',0,-1550,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',3);
}
}
if (listLength>=5) {
iFocusBtns[4].onmouseover = function() {
moveElement('ifocus_piclist',0,-2068,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',4);
}
}
}
setInterval('autoiFocus()',10000);
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,-530,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',1);
}
if (currentNum==1&&listLength!=2 ){
moveElement('ifocus_piclist',0,-1060,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',2);
}
if (currentNum==2&&listLength!=3 ){
moveElement('ifocus_piclist',0,-1590,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',3);
}
if (currentNum==3&&listLength!=4 ){
moveElement('ifocus_piclist',0,-2120,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',4);
}
if (currentNum==4&&listLength!=5 ){
moveElement('ifocus_piclist',0,-2650,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',5);
}
if (currentNum==5 ){
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);
}
if (currentNum==3&&listLength==4 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
if (currentNum==4&&listLength==5 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
}
addLoadEvent(iFocusChange);
</script>
</body>
</html>
|
|
80后装修记(室外更新） (2015-8-16) z3285470 
发表于 2017-4-11 20:34