it-swarm.com.de

Wie erstelle ich einen einfachen jQuery-Bildschieberegler mit Gleit- oder Deckkrafteffekt?

Einige von uns möchten möglicherweise keine fertigen Plugins verwenden, da sie sehr groß sind und Konflikte mit dem aktuellen Javascript verursachen können.

Früher habe ich Plugins für Light Slider verwendet, aber als der Kunde eine modulare Überarbeitung vornahm, war es sehr schwierig, sie zu manipulieren. Dann möchte ich meins erstellen, um es einfach anpassen zu können. Ich glaube, Slider sollten nicht so komplex sein, um von Anfang an zu bauen.

Was ist eine einfache und saubere Methode, um einen jQuery-Image-Schieberegler zu erstellen?

29
Barlas Apaydin

Bevor Sie Beispiele untersuchen, sollten Sie zwei jQuery-Funktionen kennen, die ich am häufigsten verwendet habe.

index () Rückgabewert ist eine Ganzzahl, die die Position des ersten Elements im jQuery-Objekt relativ zu seinen gleichgeordneten Elementen angibt.

eq () wählt ein Element basierend auf seiner Position (Indexwert) aus.

Grundsätzlich nehme ich das index value Des ausgewählten Triggerelements und vergleiche diesen Wert auf Bildern mit der eq -Methode.

- FadeIn/FadeOut Effekt.

- Gleiteffekt .

- Alternative Reaktion des Mausrads .


HTML-Beispiel:

<ul class="images">
   <li>
      <img src="images/1.jpg" alt="1" />
   </li>
   <li>
      <img src="images/2.jpg" alt="2" />
   </li>
   ...
</ul>

<ul class="triggers">
   <li>1</li>
   <li>2</li>
   ...
</ul>
<span class="control prev">Prev</span>
<span class="control next">Next</span>

OPACITY EFFECT: jsFiddle.

css trick: Überlappung von Bildern mit Position: absolut

ul.images { position:relative; }
  ul.images li { position:absolute; }

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(300).eq(target).fadeIn(300);
    triggers.removeClass('active').eq(target).addClass('active');
}

Gleiteffekt: jsFiddle.

css trick: mit doppeltem Wrapper und benutze Kind als Maske

.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden;  }
    ul.images { position:relative; top:0px;left:0px; }
    /* this width must be total of the images, it comes from jquery */
        ul.images li { float:left; }

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var mask = $('.mask ul.images');
var imgWidth = images.width();

triggers.first().addClass('active');
mask.css('width', imgWidth*(lastElem+1) +'px');

function sliderResponse(target) {
    mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300);
    triggers.removeClass('active').eq(target).addClass('active');
}

Gemeinsame jQuery-Antwort für beide Schieberegler:

( löst + next/prev click und timing aus )

triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}

64
Barlas Apaydin

Hier ist ein einfacher und leicht verständlicher Code zum Erstellen einer Diashow mit JavaScript ohne Verwendung von Jquery.

<script language="JavaScript"> 
var i = 0; var path = new Array(); 

// LIST OF IMAGES 
path[0] = "image_1.gif"; 
path[1] = "image_2.gif"; 
path[2] = "image_3.gif"; 

function swapImage() { document.slide.src = path[i]; 
if(i < path.length - 1) i++; 
else i = 0; setTimeout("swapImage()",3000); 
} window.onload=swapImage;

</script> 

<img height="200" name="slide" src="image_1.gif" width="400" />
18
shuseel

Ich habe kürzlich eine Lösung mit einer Bildergalerie und einem Schieberegler erstellt, der beim Klicken auf ein Bild angezeigt wird.

Schauen Sie sich den Code hier an: GitHub Code

Und ein Live-Beispiel hier: Codebeispiel

var CreateGallery = function(parameters) {
        var self = this;
        this.galleryImages = [];
        this.galleryImagesSrcs = [];
        this.galleryImagesNum = 0;
        this.counter;
        this.galleryTitle = parameters.galleryTitle != undefined ? parameters.galleryTitle : 'Gallery image';
        this.maxMobileWidth = parameters.maxMobileWidth != undefined ? parameters.maxMobileWidth : 768;
        this.numMobileImg = parameters.numMobileImg != undefined ? parameters.numMobileImg : 2;
        this.maxTabletWidth = parameters.maxTabletWidth != undefined ? parameters.maxTabletWidth : 1024;
        this.numTabletImg = parameters.numTabletImg != undefined ? parameters.numTabletImg : 3;
        this.addModalGallery = function(gallerySelf = self){
                var $div = $(document.createElement('div')).attr({
                        'id': 'modal-gallery'
                }).append($(document.createElement('div')).attr({
                                'class': 'header'
                        }).append($(document.createElement('button')).attr({
                                        'class': 'close-button',
                                        'type': 'button'
                                }).html('&times;')
                        ).append($(document.createElement('h2')).text(gallerySelf.galleryTitle))
                ).append($(document.createElement('div')).attr({
                                'class': 'text-center'
                        }).append($(document.createElement('img')).attr({
                                        'id': 'gallery-img'
                                })
                        ).append($(document.createElement('button')).attr({
                                        'class': 'prev-button',
                                        'type': 'button'
                                }).html('&#9668;')
                        ).append($(document.createElement('button')).attr({
                                        'class': 'next-button',
                                        'type': 'button'
                                }).html('&#9658;')
                        )
                );
                parameters.element.after($div);
        };
        $(document).on('click', 'button.prev-button', {self: self}, function() {
                var $currImg = self.counter >= 1 ? self.galleryImages[--self.counter] : self.galleryImages[self.counter];
                var $currHash = self.galleryImagesSrcs[self.counter];
                var $src = $currImg.src;
                window.location.hash = $currHash;
                $('img#gallery-img').attr('src', $src);
                $('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1));
        });
        $(document).on('click', 'button.next-button', {self: self}, function() {
                var $currImg = self.counter < (self.galleryImagesNum - 1) ? self.galleryImages[++self.counter] : self.galleryImages[self.counter];
                var $currHash = self.galleryImagesSrcs[self.counter];
                var $src = $currImg.src;
                window.location.hash = $currHash;
                $('img#gallery-img').attr('src', $src);
                $('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1));
        });
        $(document).on('click', 'div#modal-gallery button.close-button', function() {
                $('#modal-gallery').css('position', 'relative');
                $('#modal-gallery').hide();
                $('body').css('overflow', 'visible');
        });
        parameters.element.find('a').on('click', {self: self}, function(event) {
                event.preventDefault();
                $('#modal-gallery').css('position', 'fixed');
                $('#modal-gallery').show();
                $('body').css('overflow', 'hidden');
                var $currHash = this.hash.substr(1);
                self.counter = self.galleryImagesSrcs.indexOf($currHash); 
                var $src = $currHash;
                window.location.hash = $currHash;
                $('img#gallery-img').attr('src', $src);
                $('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1));
        });
        this.sizeGallery = function(gallerySelf = self) {
                var $modalGallery = $(document).find("div#modal-gallery");
                if($modalGallery.length <= 0) {
                        this.addModalGallery();
                }
                var $windowWidth = $(window).width();
                var $parentWidth = parameters.element.width();
                var $thumbnailHref = parameters.element.find('img:first').attr('src');
                if($windowWidth < gallerySelf.maxMobileWidth) {
                        var percentMobile = Math.floor(100 / gallerySelf.numMobileImg); 
                        var emMobile = 0;
                        var pxMobile = 2;
//                        var emMobile = gallerySelf.numMobileImg * 0.4;
//                        var pxMobile = gallerySelf.numMobileImg * 2;
                        parameters.element.find('img').css('width', 'calc('+percentMobile+'% - '+emMobile+'em - '+pxMobile+'px)');
                } else if($windowWidth < gallerySelf.maxTabletWidth) {
                        var percentTablet = Math.floor(100 / gallerySelf.numTabletImg); 
                        var emTablet = 0;
                        var pxTablet = 2;
//                        var emTablet = gallerySelf.numMobileImg * 0.4;
//                        var pxTablet = gallerySelf.numMobileImg * 2;
                        parameters.element.find('img').css('width', 'calc('+percentTablet+'% - '+emTablet+'em - '+pxTablet+'px)');
                } else {
                        var $thumbImg = new Image();
                        $thumbImg.src = $thumbnailHref;
                        $thumbImg.onload = function() {
                                var $thumbnailWidth = this.width;
                                if($parentWidth > 0 && $thumbnailWidth > 0) {
                                        parameters.element.find('img').css('width', (Math.ceil($thumbnailWidth * 100 / $parentWidth))+'%');
                                }
                        };
                }
        };
        this.startGallery = function(gallerySelf = self) {
                parameters.element.find('a').each(function(index, el) {
                        var $currHash = el.hash.substr(1);
                        var $img = new Image();
                        $img.src = $currHash;
                        gallerySelf.galleryImages.Push($img);
                        gallerySelf.galleryImagesSrcs.Push($currHash);
                });
                this.galleryImagesNum = this.galleryImages.length;
        };
        this.sizeGallery();
        this.startGallery();
};
var myGallery;
$(window).on('load', function() {
        myGallery = new CreateGallery({
                element: $('#div-gallery'),
                maxMobileWidth: 768,
                numMobileImg: 2,
                maxTabletWidth: 1024,
                numTabletImg: 3
        });
});
$(window).on('resize', function() {
        myGallery.sizeGallery();
});
#div-gallery {
        text-align: center;
}
#div-gallery img {
        margin-right: auto;
        margin-left: auto;
}
div#modal-gallery {
        top: 0;
        left: 0;
        width: 100%;
        max-width: none;
        height: 100vh;
        min-height: 100vh;
        margin-left: 0;
        border: 0;
        border-radius: 0;
        z-index: 1006;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        display: none;
        background-color: #fefefe;
        position: relative;
        margin-right: auto;
        overflow-y: auto;
        padding: 0;
}
div#modal-gallery div.header {
        position: relative; 
}
div#modal-gallery div.header h2 {
        margin-left: 1rem; 
}
div#modal-gallery div.header button.close-button {
        position: absolute;
        top: calc(50% - 1em);
        right: 1rem;
}
div#modal-gallery img {
        display: block;
        max-width: 98%;
        max-height: calc(100vh - 5em);
        margin-right: auto;
        margin-left: auto;
}
div#modal-gallery div.text-center {
        position: relative;
}
button.close-button {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 20px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        color: #333;
        background-color: #fff;
        border-color: #ccc;
}
button.close-button:hover, button.close-button:focus {
        background-color: #ddd;
}
button.next-button:hover, button.prev-button:hover, button.next-button:focus, button.prev-button:focus {
        color: #fff;
        text-decoration: none;
        filter: alpha(opacity=90);
        outline: 0;
        opacity: .9;
}
button.next-button, button.prev-button {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 15%;
        font-size: 20px;
        color: #fff;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0,0,0,.6);
        background-color: rgba(0,0,0,0);
        filter: alpha(opacity=50);
        opacity: .5;
        border: none;
}
button.next-button {
        right: 0;
        left: auto;
        background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
        background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
        background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
        background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
        background-repeat: repeat-x;
}
button.prev-button {
        background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
        background-image: -o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
        background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));
        background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
        background-repeat: repeat-x;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div-gallery">
        <a href="#http://placehold.it/1024x1024/ff0000/000000?text=Gallery+image+1"><img src="http://placehold.it/300x300/ff0000/000000?text=Gallery+image+1" alt=""></a>
        <a href="#http://placehold.it/1024x1024/ff4000/000000?text=Gallery+image+2"><img src="http://placehold.it/300x300/ff4000/000000?text=Gallery+image+2" alt=""></a>
        <a href="#http://placehold.it/1024x1024/ff8000/000000?text=Gallery+image+3"><img src="http://placehold.it/300x300/ff8000/000000?text=Gallery+image+3" alt=""></a>
        <a href="#http://placehold.it/1024x1024/ffbf00/000000?text=Gallery+image+4"><img src="http://placehold.it/300x300/ffbf00/000000?text=Gallery+image+4" alt=""></a>
        <a href="#http://placehold.it/1024x1024/ffff00/000000?text=Gallery+image+5"><img src="http://placehold.it/300x300/ffff00/000000?text=Gallery+image+5" alt=""></a>
        <a href="#http://placehold.it/1024x1024/bfff00/000000?text=Gallery+image+6"><img src="http://placehold.it/300x300/bfff00/000000?text=Gallery+image+6" alt=""></a>
        <a href="#http://placehold.it/1024x1024/80ff00/000000?text=Gallery+image+7"><img src="http://placehold.it/300x300/80ff00/000000?text=Gallery+image+7" alt=""></a>
        <a href="#http://placehold.it/1024x1024/40ff00/000000?text=Gallery+image+8"><img src="http://placehold.it/300x300/40ff00/000000?text=Gallery+image+8" alt=""></a>
        <a href="#http://placehold.it/1024x1024/00ff00/000000?text=Gallery+image+9"><img src="http://placehold.it/300x300/00ff00/000000?text=Gallery+image+9" alt=""></a>
        <a href="#http://placehold.it/1024x1024/00ff40/000000?text=Gallery+image+10"><img src="http://placehold.it/300x300/00ff40/000000?text=Gallery+image+10" alt=""></a>
        <a href="#http://placehold.it/1024x1024/00ff80/000000?text=Gallery+image+11"><img src="http://placehold.it/300x300/00ff80/000000?text=Gallery+image+11" alt=""></a>
        <a href="#http://placehold.it/1024x1024/00ffbf/000000?text=Gallery+image+12"><img src="http://placehold.it/300x300/00ffbf/000000?text=Gallery+image+12" alt=""></a>
        <a href="#http://placehold.it/1024x1024/00ffff/000000?text=Gallery+image+13"><img src="http://placehold.it/300x300/00ffff/000000?text=Gallery+image+13" alt=""></a>
        <a href="#http://placehold.it/1024x1024/00bfff/000000?text=Gallery+image+14"><img src="http://placehold.it/300x300/00bfff/000000?text=Gallery+image+14" alt=""></a>
        <a href="#http://placehold.it/1024x1024/0080ff/000000?text=Gallery+image+15"><img src="http://placehold.it/300x300/0080ff/000000?text=Gallery+image+15" alt=""></a>
        <a href="#http://placehold.it/1024x1024/0040ff/000000?text=Gallery+image+16"><img src="http://placehold.it/300x300/0040ff/000000?text=Gallery+image+16" alt=""></a>
</div>
2
q81

Testen Sie diesen ganzen Haufen Code, um einen einfachen JQuery-Image-Schieberegler zu erstellen. Kopieren und speichern Sie diese Datei auf einem lokalen Computer und testen Sie sie. Sie können es entsprechend Ihrer Anforderung ändern.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
  var current_img = 1;
  var i;

  $(document).ready(function(){
    var imgs = $("#image").find("img");

    function show_img(){
      for (i = 1; i < imgs.length+1; i++) {
        if(i == current_img){
          $(imgs[i-1]).show();
        }else{
          $(imgs[i-1]).hide()
        }
      }
    }

    $("#prev").click(function(){
      if(current_img == 1){
        current_img = imgs.length;
      }else{
        current_img = current_img - 1
      }
      show_img();
    });

    $("#next").click(function(){
      if(current_img == imgs.length){
        current_img = 1;
      }else{
        current_img = current_img + 1
      }
      show_img();
    });

  });

</script>
</head>
<body>

<div style="margin-top: 100px;"></div>
<div class="container">
  <div class="col-sm-3">
    <button type="button" id="prev" class="btn">Previous</button>
  </div>

  <div class="col-sm-6">
    <div id="image">
      <img src="https://www.w3schools.com/html/pulpitrock.jpg" alt="image1">
      <img src="https://www.w3schools.com/cSS/img_forest.jpg" alt="image2" hidden="true" style="max-width: 500px;">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="image3" hidden="true">
    </div>
  </div>

  <div class="col-sm-3">
    <button type="button" id="next" class="btn">Next</button>
  </div>
</div>

</body>
</html>
2
V K Singh

Ich habe ein Tutorial zum Erstellen einer Diashow geschrieben, Die Tutorial-Seite Falls der Link ungültig wird, habe ich den Code in meine Antwort unten aufgenommen.

das html:

<div id="slideShow">
 <div id="slideShowWindow">
 <div class="slide">
 <img src="”img1.png”/">
 <div class="slideText">
 <h2>The Slide Title</h2> 
 <p>This is the slide text</p>
 </div> <!-- </slideText> -->
 </div> <!-- </slide> repeat as many times as needed --> 
 </div> <!-- </slideShowWindow> -->
 </div> <!-- </slideshow> -->

cSS:

img {
 display: block;
 width: 100%;
 height: auto;
}
p{
 background:none;
 color:#ffffff;
}
#slideShow #slideShowWindow {
 width: 650px;
 height: 450px;
 margin: 0;
 padding: 0;
 position: relative;
 overflow:hidden;
 margin-left: auto;
 margin-right:auto;
}

#slideShow #slideShowWindow .slide {
 margin: 0;
 padding: 0;
 width: 650px;
 height: 450px;
 float: left;
 position: relative;
 margin-left:auto;
 margin-right: auto;
 }

#slideshow #slideshowWindow .slide, .slideText {
    position:absolute;
    bottom:18px;
    left:0;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    color:#ffffff;
    font-family:Myriad Pro, Arial, Helvetica, sans-serif;
} 
.slideText {
 background: rgba(128, 128, 128, 0.49);
}

