一个JQ范例,就是图片左右滚动,点击左右箭头控制滚动方向

一个JQ范例,就是图片左右滚动,点击左右箭头控制滚动方向,代码本身没错,JS代码里把图片复制了一份,这样进行无缝滚动。
问题就出在这里,因为我自己在<li>标签内加了 id=”a1″,最后这些id=a都被复制了另外一份,最后页面存在2个id=”a1″,这样就失去id唯一性。

我想请你们修改JS代码,让标签<li>里的
id=”a1″,复制后变为id=”fz_a1″
id=”b1″,复制后变为id=”fz_b1″
id=”c1″,复制后变为id=”fz_c1″

<div class="box" style="margin-top:50px;">
<div class="picbox">
<ul class="piclist mainlist">
<li id="a1"><a href="#" target="_blank"><img src="images/1.jpg" ></a></li>
<li id="b1"><a href="#" target="_blank"><img src="images/2.jpg" /></a></li>
<li id="c1"><a href="#" target="_blank"><img src="images/3.jpg" /></a></li>
<li id="d1"><a href="#" target="_blank"><img src="images/4.jpg" /></a></li>
</ul>
<ul class="piclist swaplist"></ul>
</div>
<div class="og_prev"></div>
<div class="og_next"></div

JS代码,请在代码里修改。谢谢

// JavaScript Document
$(document).ready(function(e) {
/***不需要自动滚动,去掉即可***/
time = window.setInterval(function(){
$('.og_next').click();
},5000);
/***不需要自动滚动,去掉即可***/
linum = $('.mainlist li').length;//图片数量
w = linum * 250;//ul宽度
$('.piclist').css('width', w + 'px');//ul宽度
$('.swaplist').html($('.mainlist').html());//复制内容
$('.og_next').click(function(){
if($('.swaplist,.mainlist').is(':animated')){
$('.swaplist,.mainlist').stop(true,true);
}
if($('.mainlist li').length>4){//多于4张图片
ml = parseInt($('.mainlist').css('left'));//默认图片ul位置
sl = parseInt($('.swaplist').css('left'));//交换图片ul位置
if(ml<=0 && ml>w*-1){//默认图片显示时
$('.swaplist').css({left: '1000px'});//交换图片放在显示区域右侧
$('.mainlist').animate({left: ml - 1000 + 'px'},'slow');//默认图片滚动
if(ml==(w-1000)*-1){//默认图片最后一屏时
$('.swaplist').animate({left: '0px'},'slow');//交换图片滚动
}
}else{//交换图片显示时
$('.mainlist').css({left: '1000px'})//默认图片放在显示区域右
$('.swaplist').animate({left: sl - 1000 + 'px'},'slow');//交换图片滚动
if(sl==(w-1000)*-1){//交换图片最后一屏时
$('.mainlist').animate({left: '0px'},'slow');//默认图片滚动
}
}
}
})
$('.og_prev').click(function(){
if($('.swaplist,.mainlist').is(':animated')){
$('.swaplist,.mainlist').stop(true,true);
}
if($('.mainlist li').length>4){
ml = parseInt($('.mainlist').css('left'));
sl = parseInt($('.swaplist').css('left'));
if(ml<=0 && ml>w*-1){
$('.swaplist').css({left: w * -1 + 'px'});
$('.mainlist').animate({left: ml + 1000 + 'px'},'slow');
if(ml==0){
$('.swaplist').animate({left: (w - 1000) * -1 + 'px'},'slow');
}
}else{
$('.mainlist').css({left: (w - 1000) * -1 + 'px'});
$('.swaplist').animate({left: sl + 1000 + 'px'},'slow');
if(sl==0){
$('.mainlist').animate({left: '0px'},'slow');
}
}
}
})
});
$(document).ready(function(){
$('.og_prev,.og_next').hover(function(){
$(this).fadeTo('fast',1);
},function(){
$(this).fadeTo('fast',0.7);
})
})

免责声明:
1.本站已授权品牌方萌萌线上图书馆运营课程业务,相关图文音视频均归萌萌家所有。
2.本站与萌萌线上图书馆所发布资源仅限用于学习和研究测试使用,不得用于商业或非法用途。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。

火兔教程网 » 一个JQ范例,就是图片左右滚动,点击左右箭头控制滚动方向