Question

大家好，我有问题

当我点击某个项目符号时，控制台中出现错误功能

未捕获的ReferenceError：未定义changeimage

我在php中调用函数而不仅仅是在js。
回声＆＃39;子弹

请参阅galleryNavigationBullets div以查看名称功能

＆＃39 ;; } ？＆GT;

        <div class="galleryPreviewArrows">
            <a href="#" class="previousSlideArrow">&lt;</a>
            <a href="#" class="nextSlideArrow">&gt;</a>
        </div>
        </div>

        <div class="galleryNavigationBullets">
            <?php
                for ($b = 1; $b <= $imagesTotal; $b++) {
                    echo '<a href="javascript: changeimage(' . $b . ')" class="galleryBullet' . $b . '"><span>Bullet</span></a> ';
                }
            ?>
        </div>

        <div class="galleryDescription">
            <?php
                for ($x = 1; $x <= $imagesTotal; $x++) {
                    echo '<div class="description' . $x . '">' . $description[$x] . '</div>';
                }
            ?>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/plugins.js"></script>
    <script type="text/javascript">
    // init variables
    var imagesTotal = <?php echo $imagesTotal; ?>;
    var currentImage = 1;
    var thumbsTotalWidth = 0;
    </script>

jquery代码：plz见子弹代码！

 $(document).ready(function(){
$('a.galleryBullet' + currentImage).addClass("active");
$('div.description' + currentImage).addClass("visible");

// PREVIOUS ARROW CODE
$('a.previousSlideArrow').click(function() {
$('img.previewImage' + currentImage).hide();
$('a.galleryBullet' + currentImage).removeClass("active");
$('a.thumbnailsimage' + currentImage).removeClass("active");
$('div.description' + currentImage).removeClass("visible");

currentImage--;

if (currentImage == 0) {
    currentImage = imagesTotal;
}

$('a.galleryBullet' + currentImage).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
$('img.previewImage' + currentImage).show();
$('div.description' + currentImage).addClass("visible");

return false;
});
// ===================


// NEXT ARROW CODE
$('a.nextSlideArrow').click(function() {
$('img.previewImage' + currentImage).hide();
$('a.galleryBullet' + currentImage).removeClass("active");
$('a.thumbnailsimage' + currentImage).removeClass("active");
$('div.description' + currentImage).removeClass("visible");

currentImage++;

if (currentImage == imagesTotal + 1) {
    currentImage = 1;
}

$('a.galleryBullet' + currentImage).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
$('img.previewImage' + currentImage).show();
$('div.description' + currentImage).addClass("visible");

return false;
});
// ===================


// BULLETS CODE
function changeimage(imageNumber) {
$('img.previewImage' + currentImage).hide();
currentImage = imageNumber;
$('img.previewImage' + imageNumber).show();

$('.galleryNavigationBullets a').removeClass("active");
$('.galleryDescription > div').removeClass("visible");

$('a.galleryBullet' + imageNumber).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
$('div.description' + currentImage).addClass("visible");
}
// ===================


// AUTOMATIC CHANGE SLIDES
function autoChangeSlides() {
$('img.previewImage' + currentImage).hide();
$('a.galleryBullet' + currentImage).removeClass("active");
$('a.thumbnailsimage' + currentImage).removeClass("active");
$('div.description' + currentImage).removeClass("visible");

currentImage++;

if (currentImage == imagesTotal + 1) {
    currentImage = 1;
}

$('a.galleryBullet' + currentImage).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
$('img.previewImage' + currentImage).show();
$('div.description' + currentImage).addClass("visible");
}

var slideTimer = setInterval(function() {autoChangeSlides(); }, 3000);

});

CSS

/* General Ruels */

    .container {padding:0 25px;}

    * , *:before, *:after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin:0;
        padding:0;
    }

    ul {list-style: none;}
    nav ul li {color:white;}

    .fb {display: flex;}

    /* Header Styles */

    header {background: #232323;}

    .hdr-logo {position:relative; }

    .hdr-logo a {background-image:url("../images/logo.png"); background-repeat: no-repeat; height:40px; width:153px; display: inline-block;}

    .container.fb.hdr-ex { justify-content: space-between; padding: 17px 25px; }

    .hdr-ex nav ul.fb.ul-ex { padding-top: 13px; }

    .ul-ex li { padding: 0 5px; font-weight: 500; font-size: 14px; cursor:pointer; }

    .sch-con {padding:8px 0;}

    .sch-con #sch {padding:3px 8px; background-color: rgb(68, 68, 68); border:0; width:100%;}

    .btn-con {padding:8px 0;}

    .btn-con #btn {color:white; background-color: rgb(3, 151, 214); border:0; padding:3px 8px;}

    .body1 { background-color:#1A1A1A; }

    .news {color:#fff;}

    .news h2 {font-size: 14px;}




    /* Media Queries stuff  */

    @media screen and (max-width: 1199px) {

    }

    @media (min-width:991px) and (max-width:1899px) {
        .sch-con {width:153px;}
    }


    /* Slider Sites */

    .galleryContainer a {
        transition: all 150ms linear;
        -webkit-transition: all 150ms linear;
        -moz-transition: all 150ms linear;
    }
    .galleryContainer {
        margin: 40px auto;
        width: 900px;
    }
    .galleryPreviewContainer {
        position: relative;
    }
    .galleryPreviewImage img {
        display: none;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        box-shadow: 5px 5px 0 0 #c1c1c1;
        position: relative;
        top: 0;
        left: 0;
    }
    img.previewImage1 {
        display: block;
    }
    .galleryPreviewArrows a {
        font-family: Arial;
        font-size: 30px;
        background: rgba(0,0,0, 0.3);
        width: 70px;
        height: 70px;
        line-height: 70px;
        display: block;
        text-align: center;
        color: #FFF;
        text-decoration: none;
        border-radius: 100px;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        position: absolute;
        left: 20px;
        top: 50%;
        margin-top: -35px;
    }
    a.nextSlideArrow {
        right: 20px;
        left: auto;
    }
    .galleryPreviewArrows a:hover {
        background: #000;
        margin-top: -40px;
    }
    .galleryNavigationBullets {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 60px;
    }
    .galleryNavigationBullets span {
        display: none;
    }
    .galleryNavigationBullets a {
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-right: 5px;
        background: #ddd;
    }
    .galleryNavigationBullets a:hover,
    .galleryNavigationBullets a.active {
        background: #555;
    }

    .galleryDescription > div {
        display: none;
    }
    .galleryDescription > div.visible {
        display: block;
    }

非常感谢你

为什么我的滑块Bullet功能未定义？

0 个答案: