Question

我的html代码有问题，问题是我正在尝试创建一个项目滑块，如果它被称为它，在我的情况下，我有9个项目，我想只显示5个当有人点击矩形时，它会向左滑动并向他显示3个左侧品牌，但每次我都试图这样做，没有任何反应，请查看我的代码：

    <div id="tf-clients" class="text-center">
    <div class="overlay">
        <div class="container">

            <div class="section-title center">
                <h2>Some of <strong>our Clients</strong></h2>
                <div class="line">
                    <hr>
                </div>
            </div>
            <div id="clients" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
                <div class="owl-wrapper-outer autoHeight" style="height: 121px;"><div class="owl-wrapper" style="width: 3192px; left: 0px; display: block;"><div class="owl-item" style="width: 228px;"><div class="item">
                    <img src="img/client/01.png">
                </div></div><div class="owl-item" style="width: 228px;"><div class="item">
                    <img src="img/client/02.png">
                </div></div><div class="owl-item" style="width: 228px;"><div class="item">
                    <img src="img/client/03.png">
                </div></div><div class="owl-item" style="width: 228px;"><div class="item">
                    <img src="img/client/04.png">
                </div></div><div class="owl-item" style="width: 228px;"><div class="item">
                    <img src="img/client/05.png">
                </div></div><div class="owl-item" style="width: 228px;"><div class="item">
                    <img src="img/client/06.png">
                </div></div><div class="owl-item" style="width: 228px;"><div class="item">
                    <img src="img/client/07.png">
                </div></div></div></div>

            <div class="owl-controls clickable"><div class="owl-pagination"><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div></div></div>

        </div>
    </div>
</div>

你可以看到这是我的代码，它有9张图片，我创建了一个span标签，以便创建一个矩形，所以当我点击跨度时，它会向我显示其他隐藏的图像，但它似乎无法正常工作我做错了什么，请提前帮助我，谢谢你提前感谢。

Answer 1

我最近刚刚练习了类似的东西。这就是我想出来的，看看它是否有帮助：

http://jsfiddle.net/v3kLwh0o/

HTML：

<div class="slider-wrapper">
   <div class="arrows">
      <div class="left"><i class="fa fa-chevron-left fa-lg"></i></div>
      <div class="right"><i class="fa fa-chevron-right fa-lg"></i></div>
   </div>

   <ul class="slides">
      <li class="slide one"></li>
      <li class="slide two"></li>
      <li class="slide three"></li>
      <li class="slide one"></li>
   </ul>
</div>

CSS：

.slider-wrapper {
    margin: auto;
    margin-top: 50px;
    width: 720px;
    height: 400px;
    overflow: hidden;
    background-color: black;
}

.slider-wrapper > .slides {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 2880px; /* 720*4(pictures) */
    height: 400px;
}

.one { background-color: blue; }
.two { background-color: green; }
.three { background-color: red; }

.slider-wrapper > .slides .slide {
    width: 720px; /* 720px */
    height: 400px; /* 400px */
    float: left;
}

.slider-wrapper > .arrows {
    margin: 170px 0; /* (400-60[height of arrow container])/2 */
    position: absolute;
    width: 720px;
}

.slider-wrapper > .arrows > .left, .slider-wrapper > .arrows > .right {
    height: 60px;
    width: 50px;
    background-color: gray;
    padding: 20px 0; /* (60-20[height of arrow])/2 */
    color: white;
    text-align: center;
}

.slider-wrapper > .arrows > .left:hover, .slider-wrapper > .arrows > .right:hover {
    background-color: black;
    cursor: pointer;
}

.slider-wrapper > .arrows > .left { float: left; }
.slider-wrapper > .arrows > .right { float: right; }

JS：

// Set quantified variables
        var width = 720;
        var animationSpeed = 1000;
        var slideCount = 1;

        // Set variables to cache the DOM tree parts that are needed (makes performance faster since the program doesn't have to go through the entire tree everytime)
        var $leftArrow = $('.arrows > .left');
        var $rightArrow = $('.arrows > .right');

        var $slider = $('.slider-wrapper > .slides');
        var $slides = $slider.find('.slide');

        // Runs when the left arrow is clicked
        $leftArrow.click(function() {
            $slider.animate({'margin-left':'-='+width}, animationSpeed, function() {
                // After the animation ends, increase counter and check to see if its on the last image
                slideCount++;
                if (slideCount == $slides.length) {
                    slideCount = 1;
                    $slider.css('margin-left','0');
                }

                // console.log("Left: " + slideCount);
            });
        });

        // Runs when the right arrow is clicked
        $rightArrow.click(function() {
            // Check to see if slider is on the first image (which it is initially)
            // If it is, change the left margin of the slider to (number of images - 1) * width * -1 (i.e. margin-left of the last image)
            var firstImageCheck = function() {
                if (slideCount == 1) {
                    slideCount = $slides.length;
                    lastPicMargin = width * ($slides.length-1) * -1;
                    $slider.css('margin-left', lastPicMargin);
                }
            }

            firstImageCheck();

            $slider.animate({'margin-left':'+='+width}, animationSpeed, function() {
                // After the animation ends, decrease counter and check to see if its on the first image
                slideCount--;
                firstImageCheck();
                // console.log("Right: " + slideCount);
            });
        });

项目滑块无法正常工作

1 个答案: