Question

我想制作html照片滑块，其中有10个图像出现，右边＆amp;左键我想让按钮显示下一张和前一张图片我有以下代码：

<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

我看到你使用bootstrap类。因此，您可以尝试使用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>

照片滑块由HTML和JavaScript

1 个答案: