堆栈内存溢出
  繁体   English   中英

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

[英]How to Create Image-Video Thumbnail Slider With Previous and Next Button dynamically using Javascript only?

 原文  2018-07-17 08:43:35  2   2    javascript/ jquery/ html/ css

问题描述

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

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

这是我从这段代码中得到的输出

并且图像应仅排成一排

请帮我 ！！ 

$(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 = '❯';
        container.appendChild(nextButton);





        var prevButton = document.createElement('button');
        prevButton.className = 'previous'; 
        prevButton.innerHTML = '❮';
        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>

2 个解决方案

解决方案1
 0  2018-07-17 11:32:07

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

(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

解决方案2
 0  2018-07-23 09:06:01

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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 图像 slider 与 javascript 与下一个上一个按钮 如何使用鼠标将图像滑块移至下一个或上一个？ 如何使用jquery jplayer的视频网址创建缩略图 创建显示上一张和下一张图像的一部分的图像滑块 如何从视频网址创建缩略图图像 如何使用javascript创建上一个按钮？ 如何使用关闭按钮从图像创建缩略图 使用Jquery / Javascript单击下一个和上一个按钮时动态添加图像 如何在轮播中将上一个和下一个图像嵌入上一个和下一个按钮 如何将下一个上一个按钮添加到js jQuery滑块？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM