Question

我正在使用支持滑动的图像滑块，当我单击滑块中的任何图像时，我想在同一页面的底部打开其他图像。这是我的一段代码，这使我不能这样做：

<!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>

Answer 1

在我的情况下，这有效： <li><a href="00001.jpg"><img class="ns-img" src="00001.jpg" style="cursor-pointer;"></a></li> 因此，-Tag必须位于...的内部。

小问题：所有图片必须具有相同的宽高比。我没有尝试解决此问题，而是生成了适合的图片...

致谢，JB

在Ninja-Slider页面上链接到同一主题： Menucool NinjaSlider FAQ

如何使幻灯片图像可单击以使用js在同一页面上打开图像

1 个答案: