1

ナビゲーション ボタンに大きな問題があります。画像スクロール用のプラグインを使用しています。ナビゲーションボタンを追加したかったのですが、次の問題に直面しています。

ユーザーがボタンをクリックしないと、アクティブ化された次のボタンに移動し、ユーザーがクリックしてボタンを転送しても、アクティブ化された次のボタンに移動します。しかし、ユーザーが戻るボタンをもう一度クリックすると、アクティブ化されず、画像がスクロールされます。

そして、最後のボタンから、問題のある最初のボタンに移動する必要があります。

また、最初に繰り返し画像を削除したかったので、問題は発生しませんが、問題があります。

navigation.js のコード全体がこのフィドルにあります

----- このような繰り返しの画像を削除しようとしました ------

// remove duplicates from first
        var classes = [];
$("#banner img").each(function(id, vl) {
    $this = $(this), cls = $this.attr("class");

    if( $.inArray(cls, classes) < 0 ) {
        classes.push(cls);
    }
});
for(var c = 0; c < classes.length; c++ ) {
    if( $("#banner img."+classes[c]).length > 1 ) {
        $("#banner img."+classes[c]+":first").remove();
    }
}
// end remove

//remove duplicate images from last
    var seen = {};
$('#banner img').each(function() {
    var className = $(this).attr('class');
    if (seen[className])
        $(this).remove();
    else
        seen[className] = true;
});
    //end remove

このフィドルでコメントしたこれらのコードはどこで使用しました かしかし、他の以前の問題が発生したため、これをライブサイトに実装していません。

現在のライブサイト


私の主な問題は、1 つの画像ブロックが左に来るまで待つと、次のナビゲーション ボタンに自動的に移動し、別のボタンをクリックして対応する画像が左に移動するまでしばらく待つと、今まで問題がないことですが、問題前のボタンをもう一度クリックすると発生し、アクティブ化されません。

この質問はイライラするかもしれませんが、気にしないでください。問題を解決した人には誰でも、この質問に対して+1000 の報奨金を授与します。

4

3 に答える 3

0

Mootools と Jquery の競合または複数のライブラリ... http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327または joomla の別のプラグインを試すか、テーマに noconflict を追加しますhttp://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327

于 2013-10-03T02:02:33.617 に答える
0

これを試して:

HTML

<div id="banner" class="cf">
    <ul id="navs">
        <li class="navs1 activenav"></li>
        <li class="navs2"></li>
        <li class="navs3"></li>
        <li class="navs4"></li>
        <li class="navs5"></li>
        <li class="navs6"></li>
        <li class="navs7"></li>
        <li class="navs8"></li>
        <li class="navs9"></li>
        <li class="navs10"></li>
    </ul>
    <div class="moduletable">
        <div class="ic_marquee1" style="overflow: hidden;">
            <div style="visibility: visible; width: 100%; height: 400px; position: relative; overflow: hidden;">
                <div style="position: absolute; left: 0px; white-space: nowrap; top: 0px;">
                    <img src="/kldugar/images/topbanner/img-01.jpg" alt="" style="margin-right: 3px; display: inline; vertical-align: top;" class="img1">
                    <img src="/kldugar/images/topbanner/img-02.jpg" alt="" style="margin-right: 3px; display: inline; vertical-align: top;" class="img2">
                    <img src="/kldugar/images/topbanner/img-03.jpg" alt="" style="margin-right: 3px; display: inline; vertical-align: top;" class="img3">
                    <img src="/kldugar/images/topbanner/img-04.jpg" alt="" style="margin-right: 3px; display: inline; vertical-align: top;" class="img4">
                    <img src="/kldugar/images/topbanner/img-05.jpg" alt="" style="margin-right: 3px; display: inline; vertical-align: top;" class="img5">
                    <img src="/kldugar/images/topbanner/img-06.jpg" alt="" style="margin-right: 3px; display: inline; vertical-align: top;" class="img6">
                    <img src="/kldugar/images/topbanner/img-07.jpg" alt="" style="margin-right: 3px; display: inline; vertical-align: top;" class="img7">
                    <img src="/kldugar/images/topbanner/img-08.jpg" alt="" style="margin-right: 3px; display: inline; vertical-align: top;" class="img8">
                    <img src="/kldugar/images/topbanner/img-09.jpg" alt="" style="margin-right: 3px; display: inline; vertical-align: top;" class="img9">
                    <img src="/kldugar/images/topbanner/img-10.jpg" alt="" style="margin-right: 3px; display: inline; vertical-align: top;" class="img10">
                </div>
            </div>
        </div>
    </div>
</div>

jQuery

var anim;
jQuery(document).ready(function ($) {
    var img_block = $('#banner img');
    $('#navs li').on('click', function () {
        clearInterval(anim_interval);
        $('#navs li').removeClass('activenav');
        $(this).addClass('activenav');
        var lisindx = $(this).index();
        var b = $('#banner img').parent('div');
        var imgwidth = 0;
        for (var j = lisindx + 1; j > 1; j--) {
            imgwidth += $('#banner .img' + j).width();
        }
        var imgspace = lisindx * 7;
        imgwidth = -(imgwidth + imgspace);

        b.animate({
            left: imgwidth
        }, 1000, function () {
            anim_interval = setInterval(anim, 30);
        });
        thisidx = lisindx; //alert(thisidx);
        thisimg = $('#banner .img' + (thisidx + 1) + ':first');
        crawl_left = -imgwidth;
    }); //end click 
    var thisli = $('#navs .activenav');
    var thisidx = thisli.index();
    var thisimg = $('#banner img:first');
    console.log(thisimg.offset().left);
    var crawl_left = 0;
    var b = $('#banner img').parent('div');

    anim = function () {
        crawl_left++;
        var w = thisimg.offset().left + thisimg.width() / 2; //alert(w);
        var nextoff = w > 0; //alert(nextoff);
        var navlis = $('#navs li');
        var b = $('#banner img').parent('div');
        b.css('left', -crawl_left + 'px')
        if (crawl_left > ($('#banner img').length - 2) * thisimg.width()) {
            var b = $('#banner img').parent('div');
            b.append(img_block.clone());
        }
        if (nextoff) {
            return false;
        }
        var nextli = navlis.filter('.activenav').removeClass('activenav').next();
        if (!nextli.length) {
            nextli = navlis.first();
            nextli.addClass('activenav');
        }
        nextli.addClass('activenav');
        thisli = $('#navs .activenav');
        thisidx = thisli.index() + 1;
        thisimg = $('#banner .img' + thisidx).last();
    }; //end anim
    var anim_interval = setInterval(anim, 30);
}); //end document ready

デモはこちら

于 2013-10-06T18:07:33.203 に答える
-1

この変更により、私にとってはうまくいきます

ナビゲーション.js

$('#navs li').on('click', function(){
    $('#navs li').removeClass('activenav');

    $(this).addClass('activenav');

    var lisindx = $(this).index();
    lisindx += 1;
    var b = $('#banner img').parent('div');
    b.find('img:lt(' + lisindx + ')').clone().remove().appendTo(b);


    var imgwidth = 0;
    for(var j=lisindx; j>1; j--){
        imgwidth += $('#banner .img' + j).width();
    }
    var imgspace = (lisindx - 1) * 7;
    imgwidth = -(imgwidth + imgspace);

    b.animate({left: imgwidth}, 1000);

    thisimg = $('#banner .img' + thisidx);          
}); //end click
于 2013-09-24T10:31:19.817 に答える