html和javascript的照片滑块

Question

我想制作有10张图片的html照片滑块和左右按钮我想让按钮显示下一张和上一张图片我有下面的代码：

<div class="col-sm-1"></div>
<div class="col-sm-10">
<div id="show" style="height: 500px"></div>
</div>
<div class="col-sm-1"></div>
<div style="min-height: 100px;"></div>
<div style="min-height: 300px;"></div>
<div class="col-sm-12" style="width: 100%; display: inline-block">
<div class="col-sm-1" style="padding:6px;height: 60px;">
    <span style="margin-top:20px" class="glyphicon glyphicon-chevron-left     btn btn-default"></span>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px; ">
    <img id="image_1" src="img/002.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
    <img id="image_2" src="img/003.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
    <img id="image_3" src="img/004.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
    <img id="image_4" src="img/005.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
    <img id="image_5" src="img/006.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
    <img id="image_6" src="img/007.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
    <img id="image_7" src="img/008.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
    <img id="image_8" src="img/009.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
    <img id="image_9" src="img/010.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
    <img id="image_10" src="img/011.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 60px;">
    <span style="margin-top:25px;margin-right: 43px"
          class="glyphicon glyphicon-chevron-right btn btn-default"></span>
</div>
<script type="text/javascript">
    $(function () {
        $('#image_1').click(function () {
            $('#show').css('background-image', 'url(img/002.jpg)');
        });

        $('#image_2').click(function () {
            $('#show').css('background-image', 'url(img/003.jpg)');
        });

        $('#image_3').click(function () {
            $('#show').css('background-image', 'url(img/004.jpg)');
        });

        $('#image_4').click(function () {
            $('#show').css('background-image', 'url(img/005.jpg)');
        });

        $('#image_5').click(function () {
            $('#show').css('background-image', 'url(img/006.jpg)');
        });

        $('#image_6').click(function () {
            $('#show').css('background-image', 'url(img/007.jpg)');
        });

        $('#image_7').click(function () {
            $('#show').css('background-image', 'url(img/008.jpg)');
        });

        $('#image_8').click(function () {
            $('#show').css('background-image', 'url(img/009.jpg)');
        });

        $('#image_9').click(function () {
            $('#show').css('background-image', 'url(img/010.jpg)');
        });

        $('#image_10').click(function () {
            $('#show').css('background-image', 'url(img/011.jpg)');
        });
    });
</script>

Answer 1

我看到你使用引导类。所以你可以尝试使用boostrap标准carousel

你需要像这样把你的图片放在这个块中

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img id="image_6" src="img/007.jpg" width="90" height="90"/>
      <div class="carousel-caption"><!--probably you will need to remove caption if you dont need it -->
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
      </div>
    </div>
    ...
  </div>