Question

我想在我的图片滑块上添加下一个和上一个按钮，但我不知道该怎么做。 Plz的帮助。我有一个基本结构..？

这是我的代码..

HTML

     <div class="large-photo">
         <img src="images/large-photo/photo1.jpg" class="active">
         <img src="images/large-photo/photo2.jpg">
     </div>
     <div class="small-photo">
         <img src="images/small-photo/photo1.jpg" class="thumb selected">
         <img src="images/small-photo/photo2.jpg" class="thumb">
     </div>
     <div class="arrow">
         <div class="left-arrow"></div>
         <div class="right-arrow"></div>
      </div>

CSS

.large-photo img {
     display: none;
 }
 .large-photo img.active  {
     display:block;
 }
 .small-photo img.selected {
     border: 3px solid red;
 }

JAVASCRIPT

   function loadPhoto() {
        $('.small-photo img').click(function() {
        $('.selected').removeClass('selected');
        var index = $(this).index();
        $('.large-photo img.active').removeClass('active');
        $('.large-photo img').eq(index).addClass('active');
        $(this).addClass('selected');
    });

Answer 1

根据你的代码，我很难理解你想要的东西，但是你会了解这个系统是如何工作的，以及如何以不同的方式使用它。代码：

<style type="text/css">

    #container{
        width: 266px ;
        height:128px ;
        overflow: hidden;
    }

</style>
<script type="text/javascript" src="jquery-2.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
        $("#left-arrow").click(function(){

            $(".small-photo").fadeIn();
            $(".large-photo").fadeOut();
        });

        $("#right-arrow").click(function(){
            $(".small-photo").fadeOut();
            $(".large-photo").fadeIn(1000);
        });
    });


</script> 

<div id="container">
<div class="large-photo">
         <img src="images/1395924816_personal-information.png">
         <img src="images/1395938204_lock.png">
     </div>
     <div class="small-photo">
         <img src="images/1395939936_application-pgp-signature.png" >
         <img src="images/1396010974_button-cross_basic_red.png" >
     </div>

    </div>
     <div class="arrow">
          <a href="#" id="left-arrow">&lt;-</a> 
          <a href="#" id="right-arrow">-></a> 
      </div>

是的，我必须做一些主要的chages，如删除CSS，但你可以添加，但我的意外，我删除它只是为了告诉你如何做你想要的我也改变一些类的ID ..等等，也可以更改图片，并将所有图片替换为图片..

工作demo

将Next和Prev按钮添加到我的幻灯片中

1 个答案: