jquery控制图片左右滚动

作者: jaclon 分类: JS 发布时间: 2011-06-09 00:30 ė 62条评论

今天在做一个网站的时候要做一个左右滚动的效果,之前有用jquery的animate做逐条单向滚动的效果,双向滚动原理上应该差不多吧。
这个是要做的效果
jquery animate

HTML源码:

 <div>
 <div><a href="#" target="_blank"><img src="images/left.gif" width="13" height="18" /></a></div>
 <ul>
 <li><a href="#" target="_blank"><img src="images/pic01.gif" width="135" height="94" /></a><a href="#" target="_blank" title="">2011国画</a></li>
 <li><a href="#" target="_blank"><img src="images/pic02.gif" width="135" height="94" /></a><a href="#" target="_blank" title="">2011国画</a></li>
 </ul>
 <div><a href="#" target="_blank"><img src="images/right.gif" width="13" height="18" /></a></div>
 </div>

向左滚动就是把UL向左移动一个LI的宽度,然后将第一个LI移动到最后,再重新调整UL的位置。
向右滚动就比较麻烦了,先要在左边给LI腾出个位置,然后将最后一个LI移到第一个位置,下面给出JS代码:

function myscroll(direction)
{
	if (direction == 'left')
	{
		$("#pictures").find("ul:last").css('marginLeft', '-162px');
		$("#pictures").find("li:last").insertBefore($("#pictures").find("li:first"));
		
		$("#pictures").find("ul:first").animate({
			marginLeft:"0px"
			},
			1000
		);
	} else {
		$("#pictures").find("ul:first").animate({
			marginLeft:"-162px"
			},
			1000,
			function(){
				$(this).css({
					marginLeft:"0"
				}).find("li:first").appendTo(this);
			}
		
		);
	}
}
$(document).ready(function(){
	$("#prev_p").click(function(){
		myscroll('left');
	});
	$("#next_p").click(function(){
		myscroll('right');
	});
})

本文出自 肥蕉博客@IT技术,热门话题,生活随笔,美图欣赏,转载时请注明出处及相应链接。

本文永久链接: http://www.bananawolf.com/html/2011/06/586.html

2条评论

  1. 自在 六月 9, 2011 11:34 上午 回复

    我copy一下你的代码用用~XD

  2. zoowar 八月 25, 2012 4:12 下午 回复

    博主我下午也是被右边难倒了,麻烦你吧代码压缩包发到我邮箱可以吗?让我回家去研究下。zoowar@qq.com 先感谢你了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

Ɣ回顶部