带有缩略图的jQuery滑块答案

【问题标题】：jquery slider with thumbnail带有缩略图的jQuery滑块
【发布时间】：2015-12-01 15:49:00
【问题描述】：

我在 jquery 中有图像滑块，它工作正常。但我制作了一个图像的缩略图部分，以便在 click 上的滑块中显示它们。我的 html 和 jquery 代码在这里 HTML

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="binding.css">
    <title>interval</title>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script></script>
</head>
<body>
    <div id="container"><!--container started-->
        <div id="slider"><!--slider-->
            <div class="slider-pic" id="first"><img src="globe2.jpg" width="300" height="300"></div>
            <div class="slider-pic" id="second"><img src="globe3.gif" width="300" height="300"></div>
            <div class="slider-pic" id="third"><img src="globe4.gif" width="300" height="300"></div>
            <div class="slider-pic" id="fourth"><img src="globe5.gif" width="300" height="300"></div>
        </div><!--slider-->
        <div class="thumbnail">
            <div class="thumbnail-images">
                <ul class="imags">
                   <li><a href="#"><img src="globe2.jpg" width="45px" height="34" id="one"></a></li>
                   <li><a href="#"><img src="globe3.gif" width="45px" height="34" id="two"></a></li>
                   <li><a href="#"><img src="globe4.gif" width="45px" height="34" id="three"></a></li>
                   <li><a href="#"><img src="globe5.gif" width="45px" height="34" id="four"></a></li>
               </ul>
            </div>
        </div>
    </div>
<!--container ended-->
<!-- <div id="button-previous"><a href="#">previous </a></div>
    <div id="button-next"><a href="#">next</a></div>-->
</body>
</html>

JQUERY

$(document).ready(function(){
    var thumbnails = $('ul.thumbnails li');
    function nextslide(){
        $(".active").removeClass("active").addClass("oldActive");
        if($(".oldActive").is(":last-child")){
            $(".slider-pic").first().addClass("active");
        }
        else{
            $(".oldActive").next().addClass("active");
        }
        $('.oldActive').removeClass('oldActive');
        $('.slider-pic').fadeOut();
        $('.active').fadeIn();
    }
    $(".slider-pic").first().addClass("active");
    $(".slider-pic").hide();
    $(".active").show();
    setInterval(function(){
       nextslide(); 
   }, 3000);
    $("#next").click(function(){
        $(this).unbind("nextslide()");
    });
    function previous(){
        $('.active').removeClass('active').addClass('oldActive');    
        if ( $('.oldActive').is(':first-child')) {
            $('.slider-pic').last().addClass('active');
        }
        else{
            $('.oldActive').prev().addClass('active');
        }
        $('.oldActive').removeClass('oldActive');
        $('.slider-pic').fadeOut();
        $('.active').fadeIn();
    }
    $('#previous').click(function(){
       $(this).unbind(" previous()")
   });
});

CSS

*{
    padding:0px;
    margin:0px auto;
}
#container{
    width:400px;
    margin-top:15px;
    height:370px;

    background-color:#CCC
}
#slider{
    width:400px;
    height:320px;
    position:relative;
    /*background-color:#FF0;*/
}
.slider-pic{
    width:400px;
    height:320px;
    position:absolute;
    /*background-color:#00F;*/
}
.thumbnail{
    width:400px;
    height:50px;

    float:left;
    position:relative;
}
.thumbnail-images{
    width:188px;
    height:36px;
    float:left;
    position:absolute;
    top:10px;
    left:113px;
}

.slider-pic img{
    margin-top:20px;
    margin-left:50px;
}
#previous{
    float:left;
    /*background-color:yellow;*/
    position:absolute;
    width:30px;
    top:177px;
    height:30px;
    left:480px;

}
#next{
    float:right;
    /*background-color:yellow;*/
    width:30px;
    top:175px;
    right:483px;
    height:30px;
    position:absolute;

}
ul.imags { 
    position:absolute; 
}
ul.imags li { 
    float:left;
    list-style-type:none;
    border:1px solid #000;
}

有人可以修复它吗？点击缩略图时，将其显示在顶部

【问题讨论】：

标签： jquery html css image

【解决方案1】：

您可以使用此代码：

$("ul.imags img").click(function () {
  var mapping = {
    one: "first",
    two: "second",
    three: "third",
    four: "fourth"
  };
  // alert("Next slide is " + mapping[this.id]);
  $(".active").removeClass("active");
  clearInterval(theInt);
  $("#" + mapping[this.id]).prev().addClass("active");
  nextslide();
  theInt = setInterval(function(){
    nextslide(); 
  }, 3000);
});

注意：您需要添加prevslide()检查。

输出：http://output.jsbin.com/wojireyuqu

【讨论】：