我正在使用支持滑动的图像 slider ，当我单击 slider 中的任何图像时，我想在同一页面的底部打开其他图像。这是我的一段代码，它不能让我这样做:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="ninja-slider.css" rel="stylesheet" type="text/css" />
<script language="javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"
type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="ninja-slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.hidable').hide();
$('.imgbtn').click(function(){
target = $(this).attr('data-target');
$(".link:nth-child(" + target + ")").click();
});
$('.link').each(function(){
$(this).toggleClass("active").next();
$(this).click(function(){
var show=$(this).attr('rel');
$('.hidable').slideUp('slow');
$(show).slideDown('fast');
});
});
});
</script>
<style>
body {font: normal 0.9em Arial;margin:0;}
a {color:#fc006d;}
ul li {padding: 10px 0;}
header {display:block;padding:60px 0 10px;background-color:#ff005d;text-
align:center;}
header a {
font-family: sans-serif;
font-size: 24px;
line-height: 24px;
padding: 8px 13px 7px;
color: #4d5256;
text-decoration:none;
transition: color 0.7s;
}
</style>
</head>
<body>
<div id="ninja-slider">
<div class="slider-inner">
<ul>
<li>
<img src="pic1.png" class="ns-img"><a class='link'
rel='#div1' href="#"> </a></img>
</li>
<li><img src="pic2.png" class="ns-img"><a class='link'
rel='#div2' href="#"></a></img>
</li>
<li>
<img src="pic3.png" class="ns-img"><a class='link'
rel='#div3' href="#"></a></img>
</li>
<li>
<img src="pic4.png" class="ns-img"><a class='link'
rel='#div4' href="#"></a></img>
</li>
<li>
<img src="pic5.png" class="ns-img"><a class='link'
rel='#div5' href="#"></a></img>
</li>
</ul>
</div>
<div id="boxes">
<div class='hidable' id='div1'><table><tr><td><img class='link'
src="icon1.png"></a></td></tr></table></div>
<div class='hidable' id='div2'><table><tr><td><img src="icon2.png"></a>
</td></tr></table></div>
<div class='hidable' id='div3'><table><tr><td><img src="icon3.png"></a>
</td></tr></table></div>
<div class='hidable' id='div4'><table><tr><td><img src="icon4.png"></a>
</td></tr></table></div>
<div class='hidable' id='div5'><table><tr><td><img src="icon5.png"></a>
</td></tr></table></div>
</div>
</body>
</html>
最佳答案
在我的例子中，这是有效的:
<li><a href="00001.jpg"><img class="ns-img" src="00001.jpg" style="cursor-pointer;"></a></li>
所以 -Tag 必须在 ...
小问题:所有图片都必须是相同的纵横比。 我没有尝试解决这个问题，但生成了适合...的图片
问候，JB
在 Ninja-Slider-page 链接到同一主题: Menucool NinjaSlider FAQ
关于javascript - 如何使用js使幻灯片图像可点击以在同一页面上打开图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45117263/