堆棧內存溢出
  簡體   English   中英

如何僅使用Javascript動態創建帶有“上一個”和“下一個”按鈕的圖像-視頻縮略圖滑塊？

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

 原文  2018-07-17 08:43:35  6   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