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

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

javascript jquery html css

Javascript 如何使用js使幻灯片图像可单击以在同一页面上打开图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在使用一个支持滑动的图像滑块，当我单击滑块中的任何图像时，我想打开同一页面底部的其他图像。这是我的一段代码，它不允许我这样做： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Demo 1</title> <meta name="viewport" content="width=device-width, initial-sca

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

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


演示1
$（文档）.ready（函数（）{
$（'.hidable'）.hide（）；
$（'.imgbtn'）。单击（函数（）{
target=$（this.attr（'data-target'）；
$（“.link:n个子项（“+target+”）。单击（）；
});
$（'.link'）。每个（函数（）{
$（this.toggleClass（“active”）.next（）；
$（此）。单击（函数（）{
var show=$（this.attr（'rel'）；
$（'.hidable'）.slideUp（'slow'）；
$（show.slideDown（'fast'）；
});
});
});
正文{font:normal 0.9em Arial；边距：0；}
a{color:#fc006d；}
ul li{填充：10px 0；}
标题{显示：块；填充：60px 0 10px；背景色：#ff005d；文本-
对齐：居中；}
标题a{
字体系列：无衬线；
字体大小：24px；
线高：24px；
填充：8px 13px 7px；
颜色：#4d5256；
文字装饰：无；
过渡：颜色0.7s；
}

在我的情况下，这是有效的：

所以-标签必须在

小问题：所有图片必须具有相同的纵横比。我没有试图解决这个问题，但生成的图片适合

你好，JB

链接到忍者滑块页面上的同一主题：

如果ninja-slider.js依赖于jQuery，请在它们之后加载滑块，谢谢，但我没有得到它：（图像

icon1.png-icon5.png

都具有相同的id。这在html中是不允许的，可能会导致不可预测的结果。更改它们后，无法工作：(