Question

我有一个滑块，当用户点击图像地图时，该滑块变为可见。我的页面上有3个不同的图像地图，每个图像在激活时都会显示不同的幻灯片组。目前，滑块显示每个图像映射的相同幻灯片。如何在不创建3个不同滑块的情况下实现此目的。我希望使用一个滑块，在单击其中一个图像映射时选择正确的幻灯片。附上我的html和js文件。

$(document).ready(function () {

    $('#slider_option').click(function(){
        $('#slider').css('visibility','hidden');
        $('#slider_option').css('visibility','hidden');
        $('#gallery1').fadeTo( 1200, 1,function(){

        });
    });

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
            }, 200, function () {
                $('#slider ul li:last-child').prependTo('#slider ul');
                $('#slider ul').css('left', '');
            });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
            }, 200, function () {
                $('#slider ul li:first-child').appendTo('#slider ul');
                $('#slider ul').css('left', '');
            });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

    $('map').click(function(){

        $('#gallery1').fadeTo( 1200, 0 );
        $('#slider').css('visibility','visible');
        $('#slider_option').css('visibility','visible');


    });

});


And here is my html:


  <!DOCTYPE HTML>

 <html>
 <head>
     <meta charset="utf-8" />
     <title>paulienlombard.com</title>

     <link rel="stylesheet" type="text/css" href="index.css">

     <script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script type="text/javascript" src="index.js"></script>

 </head>

 <body>

     <div id="container">

         <div id="content" class="clearfix">

             <div style="fgimg">


                 <img src="homepage_im.png" class="fgimg" alt="homepage" width="960" height="600"   usemap="#gallery" id="gallery1"/>

                 <map name="gallery" id="gallery">
                     <area shape="rect" coords="25,225,200,450" style="outline:none" href="#" alt="" />
                     <area shape="rect" coords="750,225,925,450" style="outline:none" href="#" alt="" />
                     <area shape="rect" coords="375,275,575,425" style="outline:none" href="#" alt="" />
                 </map>
             </div>    

         </div>

         <div id="header">

            <img src="logo_im.png" alt="Logo Paulien Lombard" id="logo">

         </div>

         <div id="slider" class="gallery">
             <a href="#" class="control_next">&gt;</a>
             <a href="#" class="control_prev">&lt;</a>
             <ul>
                 <li><img src="dog.png" class="slide" alt="dog" id="im6"></li>
                 <li><img src="disk.png" class="slide" alt="disk" id="im7"></li>
                 <li><img src="fruit.png" class="slide" alt="fruit" id="im8"></li>
                 <li><img src="garden.png" class="slide" alt="garden" id="im9"></li>
                 <li><img src="girl.png" class="slide" alt="girl" id="im10"></li>
                 <li><img src="vondel.png" class="slide" alt="vondel" id="im1"></li>
                 <li><img src="rome2.png" class="slide" alt="rome2" id="im2"></li>
                 <li><img src="room.png" class="slide" alt="room" id="im3"></li>
                 <li><img src="rome.png" class="slide" alt="rome" id="im4"></li>
                 <li><img src="berkeley.png" class="slide" alt="berkeley" id="im5"></li>
             </ul>  
         </div>

         <div id="slider_option">
             &#10005;
         </div> 

     </div>


</body>

</html>

Answer 1

在这里，您会找到显示可能解决方案的jsFiddle。不要谈论幻灯片和其他项目，让我们考虑屏幕上的图像。我们在这里所说的是，我们希望仅显示可能图像的子集，而不是基于事件显示所有图像。在示例中，我们将六个图像加载到屏幕中，但它们被分成三组（分组）。根据单击的按钮，相应的设置将变为可见。

这只是一种可能的解决方案。其他解决方案只有在选择了适当的集合时才能动态加载图像，这样会更有效，但是这表明了一般概念。

此解决方案的代码为：

$(function() {
    function hideAll() {
        $(".group img").hide();
    }

    $("#set1").click(function() {
        hideAll();
        $(".group .set1").show();
    });

    $("#set2").click(function() {
        hideAll();
        $(".group .set2").show();
    });

    $("#set3").click(function() {
        hideAll();
        $(".group .set3").show();
    });
});

为三个按钮中的每个按钮设置回调，然后使用类选择器确定要隐藏和显示的组。

三个不同的onclick事件应显示同一滑块的三组不同幻灯片

1 个答案: