Question

我有这个用JQuery制作的幻灯片，每4秒的默认转换效果很好。但是，当点击点导航时，

1）与curIndex相关联的背景图像不会显示 2）.active类保持在先前的curIndex位置，直到它被slideShow（）函数删除。 3）即使由clearTimeout变量重置，de Setimeout Method的功能似乎也会因某种原因而加速。

我希望对JQuery方法有一个清晰的认识，所以如果你能澄清点导航不起作用的原因，那将非常感激。 codepen在这里：https://codepen.io/JeffyG/pen/QQeqvW

HTML

<html>
<head>
    <title>Slideshow - JFG Jquery</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="jquery-3.3.1.js"></script>
</head>
<body>
 <section class="banner">
    <div class="wp-banner-navigation">
        <div class="wp-inner-banner-navigation">
            <ul>
                <li id="slide0" class="active"></li>
                <li id="slide1" class="inactive"></li>
                <li id="slide2" class="inactive"></li>
            </ul>
        </div>
    </div>
    <div id="slideshow"></div>
    </section>
</body>
<script src="slideshow.js"></script>
</html>

CSS

body {
  background-color: #000;
}

#slideshow {
    margin: 0 auto;
    z-index: 1;
    position: relative;
    overflow: hidden;
    height: 400px;
    background: url('http://www.idatastart.com/static/images/home/xbanner2.jpg.pagespeed.ic.J9HEJAoOt0.webp') 50% middle center no-repeat;

    background-size: cover;
    background-position: 50% middle center;
    background-repeat: no-repeat;
    max-width: 1080px;
}

#slideshow {
    opacity:1;
    transition: opacity 1s;
}

#slideshow.fadeOut {
    opacity:0;
}

.banner {
    width: 100%;
    height:400px;
     background-color: #000;
}

.wp-banner-navigation {
    position: absolute;
    margin: 350px 45% 0px;
    z-index: 2;
}

.wp-inner-banner-navigation {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;    
    background-color: rgba(120, 120, 120, 0.5);
    border: 3px solid rgba(20, 20, 20, 0.5);
    border-bottom: none;
    -moz-border-radius: 100px 100px 0px 0px;
    -webkit-border-radius: 100px 100px 0px 0px;
    border-radius: 100px 100px 0px 0px;
    width: 182px;
    height: 50px;
}

.wp-banner-navigation ul {
    margin: 20px -10px;
    list-style: none;
    float: left;
}
.wp-banner-navigation li {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;  
    width: 12px;
    height: 12px;
    margin: 0px 0px 0px 20px;
    border-radius: 14px;
    border: 2px solid #fff;
    cursor: pointer;
    float: left;
    background-color: rgba(255,255,255,0);
}
.wp-banner-navigation li:hover {
    background-color: rgba(255,255,255,0.5);
}
.inactive {
    background-color: rgba(255,255,255,0.5);
}
.active {
    border: none !important;
    background: #0696d7 !important;
    background-color: #0696d7 !important;
}

的Javascript

$(document).ready(function() {

var slideshowElement = $('#slideshow');
var imgArray = ['xbanner3.jpg.pagespeed.ic.cNoxcokJ-x.webp', 'xbanner2.jpg.pagespeed.ic.J9HEJAoOt0.webp', 'xbanner1.jpg.pagespeed.ic.HEfjRv7qD-.webp'];     
var navigationElement;
var breakTimeout;    
var dotArray = ['slide0', 'slide1', 'slide2'];

var curIndex = 0;
var imgDuration = 4000;

navigationElement = $('#slide0');

slideshowElement.css('background-image', 'url(http://www.idatastart.com/static/images/home/' + imgArray[curIndex] + ')'); 

var cachedImages = []; 

    for (var x = 0; x < imgArray.length; x++){ 
    cachedImages[x] = new Image(); 
    cachedImages[x].src = 'images/' + imgArray[x];
}    

$('.wp-inner-banner-navigation ul li').bind('click', function(){

    clearTimeout(breakTimeout);

    var index = $(this).index();

    curIndex = index;

    slideShow(curIndex);

    $("li[id^='slide']").removeClass("active").addClass("inactive");

    $("#slide" + index).addClass("active");

    $("#slide" + index).removeClass("inactive");

});

function slideShow() {

   slideshowElement.addClass('fadeOut');

    breakTimeout = setTimeout(function() {

            slideshowElement.css('background-image','url(http://www.idatastart.com/static/images/home/' + imgArray[curIndex]+ ')'); 
            slideshowElement.removeClass();
            navigationElement.addClass('inactive')
            navigationElement.removeClass('active');
            navigationElement = $("#" + dotArray[curIndex]);
            navigationElement.addClass('active');
            navigationElement.removeClass('inactive');
        },1000);

        curIndex++;

        if (curIndex == imgArray.length) { curIndex = 0; }
        setTimeout(slideShow, imgDuration);
}

slideShow();

});

带有背景图像和可点击位置的JQuery幻灯片

0 个答案: