一个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);
})
})

本站所有资源来源于用户上传和网络,且仅作为演示数据并供学习和交流使用,版权归原作者所有,如有侵权请邮件联系站长!
Zadmei资源分享 » 一个JQ范例,就是图片左右滚动,点击左右箭头控制滚动方向