Блог

Главная - Вопросы по программированию - Редактирование javascript для слайд-шоу изображений

Редактирование javascript для слайд-шоу изображений

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

В настоящее время у меня есть код Javascript для слайд-шоу изображений. Это работает хорошо.

Вы можете увидеть это здесь:https://codepen.io/gy-the-bold/pen/JjXMyge

Код Javascript:

 <script type='text/javascript'>
(function($) {"use strict";
$.fn.sliderResponsive = function(settings) {
var set = $.extend( {slidePause: 4000, fadeSpeed: 800, autoPlay: "on", showArrows: "off", hideDots: "off"}, settings ); 
var $slider = $(this); var size = $slider.find("> div").length; var position = 0; var sliderIntervalID;
$slider.append("<ul></ul>"); $slider.find("> div").each(function(){$slider.find("> ul").append('<li></li>');});
$slider.find("div:first-of-type").addClass("show");
$slider.find("li:first-of-type").addClass("showli")
$slider.find("> div").not(".show").fadeOut();
if (set.autoPlay === "on") { startSlider();}
if (set.showArrows === "on") {$slider.addClass('showArrows'); }
if (set.hideDots === "on") {$slider.addClass('hideDots'); }
function startSlider() {sliderIntervalID = setInterval(function() {nextSlide();}, set.slidePause);}
$slider.mouseover(function() {if (set.autoPlay === "on") {clearInterval(sliderIntervalID);} });
$slider.mouseout(function() { if (set.autoPlay === "on") {startSlider(); } });
$slider.find("> .right").click(nextSlide)
$slider.find("> .left").click(prevSlide);
function nextSlide() {position = $slider.find(".show").index()   1;
if (position > size - 1) position = 0; changeCarousel(position);}
function prevSlide() {position = $slider.find(".show").index() - 1;
if (position < 0) position = size - 1; changeCarousel(position);}
$slider.find(" > ul > li").click(function() {position = $(this).index(); changeCarousel($(this).index()); });
function changeCarousel() {$slider.find(".show").removeClass("show").fadeOut();
$slider .find("> div") .eq(position) .fadeIn(set.fadeSpeed) .addClass("show");
$slider.find("> ul").find(".showli").removeClass("showli");
$slider.find("> ul > li").eq(position).addClass("showli"); }
return $slider;};
})(jQuery);
$(document).ready(function() { $("#slider1").sliderResponsive({// Using default everything // slidePause: 5000, // fadeSpeed: 800,  // autoPlay: "on", // showArrows: "off", // hideDots: "off", // titleBarTop: "off" 
}); }); 
</script>

HTML-код является:

 <div class='slider' id='slider1'>

<div class="Image"><a href='/'><img src='https://4.bp.blogspot.com/-5MORAWuKZRw/XqryORmehyI/AAAAAAAAACw/UUYNV-J7eGg3910DmKh4qtwSEFHmqThvgCLcBGAsYHQ/s1600/slider1.jpg'/></a></div>

<div class="Image"><a href='/'><img src='https://3.bp.blogspot.com/-567MuwbssoA/XqryPNo3TRI/AAAAAAAAAC0/3pXHOX0YXsQrOGzF83U3NylLfQhiVz59ACLcBGAsYHQ/s1600/slider2.jpg'/></a></div>

<div class="Image"><a href='/'><img src='https://2.bp.blogspot.com/-hs0B0U8DN6c/XqryPjYtsRI/AAAAAAAAAC4/5S-fmUGrOLkfIODMEQf-YPnk7ONxkcWBwCLcBGAsYHQ/s1600/slider3.jpg'/></a></div>

<div class="Image"><a href='/'><img src='https://2.bp.blogspot.com/-hDA_sao7SCA/XqryRGSxL2I/AAAAAAAAADA/vNVFali1LxELrwmSqTqqQOCqzol2s7WuACLcBGAsYHQ/s1600/slider5.jpg'/></a></div>

<div class="Image"><a href='/'><img src='https://3.bp.blogspot.com/--4VmFDfN74M/XqryQceFnZI/AAAAAAAAAC8/uLGPLBPbEdE0Zw9LyNWz0j4pfIaznC1MgCLcBGAsYHQ/s1600/slider4.jpg'/></a></div>

    <!-- The Arrows -->
<i class='arrows left' style=''><svg viewBox='0 0 100 100'><path d='M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z'/></svg></i>
<i class='arrows right' style=''><svg viewBox='0 0 100 100'><path d='M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z' transform='translate(100, 100) rotate(180) '/></svg></i>
</div>

Моя проблема в том, что когда я оборачиваю класс Image тегом Div, он не будет работать.

Это мой HTML-код:

 <div class='slider' id='slider1'>

<div class="banner"><div class="Image"><a href='/'><img src='https://4.bp.blogspot.com/-5MORAWuKZRw/XqryORmehyI/AAAAAAAAACw/UUYNV-J7eGg3910DmKh4qtwSEFHmqThvgCLcBGAsYHQ/s1600/slider1.jpg'/></a></div></div>

<div class="banner"><div class="Image"><a href='/'><img src='https://3.bp.blogspot.com/-567MuwbssoA/XqryPNo3TRI/AAAAAAAAAC0/3pXHOX0YXsQrOGzF83U3NylLfQhiVz59ACLcBGAsYHQ/s1600/slider2.jpg'/></a></div></div>

<div class="banner"><div class="Image"><a href='/'><img src='https://2.bp.blogspot.com/-hs0B0U8DN6c/XqryPjYtsRI/AAAAAAAAAC4/5S-fmUGrOLkfIODMEQf-YPnk7ONxkcWBwCLcBGAsYHQ/s1600/slider3.jpg'/></a></div></div>

<div class="banner"><div class="Image"><a href='/'><img src='https://2.bp.blogspot.com/-hDA_sao7SCA/XqryRGSxL2I/AAAAAAAAADA/vNVFali1LxELrwmSqTqqQOCqzol2s7WuACLcBGAsYHQ/s1600/slider5.jpg'/></a></div></div>

<div class="banner"><div class="Image"><a href='/'><img src='https://3.bp.blogspot.com/--4VmFDfN74M/XqryQceFnZI/AAAAAAAAAC8/uLGPLBPbEdE0Zw9LyNWz0j4pfIaznC1MgCLcBGAsYHQ/s1600/slider4.jpg'/></a></div></div>

    <!-- The Arrows -->
<i class='arrows left' style=''><svg viewBox='0 0 100 100'><path d='M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z'/></svg></i>
<i class='arrows right' style=''><svg viewBox='0 0 100 100'><path d='M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z' transform='translate(100, 100) rotate(180) '/></svg></i>
</div>

Как мне отредактировать код javascript, чтобы он работал с моим HTML-кодом.

Ответ №1:

 (function($) {"use strict";
    $.fn.sliderResponsive = function(settings) {
    var set = $.extend( {slidePause: 4000, fadeSpeed: 800, autoPlay: "on", showArrows: "off", hideDots: "off"}, settings ); 
    var $slider = $(this); var size = $slider.find("> div").length; var position = 0; var sliderIntervalID;
    $slider.append("<ul></ul>"); $slider.find("> div").each(function(){$slider.find("> ul").append('<li></li>');});
    $slider.find(">div:first-of-type").addClass("show");
    $slider.find("li:first-of-type").addClass("showli")
    $slider.find("> div").not(".show").fadeOut();
    if (set.autoPlay === "on") { startSlider();}
    if (set.showArrows === "on") {$slider.addClass('showArrows'); }
    if (set.hideDots === "on") {$slider.addClass('hideDots'); }
    function startSlider() {sliderIntervalID = setInterval(function() {nextSlide();}, set.slidePause);}
    $slider.mouseover(function() {if (set.autoPlay === "on") {clearInterval(sliderIntervalID);} });
    $slider.mouseout(function() { if (set.autoPlay === "on") {startSlider(); } });
    $slider.find("> .right").click(nextSlide)
    $slider.find("> .left").click(prevSlide);
    function nextSlide() {position = $slider.find(".show").index()   1;
    if (position > size - 1) position = 0; changeCarousel(position);}
    function prevSlide() {position = $slider.find(".show").index() - 1;
    if (position < 0) position = size - 1; changeCarousel(position);}
    $slider.find(" > ul > li").click(function() {position = $(this).index(); changeCarousel($(this).index()); });
    function changeCarousel() {$slider.find(".show").removeClass("show").fadeOut();
    $slider .find("> div") .eq(position) .fadeIn(set.fadeSpeed) .addClass("show");
    $slider.find("> ul").find(".showli").removeClass("showli");
    $slider.find("> ul > li").eq(position).addClass("showli"); }
    return $slider;};
    })(jQuery);
    $(document).ready(function() { $("#slider1").sliderResponsive({// Using default everything // slidePause: 5000, // fadeSpeed: 800,  // autoPlay: "on", // showArrows: "off", // hideDots: "off", // titleBarTop: "off" 
    }); });

Я изменил строку.

 $slider.find(">div:first-of-type").addClass("show");