我正在尝试让 2 个不同的脚本一起工作..
一个是简单的缩略图切换脚本，它根据单击的缩略图更改大图像，来自 http://bonrouge.com/br.php?page=imageswitch
另一个是图像缩放脚本，它根据鼠标悬停的位置缩放到更大的图像，来自 http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm
问题是它总是显示第二张图片，无论缩略图切换到第一张还是第二张。我认为它与 div 重叠或其他原因有关。
这是组合代码:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#image-switch ul {
margin:0 0 0 20px;
color:red;
list-style-type:none;
}
#image-switch li {
padding:10px;
}
#image-switch #two, #image-switch #three, #image-switch #four, #image-switch #five {
display:none;
}
#radiobs {
width:150px;
position:relative;
margin:0;
}
#radiobs input {
margin:0;
padding:0;
position:absolute;
margin-left:6em;
width:15px;
}
</style>
<style type="text/css">
.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}
</style>
</head>
<body>
<div id="image-switch">
<div class="fright">
<div id="one">
<img id="image1" src="redsmall.jpg" height="193" width="150" alt="redsmall" />
<p>This is a red one.</p>
</div>
<div id="two">
<img id="image2" src="bluesmall.jpg" height="193" width="150" alt="bluesmall" />
<p>This is a blue one.</p>
</div>
</div>
</div>
<ul>
<li><a onclick="switch1('one');">first frame</a></li>
<li><a onclick="switch1('two');">second frame</a></li>
</ul>
<div class="clear"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="featuredimagezoomer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [450,350],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'redbig.jpg' //<-- No comma after last option!
})
$('#image2').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [450,350],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'bluebig.jpg' //<-- No comma after last option!
})
})
</script>
<script type="text/javascript">
function switch1(div) {
var options, obj, id;
if (document.getElementById(div)) { // change this to div instead of 'one'
options=['one','two','three','four'];
for (var i=0; i<options.length; i++) {
id = options[i]; // caching the array item is good practice bc array/object access is slow
obj=document.getElementById(id);
if (!obj) { continue; } // make sure the obj exists
obj.style.display = (id === div) ? "block" : "none";
}
}
}
//
</script>
</body>
</html>
如果有人有任何想法出了什么问题，我保证我会用你的名字给我的长子命名!
最佳答案
我注意到有两件事是错误的:
1:
你两次都使用了#image1
jQuery(document).ready(function($){
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [450,350],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'redbig.jpg' //<-- No comma after last option!
}); //use semicolons
$('#image2').addimagezoom({ // **** image2 not image1!!! ****
zoomrange: [3, 10],
magnifiersize: [450,350],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'bluebig.jpg' //<-- No comma after last option!
}); //use semicolons
}); //use semicolons
2:
您需要检查 div 是否存在，而不是每次都检查“一个”是否存在。我还进行了一些其他编辑(请参阅我在代码中的评论)。
var switch1;
(function($){ // let's use jQuery, its on the page anyway
switch1 = function(div) {
var options, $obj, id;
if ($('#' + div).length) { // change this to div instead of 'one'
options=['one','two','three','four'];
for (var i=0; i<options.length; i++) {
id = options[i]; // caching the array item is good practice bc array/object access is slow
$obj=$('#' + id);
if (!$obj.length) { continue; } // make sure the obj exists
$obj.css({
"display": id === div ? "block" : "none",
"left": id === div ? "0" : "10000px"
});
}
}
}
})(jQuery);
编辑: 由于您现在看到了两者，我认为我们需要确保将隐藏的图像从屏幕上移开(然后我们将它们移回)。为此，请按照 css 规则添加更新:
#two, #three, #four, #five { /* using two id selectors in a row is unnecessary */
display: none;
position: relative;
left: 10000px; /* move them wayyy off screen. */
}
关于javascript - 将 div 缩略图切换脚本与图像缩放脚本相结合，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11001491/