#slideshow #slideshowWindow .slide .slideText h2, 
#slideshow #slideshowWindow .slide .slideText p {
    margin:10px;
    padding:15px;
}

.slideNav {
 display: block;
 text-indent: -10000px;
 position: absolute;
 cursor: pointer;
}
#leftNav {
 left: 0;
 bottom: 0;
 width: 48px;
 height: 48px;
 background-image: url("../Images/plus_add_minus.png");
 background-repeat: no-repeat;
 z-index: 10;
}
#rightNav {
 right: 0;
 bottom: 0;
 width: 48px;
 height: 48px;
 background-image: url("../Images/plus_add_green.png");
 background-repeat: no-repeat;
 z-index: 10; }

jQuery:

$(document).ready(function () {

 var currentPosition = 0;
 var slideWidth = 650;
 var slides = $('.slide');
 var numberOfSlides = slides.length;
 var slideShowInterval;
 var speed = 3000;

 //Assign a timer, so it will run periodically
 slideShowInterval = setInterval(changePosition, speed);

 slides.wrapAll('<div id="slidesHolder"></div>');

 slides.css({ 'float': 'left' });

 //set #slidesHolder width equal to the total width of all the slides
 $('#slidesHolder').css('width', slideWidth * numberOfSlides);

 $('#slideShowWindow')
 .prepend('<span class="slideNav" id="leftNav">Move Left</span>')
 .append('<span class="slideNav" id="rightNav">Move Right</span>');

 manageNav(currentPosition);

 //tell the buttons what to do when clicked
 $('.slideNav').bind('click', function () {

 //determine new position
 currentPosition = ($(this).attr('id') === 'rightNav')
 ? currentPosition + 1 : currentPosition - 1;

 //hide/show controls
 manageNav(currentPosition);
 clearInterval(slideShowInterval);
 slideShowInterval = setInterval(changePosition, speed);
 moveSlide();
 });

 function manageNav(position) {
 //hide left arrow if position is first slide
 if (position === 0) {
 $('#leftNav').hide();
 }
 else {
 $('#leftNav').show();
 }
 //hide right arrow is slide position is last slide
 if (position === numberOfSlides - 1) {
 $('#rightNav').hide();
 }
 else {
 $('#rightNav').show();
 }
 }


 //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
 function changePosition() {
 if (currentPosition === numberOfSlides - 1) {
 currentPosition = 0;
 manageNav(currentPosition);
 } else {
 currentPosition++;
 manageNav(currentPosition);
 }
 moveSlide();
 }


 //moveSlide: this function moves the slide 
 function moveSlide() {
 $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
 }

});
1
M_Griffiths