读书人

帮忙改动一下这个jq图片展示的翻页效果

发布时间: 2012-04-17 15:06:33 作者: rapoo

帮忙改动一下这个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> 

读书人网 >JavaScript

热点推荐