Question

我只想使用javascript使缩略图图像-视频滑块动态化，在这里我创建了一个容器，在其中通过javascript添加了一些图像，但是现在我想使用“下一个”和“上一个”按钮以及在滑动鼠标滑块上滑动这些图像应该滑动。

这是最新的代码，无论我现在在“下一个和上一个”按钮中遇到了什么问题。我希望 NEXT 和 PREVIOUS 中的 onclick 图像滑块向后和向前滑动

This is the Output what i am getting from this code

并且图像只能出现在一个行

中

请帮助我！

$(document).ready(function ()
{
    function PhotoGallery()
    {
        this.index = 0;
        this.holder = [];


        var container = document.getElementById('thumbs_container');
        var nextButton = document.createElement('button');
        nextButton.className = 'next';
        nextButton.innerHTML = '&#10095;';
        container.appendChild(nextButton);





        var prevButton = document.createElement('button');
        prevButton.className = 'previous'; 
        prevButton.innerHTML = '&#10094;';
        container.appendChild(prevButton);

        container = $(window).width();
        nextButton.addEventListener('click', this.next);
        prevButton.addEventListener('click', this.previous);

        this.create = function (name, src) {
            var container = document.getElementById('thumbs_container');
            var img = document.createElement('img');
            img.src = src;
            img.alt = name;
            img.className = 'thumb';
            img.style.width = '300px';
            img.style.height = '150px;';
            container.appendChild(img);

            this.holder.push({
                index: ++this.index,
                ele: img
            })
        }

        this.next = function () {
            this.holder[this.index].ele.style.display = 'none';
            this.holder[++this.index].ele.style.display = block;

        }

        this.previous = function () {
            this.holder[this.index].ele.style.display = 'none';
            this.holder[--this.index].ele.style.display = 'block';

        }
    }

    var photoGallery = new PhotoGallery();
    photoGallery.create('1', 'img/1.jpg');
    photoGallery.create('2', 'img/2.jpg');
    photoGallery.create('3', 'img/3.jpg');
    photoGallery.create('4', 'img/4.jpg');
    photoGallery.create('5', 'img/5.jpg');
    photoGallery.create('6', 'img/6.jpg');
    photoGallery.create('7', 'img/7.jpg');
    photoGallery.create('8', 'img/8.jpg');
    photoGallery.create('9', 'img/9.jpg');
    photoGallery.create('10','img/10.jpg');

#thumbs_container {
    margin: 400px auto; /*center-aligned*/
    width: 100%; /*width:400px;*/
    padding: 4px 40px; /*Gives room for arrow buttons*/
    box-sizing: border-box;
    position: relative;
    background-color: red;
    -webkit-user-select: none;
    user-select: none;
    /*max-width: 1600px;
    max-height: 600px;*/
    overflow:hidden;
}

.thumb{
    margin-right: 1px;
}



.previous {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    margin-left: -33px;
    margin-top: 63px;
}

.next {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    margin-left: 1822px;
    margin-top: 63px;
}

<div id='thumbs_container'></div>

Answer 1

这不是一个全面的答案，但应该为您指明正确的方向。

(function() {
function PhotoGallery() {
    this.index = 0;
    this.holder = [];
    this.setIndexVisible = true;
  // When next funtion is called swap the display properties accordingly
    this.next = function() {
        console.log(this.index);
        this.holder[this.index].ele.style.display = 'none';
        this.holder[this.index+1].ele.style.display = 'block';
        this.index+=1;
    }
    // Ditto as above according the requirement
    this.previous = function() {
        this.holder[this.index].ele.style.display = 'none';
        this.holder[this.index-1].ele.style.display = 'block';
        this.index-=1;
    }
    //create a button each for previous and next
  var container = document.getElementById('thumbs_container');
    let nextButton = document.createElement('button');
    nextButton.className="next";
    nextButton.id = "next";
    container.appendChild(nextButton);
    //style the button
    // Listen to the click event and call the corresponsing function
    nextButton.addEventListener('click', this.next.bind(this));
    this.create = function(name, src) {
        var container = document.getElementById('thumbs_container');
        var img = document.createElement('img');
        img.src = src;
        img.alt = name;
        img.className = 'thumb';
        img.style.width = '200px';
        if(this.setIndexVisible && this.index===0)
            img.style.display = 'block';
        else
            img.style.display = 'none';
        container.appendChild(img);
        this.holder.push({
            index: this.holder.length,
            ele: img
        })
    }
}

var photoGallery = new PhotoGallery();
photoGallery.create('RED SQUARE', 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/2000px-Red.svg.png');
photoGallery.create('BLUE SQUARE', 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/600px-000080_Navy_Blue_Square.svg.png')

}）（）;

更新：请尝试理解代码并对其进行修改以满足您的要求。您可能必须更新下一个和上一个功能，以及一些使其可用的逻辑。这只是如何做的蓝图。这是一个jsbin链接：https://jsbin.com/ginuvonusi/edit?html,css,js,console,output

Answer 2

var leftFrom = 10;
var scrollPosition = 0;
var scrollOffSet = 400;
$(document).ready(function () {
    function PhotoGallery() {



        $('#thumbs_container').css('width', '100%');
        $('#thumbs_container').css('position', 'absolute');
        $('#thumbs_container').css('overflow-y', 'hidden');
        //$('#thumbs_container').css('left', '1.9%')

        $('#thumbs_container').css('float', 'left');
        $('#thumbs_container').css('height', '215px')


        var container = document.getElementById('thumbs_container');
        var nextButton = document.createElement('button');
        nextButton.className = 'next';
        nextButton.innerHTML = '&#10095;';
        container.appendChild(nextButton);




        var next = function () {
            console.log("Next Clicked" + " " + $('#thumbs_container').width());
            if ((scrollPosition + scrollOffSet) < $('#thumbs_container').width()) {
                scrollPosition = scrollPosition + scrollOffSet;
                $('#thumbs_container').animate({ scrollLeft: scrollPosition }, 750);
            }
            else {
                if ((scrollPosition + scrollOffSet) > $('#thumbs_container').width())
                    scrollPosition = scrollPosition + scrollOffSet;
                $('#thumbs_container').animate({ scrollLeft: scrollPosition }, 750);
            }

        }




        var prevButton = document.createElement('button');
        prevButton.className = 'previous';
        prevButton.innerHTML = '&#10094;';
        container.appendChild(prevButton);




        var previous = function ()
        {
            console.log('Clicked Left');
            var leftOffSet = $('#thumbs_container').scrollLeft();
            console.log("leftOffset" + " " + leftOffSet);
            if ((leftOffSet - scrollOffSet) > 0) {
                scrollPosition = scrollPosition - scrollOffSet;
               $('#thumbs_container').animate({ scrollLeft: scrollPosition }, 750);
            } else {
                if (leftOffSet > 0)
                    $('#thumbs_container').animate({ scrollLeft: 0 }, 750);
            }
        }

        this.imagecreate = function (name, src) {
            var container = document.getElementById('thumbs_container');
            var img = document.createElement('img');
            img.src = src;
            img.alt = name;
            img.className = 'thumb';
            img.style.width = '300px';
            img.style.height = '150px';
            img.style.position = 'absolute';
            img.style.left = leftFrom + 'px';
            leftFrom = leftFrom + 310;
            container.appendChild(img);
        }

        this.videocreate = function (src, type) {
            var container = document.getElementById('thumbs_container');
            var video = document.createElement('video');
            var source = document.createElement('source');
            source.src = src;
            source.type = type;
            video.autoplay = true;
            video.loop = true;
            video.controls = false;
            video.style.display = 'inline-block';
            video.style.width = '260px';
            video.style.height = '260px';
            video.style.position = 'absolute';
            video.style.top = '-41px';
            video.style.left = leftFrom + 'px';
            leftFrom = leftFrom + 270;
            video.appendChild(source);
            container.appendChild(video);
        }

        nextButton.addEventListener('click', next);
        prevButton.addEventListener('click', previous);
}

    var photoGallery = new PhotoGallery();
    photoGallery.imagecreate('1', 'img/1.jpg');
    photoGallery.imagecreate('2', 'img/2.jpg');
    photoGallery.imagecreate('3', 'img/3.jpg');
    photoGallery.imagecreate('4', 'img/4.jpg');
    photoGallery.videocreate('img/mcvideo.mp4', 'video/mp4'); 
    photoGallery.imagecreate('5', 'img/5.jpg');
    photoGallery.imagecreate('6', 'img/6.jpg');
    photoGallery.imagecreate('7', 'img/7.jpg');
    photoGallery.imagecreate('8', 'img/8.jpg');
    photoGallery.videocreate('img/SampleVideo_640x360_1mb.mp4', 'video/mp4');
    photoGallery.imagecreate('9', 'img/9.jpg');
    photoGallery.imagecreate('10', 'img/10.jpg');
    photoGallery.imagecreate('11', 'img/006.jpg');
    photoGallery.videocreate('img/small.mp4', 'video/mp4');
    photoGallery.imagecreate('12', 'img/007.jpg');

    });

#thumbs_container {

    width: 100%; /*width:400px;*/
    padding: 14px 40px; /*Gives room for arrow buttons*/
    box-sizing: border-box;
    position: relative;
    background-color: red;
    -webkit-user-select: none;
    user-select: none;
    /*max-width: 1600px;
    max-height: 600px;*/
    overflow:hidden;
}

.thumb{
    margin-right: 1px;
}

button{position: fixed;
    top: 40%;
    z-index: 99999;
    left: 50%;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    height: 30px;
    width: 30px;
    line-height: 30px;}

.previous {
    background-color: #4CAF50;
    border: none;
    color: white;

    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    position: fixed;
    margin-left: -33px;
    top: 7%;
    left: 2%;
}

.next {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 2px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    position: fixed;
    left: 98%;
    top: 7%;
}

.round {
    border-radius: 50%;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>DynamicSlider</title>
    <!--<link href="css/thumbs2.css" rel="stylesheet" />
    <link href="css/thumbnail-slider.css" rel="stylesheet" />
    <script src="js/thumbnail-slider.js" type="text/javascript"></script>

    <script src="js/readImages.js"></script>-->
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>-->
    <script src="js/jquery1.6.2.js"></script>
    <script src="js/jquery-1.7.1.min.js"></script>
    <link href="css/DynamicSlider.css" rel="stylesheet" />
    <script src="js/DynamicSlider.js"></script>





</head>


<body>
    <div id='thumbs_container'>

    </div>

</body>


</html>

如何仅使用Javascript动态创建带有“上一个”和“下一个”按钮的图像视频缩略图滑块？

2 个答案: