一个产品图展示的效果 。。
这里是演示。
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>