如何在jQuery中一鍵單擊按鈕（上一頁/下一頁）或箭頭來滑動我的內容？

Question

當我單擊上一個或下一個按鈕時，我想滑動我的bx-content（div）。 當別人被隱藏時，我有3個內容可見。 我有10個以上的bx-content（div），如果單擊了上一個或下一個按鈕，則我要一個一個地滑動bx-content（div），如果所有內容都已完成並單擊了下一個按鈕，則從頭開始顯示像周期。 有人可以幫我嗎？ 我的html代碼在這里

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
    <section class="bx-feature">
    <h3>Feature</h3>
    <button class="next">Next</button>
    <button class="previous">Prev</button>
    <hr style="clear: both;">
    <div class="bx-slider">
        <div class="bx-content">
            <img src="https://media-cdn.tripadvisor.com/media/photo-s/0c/f0/1e/2d/mt-everest-base-camp.jpg" alt="">
            <h3>Mount Everest</h3>
        </div>
        <div class="bx-content">
            <img src="https://www.wallpaperup.com/uploads/wallpapers/2013/03/23/58533/a2e7390e04f5ed3b6bba3576f75436bb.jpg" alt="">
            <h3>Mount Everest sunset</h3>
        </div>
        <div class="bx-content">
            <img src="https://media-cdn.tripadvisor.com/media/photo-s/0c/f0/1e/2d/mt-everest-base-camp.jpg" alt="">
            <h3>Mount Everest</h3>
        </div>
        <div class="bx-content">
            <img src="https://media-cdn.tripadvisor.com/media/photo-s/0c/f0/1e/2d/mt-everest-base-camp.jpg" alt="">
            <h3>Mount Everest</h3>
        </div>
        <div class="bx-content">
            <img src="https://media-cdn.tripadvisor.com/media/photo-s/0c/f0/1e/2d/mt-everest-base-camp.jpg" alt="">
            <h3>Mount Everest</h3>
        </div>
    </div>
</section>

我的CSS代碼在這里

.bx-feature{ background-color: #e9e9e9; height: 360px; width: 90%; overflow: 
  hidden; margin: auto; margin-top: 100px;}
    .bx-feature h3{ float: left; }
    button{ float: right; border-radius: 5px; padding: 7px; margin: 10px 5px 
    0 5px; }
    .bx-slider{ margin: 10px 20px; }
    .bx-content{ height: 250px; width: 320px; overflow: hidden; float: left; 
   margin: 20px;}
    .bx-content img{ width: 100%; height: 200px; }

Answer 1

您必須在jquery中獲得按鈕，然后在click事件上添加一個偵聽器，之后只需選擇您的容器並使用transform：translateX css屬性更改播放。

像這樣：

var width = $(".bx-slider").width();
var numberChild = $(".bx-slider").children().length;
var move = width / numberChild;
var position = 0;
$(".next").click(
   () => {
      position -= move;
      $(".bx-slider").css({'transform' : 'translateX(' + position + 'px)'}
   }
);

只需將減號更改為上一個按鈕的總和

順便說一句，將您的代碼放在腳本標簽中

如何在jQuery中一鍵單擊按鈕（上一頁/下一頁）或箭頭來滑動我的內容？

問題描述

1 個解決方案

解決方案1
0 2018-03-30 12:39:23

如何在jQuery中一鍵單擊按鈕（上一頁/下一頁）或箭頭來滑動我的內容？

問題描述

1 個解決方案

解決方案1 0 2018-03-30 12:39:23

解決方案1
0 2018-03-30 12:39:23