描述:
点击指示左右方向的图片,图片可以左右移动,并且左移动一个图片,此图片(第一个图片)自动排到图片队列最后面(成为最后一张图片)。右移动一个图片,此图片(最后一个图片)自动排到图片队列最前面(成为第一张图片)
上述描述遇到了问题,也许是我用jquery的appendTo和prependTo方法,图片HTML代码重新排列,第二张图片会自动迁移占了原本第一张图片的位置,也就是说,我每次点击向左移动时,所有图片其实向前移动了两次(除了第一张)。唉。。。纠结~~~~到底什么原因啊,怎么解决啊。
先不管了,以后再说吧。
HTML:
<div id="scroller"> <div id="images"> <a href="pic1.jpg"><img src="pic1.jpg" alt="" width="150" height="150" /></a> <a href="pic2.jpg"><img src="pic2.jpg" alt="" width="150" height="150"/></a> <a href="pic3.jpg"><img src="pic3.jpg" alt="" width="150" height="150" /></a> <a href="pic4.jpg"><img src="pic4.jpg" alt="" width="150" height="150" /></a> <a href="pic5.jpg"><img src="pic5.jpg" alt="" width="150" height="150"/></a> <a href="pic6.jpg"><img src="pic6.jpg" alt="" width="150" height="150" /></a> </div> </div> <div id="direction"> <a href="#"><img src="left.jpg" alt=""/></a> <a href="#"><img src="right.jpg" alt=""/></a> </div>
CSS(#scroller注释overflow:hidden是为了看效果):
img{ border: 0; /*如果不float: left,FF和IE下都有默认的距离,而且大小不一。*/ float: left; margin-left: 5px; } /*只能容纳显示一张图片*/ #scroller{ margin: auto; height: 150px; width: 470px; /*设置 position为relative,让图片移动以scroller的左上角为基点*/ position: relative; /*超出范围的隐藏*/ /*overflow: hidden;*/ /*设置边框样式*/ border: 1px saddlebrown dashed; } #images{ width: 930px; height: 150px; border: 1px solid aqua; } #images a img{ width: 150px; height: 150px; /*图片要实现动画效果,必须要设置此CSS属性*/ position: relative; } #direction{ width: 260px; height: 120px; margin: auto; }
Jquery:
// 图片对象 var $img_obj = $('#images a img'); // 左右指示的图片对象 var $direction = $('#direction a img'); // 左指示图片 var $leftdir = $direction.eq(0); // 右指示图片 var $rightdir = $direction.eq(1); var $leftanimator = function(imgobj){ imgobj.animate({ 'left':'+=-155' },300); // 点击时,此时的a对象集合 var $now_a_obj = $('#images a'); // 把此时图片队列里队首图片放到队尾 $now_a_obj.eq(0).appendTo($('#images')); } var $rightanimator = function(imgobj){ imgobj.animate({ 'left':'+=155' },300); // 移动的是a以及其包含的img var $now_a_obj = $('#images a'); // 点击时,此时的a对象集合 var $now_img_obj = $('#images a img'); var length = $now_img_obj.length; // 把此时图片队列里队尾图片放到队首 $now_a_obj.eq(length-1).prependTo($('#images')); } // 让指示图片半透明 $direction.fadeTo(100, 0.5); $direction.hover(function(){ $(this).stop(true,true).animate({ 'opacity':1 }, 300); }, function(){ $(this).stop(true,true).animate({ 'opacity':0.5 }, 300); }); $leftdir.click(function(){ $leftanimator($img_obj); // alert($now_img_obj.eq(0).attr('href')); }) $rightdir.click(function(){ $rightanimator($img_obj); // alert($now_img_obj.eq(length-1).attr('href')); }); });
截图:
初始:
点击左指示一次:
点击左指示二次:
点击右指示一次:
点击右指示二次: