javascript - 如何运行在一页上添加两个 "image slideshow"

Question

我想在同一个页面放映两张幻灯片，

这是类似于我创建的东西的 fiddle :<强> http://jsfiddle.net/55KBN/

我可以运行第一个幻灯片放映但第二个不工作，当我单击第二个幻灯片放映控件时，它使第一个幻灯片放映。

问题背后的原因是，我为两个幻灯片放映使用相同的结构和类名，我为两个幻灯片放映的最父 DIV 提供了不同的 ID，但是问题是 我不知道如何获取有关用户点击的信息，即用户点击了哪个幻灯片？以及相应地如何更新幻灯片以适用于该特定 DIV。

这是我的代码:HTML

<div id="compareImageBox">
@* PRE LABEL AREA *@
<div id="preLabel" class="marginRight">
    <h1>Pre Label</h1>
    <span class="control prev">Prev</span> || 
    <span class="control next">Next</span>
    <ul class="previewImages">
        <li>
            <img src="~/Content/images/scanned-full/01.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-full/02.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-full/03.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-full/01.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-full/02.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-full/03.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-full/01.jpg" /></li>
    </ul>
    <ul class="thumbsImages">
        <li>
            <img src="~/Content/images/scanned-tmb/01.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-tmb/02.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-tmb/03.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-tmb/01.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-tmb/02.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-tmb/03.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-tmb/01.jpg" /></li>
    </ul>
</div>

@* POST LABEL AREA *@
<div id="postLabel">
    <h1>Post Label</h1>
    <span class="control prev">Prev</span> || 
    <span class="control next">Next</span>
    <ul class="previewImages">
        <li>
            <img src="~/Content/images/scanned-full/01.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-full/02.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-full/03.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-full/01.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-full/02.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-full/03.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-full/01.jpg" /></li>
    </ul>
    <ul class="thumbsImages">
        <li>
            <img src="~/Content/images/scanned-tmb/01.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-tmb/02.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-tmb/03.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-tmb/01.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-tmb/02.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-tmb/03.jpg" /></li>
        <li>
            <img src="~/Content/images/scanned-tmb/01.jpg" /></li>
    </ul>
</div>

CSS

<style>
    #compareImageBox {
        padding: 15px;
        height: 95.99%;
    }

        #compareImageBox ul,
        #compareImageBox li {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

    #preLabel,
    #postLabel {
        display: inline-block;
        width: 48.6%;
        height: 100%;
        min-height: 400px;
        border: 1px solid #2f3843;
        border-bottom: none;
        border-radius: 15px;
        vertical-align: top;
        /*BORDER SHADOW*/
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.63);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.63);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.63);
    }

        #preLabel > *,
        #postLabel > * {
            width: 99.5%;
            overflow: hidden;
        }

        #compareImageBox .control,
        #preLabel h1,
        #postLabel h1 {
            color: #e2e5ea;
            text-align: center;
            margin: 10px 0;
        }

    #compareImageBox ul.previewImages {
        height: 86.5%;
        text-align: center;
        position: relative;
        top: 0px;
        left: 0px;
    }

        #compareImageBox ul.previewImages li {
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            left: 0;
            right: 0;
        }

            #compareImageBox ul.previewImages li img {
                margin-top: 20px;
                max-width: 530px;
                max-height: 550px;
            }

    #compareImageBox ul.thumbsImages {
        height: 60px;
        width: 47.5%;
        border-radius: 0 0 10px 10px;
        box-sizing: border-box;
        /*BG GRADIENT*/
        background: #475360;
        background: -moz-linear-gradient(top, #475360 0%, #242f3a 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, #475360), color-stop(100%, #242f3a));
        background: -webkit-linear-gradient(top, #475360 0%, #242f3a 100%);
        background: -o-linear-gradient(top, #475360 0%, #242f3a 100%);
        background: -ms-linear-gradient(top, #475360 0%, #242f3a 100%);
        background: linear-gradient(to bottom, #475360 0%, #242f3a 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#475360', endColorstr='#242f3a', GradientType=0 );
        font-size: 0;
        position: absolute;
        bottom: 15px;
        border-top: 1px solid #1d252e;
        overflow: hidden;
    }

        #compareImageBox ul.thumbsImages li {
            display: inline-block;
            border-left: 1px solid #505963;
            border-right: 1px solid #242f3a;
            height: 60px;
            padding-top: 15px;
            width: 14.28%;
            text-align: center;
        }

            #compareImageBox ul.thumbsImages li:last-of-type {
                border-right: none;
            }

            #compareImageBox ul.thumbsImages li:first-of-type {
                border-radius: 0 0 0 10px;
            }

            #compareImageBox ul.thumbsImages li:last-of-type {
                border-radius: 0 0 10px 0;
            }

            #compareImageBox ul.thumbsImages li:hover,
            #compareImageBox ul.thumbsImages li.selected {
                background: url(../../Content/images/icons/selectedBg.png) top left no-repeat;
                -webkit-box-shadow: inset 0px 0px 42px 0px rgba(0,0,0,0.44);
                -moz-box-shadow: inset 0px 0px 42px 0px rgba(0,0,0,0.44);
                box-shadow: inset 0px 0px 42px 0px rgba(0,0,0,0.44);
            }

            #compareImageBox ul.thumbsImages li.selected {
                border-left: 1px solid #242f3a;
            }

            #compareImageBox ul.thumbsImages li img {
                width: 35px;
                height: 35px;
            }

            #compareImageBox ul.thumbsImages li a.prev,
            #compareImageBox ul.thumbsImages li a.next {
                font-size: 16px;
                font-weight: bold;
                font-family: arial;
                background: #475360;
                background: -moz-linear-gradient(top, #475360 0%, #242f3a 28%, #242f3a 62%, #475360 100%);
                background: -webkit-gradient(left top, left bottom, color-stop(0%, #475360), color-stop(28%, #242f3a), color-stop(62%, #242f3a), color-stop(100%, #475360));
                background: -webkit-linear-gradient(top, #475360 0%, #242f3a 28%, #242f3a 62%, #475360 100%);
                background: -o-linear-gradient(top, #475360 0%, #242f3a 28%, #242f3a 62%, #475360 100%);
                background: -ms-linear-gradient(top, #475360 0%, #242f3a 28%, #242f3a 62%, #475360 100%);
                background: linear-gradient(to bottom, #475360 0%, #242f3a 28%, #242f3a 62%, #475360 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#475360', endColorstr='#475360', GradientType=0 );
                width: 20px;
                padding: 0;
                line-height: 60px;
            }
</style>

JS

<script>
var thumbs = $('ul.thumbsImages li');
var images = $('ul.previewImages li');
var lastElem = thumbs.length - 1;
var target;

thumbs.first().addClass('selected');
images.hide().first().show();

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

thumbs.click(function () {
    if (!$(this).hasClass('selected')) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});
$('.next').click(function () {
    target = $('ul.thumbsImages li.selected').index();
    target === lastElem ? target = 0 : target = target + 1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function () {
    target = $('ul.thumbsImages li.selected').index();
    lastElem = thumbs.length - 1;
    target === 0 ? target = lastElem : target = target - 1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('ul.thumbsImages li.selected').index();
    target === lastElem ? target = 0 : target = target + 1;
}
var timingRun = setInterval(function () {
    sliderTiming();
}, 5000);

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

如果您需要任何其他信息，请告诉我。

请提出建议。

Answer 1

尝试向 javascript 添加新变量并更改 html 中另一个 slider 上的那些类。示例

var thumbs = $('ul.thumbsImages2 li');
var images = $('ul.previewImages2 li');

另外不要忘记将这些新类添加到 css 中。示例

    #compareImageBox ul.previewImages li img,
    #compareImageBox ul.previewImages2 li img {
        margin-top: 20px;
        max-width: 530px;
        max-height: 550px;
    }