jquery关于索引值问题
一个网页有多处轮播图的时候，我发现我的索引值有冲突，不知道该怎么改，求帮忙，第二部分的我是仿照第一部分修改的var spanList = $(".ban_num_con span");
var aList = $(".tr_ban_img a");
var index = 0;
function tr(index) {
spanList.removeClass();
$(spanList).addClass("on");
aList.stop().fadeOut(300);
$(aList).stop().fadeIn(300);
}
spanList.click(function () {
index = $(this).index();
tr(index);
})
var time = setInterval(function () {
index++;
index = index >= aList.length ? 0 : index;
tr(index);
}, 4000)
var yxLi = $(".stategy_tab ul li");
var yxStat = $(".stategy_con");
var yxindex = 0;
function yx(yxindex) {
yxLi.removeClass();
$(yxLi).addClass("on");
yxStat.stop().fadeOut(0);
$(yxStat).stop().fadeIn(300);
}
yxLi.mouseenter(function () {
yxindex = $(this).index();
yx(yxindex);
})
var time = setInterval(function () {
yxindex++;
yxindex = yxindex >= yxStat.length ? 0 : yxindex;
yx(yxindex);
}, 4000)
建议1、不要用全局变量。 这样会污染环境。 以后很难维护。
建议2、 用对象的思路解决 这样不会冲突 还便于维护。就是 new Swiper({ options [,param1, param2, param3] }) 这种
注：如果非要用面向过程的模式把 index 索引封装起来即可..... 还有第一段 var time 第二段也是var time ???虽然index变量名换了 观点基本同楼上，使用面向对象的思路去解决，编写一个轮播图的构造函数，index等参数作为私有成员，
这样的好处是如果页面里有多个轮播图，就实例化多个构造函数
var s1 = new Slider(options) {}
var s2 = new Slider(opts) {}
每个实例里的index互相独立不会干扰对方
通过s1.index和s2.index设置index jquery 获取目标元素索引：
1.对于并列元素，直接用：
html:
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
js:
$(selector).click(function () {
$(this).index() //简单并列元素
});
2.对于结构复杂的元素，这样用：
html:
<div class="top">
<div class="mian">
<p>123456</p>
<button>ok</button>
</div>
</div>
<div class="top">
<div class="mian">
<p>123456</p>
<button>ok</button>
</div>
</div>
js:
$('.top .mian button').click(function () {
$('.top .mian button').index(this);//有嵌套的元素
});
我之前做的笔记，希望能帮到你。 第3行和第19行是不是有冲突啊？举例，index为0时，对应的是length为1的情况。
是不是要改成下面这样？
index = index >= aList.length - 1 ? 0 : index;
页:
[1]