如下图,当前显示的是当前这一篇文章(左边为大图和缩略图(要解决的问题),右边是内容),点击上面左右(不在此问题),可以查看上下一篇文章,架构一样,循环生成的。我目前头疼的是,当前文章循环输出,那么,焦点图的类名都相同,所以这一篇文章中的大图和缩略图的对应切换和上下多篇文章中的冲突(index【jquery】)。。。如果动态给其循环出class=“case01”,class="case02",这样类名可以不同,但还是会存在一个问题,内容是未知的,那JS怎么写(能像class那样对应循环循环么?),本人笨,JS只会搬搬用用。。。求解决办法。。(简明的问题:同一个页面,多个焦点图,他们的class名都一样,如何写JS,不冲突··)【表达能力不太好,请谅解,望帮助】
[只有28颗豆,下面的悬赏只能选择20.、]
$j(function(){ $j('.list_wrap').kxbdSuperMarquee({ distance:726, time:50, btnGo:{left:'.n_left',right:'.n_right'}, direction:'left' }); $j('#s_pic li').hover(function(index){ var $width=$j('#s_pic li').width()+20; var len=$j(this).parent().children('li').length; $j(this).parent('ul').css('width',len*$width); var index=$j(this).parent().children('li').index(this); $j(this).parent().children('li').removeClass('on').eq(index).addClass('on') $j(this).parent().parent().prev().children('ul').children('li').stop(true).fadeOut(100).eq(index).fadeIn(100); // 我们的元素,以便更快地访问,并设置覆盖宽度 var div = $j(this).parent().parent(), ul = $j(this).parent(), ulPadding = 0; // 菜单宽度 var divWidth = div.width(); // 删除滚动条 div.css({overflow: 'hidden'}); // 最后的图像容器 var lastLi = ul.find('li:last-child'); // 当用户将鼠标移动到菜单 div.mousemove(function(e){ // 当加载图像UL宽度增加, 因此,我们重新计算每个时间 var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding; var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth; div.scrollLeft(left); }); }); })