我的导航按钮出现了很大问题。我正在使用plugin for image scroll。我想在其中添加导航按钮，我面临以下问题：
如果没有用户点击按钮，它会转到下一个按钮激活，即使用户点击转发按钮，它也会转到下一个按钮激活。但是当用户再次点击后退按钮时，它没有被激活，但图像正在滚动。
从最后一个按钮开始，它应该转到第一个有问题的按钮。
此外，我想首先删除重复的图像，这样就不会出现任何问题，但会出现问题。
navigation.js中的整个代码位于this fiddle
-----试图删除像这样的重复图像------
// 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
我在哪里使用这些代码我在this fiddle中发表了评论 但是我没有在我的实时网站中实现这个，因为我之前发生了其他问题。
我的关键问题是，如果你等待一个图像块出现在左边，那么它会自动转到下一个导航按钮，如果你点击另一个按钮并等待一段时间它的相应图像向左移动，直到现在没有问题但是当您再次单击上一个按钮然后它未激活时会出现问题。
这个问题可能会让人感到恼火，但请不要觉得如此强烈我会为这个问题奖励+1000赏金谁解决问题
答案 0 :(得分：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
答案 1 :(得分：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
答案 2 :(得分：-1)
通过这些更改，它适用于我
<强> navigation.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