当前位置: 代码迷 >> JavaScript >> 帮忙改动一下这个jq图片展示的翻页效果.该如何解决
  详细解决方案

帮忙改动一下这个jq图片展示的翻页效果.该如何解决

热度:57   发布时间:2012-04-17 15:06:33.0
帮忙改动一下这个jq图片展示的翻页效果...
一个产品图展示的效果 。。
这里是演示。
http://www.veryhuo.com/a/demo/2010/liehuo_jq_pro.html

问题是:
我想在点击上下翻页时,会一次翻动三张图片。当前是一张,图片太多的话,浏览也不太方便...


------解决方案--------------------
HTML code

<script type="text/javascript">
var areaDailyList = [{"content":"文字说明1<br>","id":29,"title":"标题1","image":"/uploads/allimg/1010/01-big.jpg","date":"2010-07-09","imageFrom":"图片说明1"},{"content":"文字说明2","id":28,"title":"标题2","image":"/uploads/allimg/1010/02-big.jpg","date":"2010-07-08","imageFrom":"图片说明2"},{"content":"文字说明3","id":27,"title":"标题3","image":"/uploads/allimg/1010/03-big.jpg","date":"2010-07-07","imageFrom":"图片说明3"},{"content":"文字说明4","id":20,"title":"标题4","image":"/uploads/allimg/1010/04-big.jpg","date":"2010-07-06","imageFrom":"图片说明4"},{"content":"文字说明5","id":24,"title":"标题5","image":"/uploads/allimg/1010/05-big.jpg","date":"2010-07-05","imageFrom":"图片说明5"}];
jQuery(function(){
if (!$('#slidePic')[0])
return;
var i = 0, p = $('#slidePic ul'), pList = $('#slidePic ul li'), len = pList.length;
var elePrev = $('#prev'), eleNext = $('#next');
//var firstClick = false;
var w = 100, num = 3;
p.css('width',w*len);
if (len <= num)
eleNext.addClass('gray');
function prev(e,v){
if (elePrev.hasClass('gray')) {
//alert('已经是第一张了');
return;
}
v=v?v:3;
i=i-v;i=i<0?0:i;
p.animate({
marginTop:-i * w
},500);
if (i < len - num) {
eleNext.removeClass('gray');
}
if (i == 0) {
elePrev.addClass('gray');
}
}
function next(e,v){
if (eleNext.hasClass('gray')) {
//alert('已经是最后一张了');
return;
}
//p.css('margin-left',-(++i) * w);
v=v?v:3;
i=i+v;i=i>(len-num)?(len-num):i;
p.animate({
marginTop:-i * w
},500);
if (i != 0) {
elePrev.removeClass('gray');
}
if (i == len - num) {
eleNext.addClass('gray');
}
}
elePrev.bind('click',prev);
eleNext.bind('click',next);
pList.each(function(n,v){
$(this).click(function(){
if(n-i == 2){
next(0,1);
}
if(n-i == 0){
prev(0,1)
}
$('#slidePic ul li.cur').removeClass('cur');
$(this).addClass('cur');
show(n);
}).mouseover(function(){
$(this).addClass('hover');
}).mouseout(function(){
$(this).removeClass('hover');
})
});
function show(i){
var ad = areaDailyList[i];
var t = ad.date.split('-');
$('#dailyTitle').html(ad.title);
$('#dailyImage').attr('src',ad.image);
$('#dailyImageFrom').html('' + ad.imageFrom + '');
$('#dailyContent').html(ad.content);
$('#dailyDate').html('<em class="ym">' + t[0] + '.' + t[1] + '</em><em class="day">' + t[2] + '</em>');
var shareRRUrl = encodeURIComponent('http://www.liehuo.net/share365/'+ad.id);
var shareUrl = encodeURIComponent('http://www.liehuo.org');
var shareTitle = encodeURIComponent(ad.title + 'http://www.veryhuo.com');
var shareContent = encodeURIComponent(ad.content.substring(0,100)+'...');
}
});
</script> 
  相关解决方案