スライド効果または不透明効果を備えたシンプルなjQueryイメージスライダーを作成する方法

Question

私たちの中には、サイズが大きく、現在のjavascriptと競合する可能性があるため、既製のプラグインを使用したくない場合があります。

以前はライトスライダープラグインを使用していましたが、顧客がモジュールの修正を行うと、操作が非常に難しくなりました。それから、私は簡単にカスタマイズするために私のものを構築することを目指しています。スライダーは最初から構築するのにそれほど複雑であってはならないと思います。

JQueryイメージスライダーを構築するためのシンプルでクリーンな方法は何ですか？

Answer 1

例を調べる前に、私が最も使用した2つのjQuery関数を知っておく必要があります。

index（） 戻り値は、兄弟要素に対するjQueryオブジェクト内の最初の要素の位置を示す整数です。

eq（） 位置（インデックス値）に基づいて要素を選択します。

基本的に、選択したトリガー要素のindex valueとeqメソッドを使用して画像のこの値を一致させます。

-FadeIn/FadeOutエフェクト。

-スライディング効果。

-alternateMousewheelresponse。

---

htmlサンプル：

<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>

---

不透明度の影響： jsFiddle。

css trick：position：absoluteで画像を重ねる

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');
}

---

スライド効果： jsFiddle。

css trick：二重ラッパーで子をマスクとして使用

.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');
}

---

両方のスライダーの一般的なjQuery応答：

（トリガー+次/前のクリックとタイミング）

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);
}

---

Answer 2

Jqueryを使用せずにJavaScriptを使用して画像スライドショーを作成するためのシンプルで理解しやすいコードを次に示します。

<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" />

Answer 3

私は最近、画像のギャラリーと画像がクリックされたときに現れるスライダーを備えたソリューションを作成しました。

ここのコードを見てください： GitHub Code

そして、ここでの実例： コード例

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('×')
                        ).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('◄')
                        ).append($(document.createElement('button')).attr({
                                        'class': 'next-button',
                                        'type': 'button'
                                }).html('►')
                        )
                );
                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>

Answer 4

この一連のコードをチェックアウトして、簡単なjqueryイメージスライダーを作成します。このファイルをローカルマシンにコピーして保存し、テストします。必要に応じて変更できます。

<!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>

Answer 5

スライドショーの作成に関するチュートリアルを作成しました チュートリアルページ リンクが無効になる場合のために、以下の回答にコードを含めました。

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) });
 }

});