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

我在哪里使用了我在这个小提琴中评论过的这些代码 但是我没有在我的实时站点中实现这个,因为我之前的其他问题发生了。

当前直播网站


我的关键问题是,如果您等待一个图像块向左移动,那么它会自动转到下一个导航按钮,如果您单击另一个按钮并等待一段时间,其对应的图像会向左移动,直到现在都没问题但是问题当您再次单击上一个按钮时发生,然后它没有被激活。

这个问题可能很烦人,但请不要这么觉得,因为无论谁解决了这个问题,我都会奖励 +1000 赏金

4

3 回答 3

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 回答
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 回答
-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 回答