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

时间:2014-05-26 07:45:23

标签: javascript html css

我想在我的图片滑块上添加下一个和上一个按钮,但我不知道该怎么做。 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');
    });

1 个答案:

答案 0 :(得分:0)

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

<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