[图片如何转js代码]js图片左右滚动代码!

做为一名职业web前端，我们需要对网页上常见的交互都要具备手写js的能力，或者js比较复杂如果习惯jquery也可以。最近切图网一个客户项目中遇到了图片滚动效果，因客户要求，写了3个不同的版本，留作备注和分享。

1，右箭头，点击一下移动一个单元，当移动到最后一个单元的时候，在点击右箭头，回到第一个单元

1. /*图片滚动*/

2. $('.imgroll').each(function(){

3. $(this).find('li:first').addClass('selected');

4. })

6. $('.imgroll .next').click(function(){

7. var f = $(this).parent();

8. var l = ('li').size()-4) * 258;

10. (parseInt('ul').css('margin-left')) + '-' + l);

11. if(parseInt('ul').css('margin-left')) > -l){

13. f.find('ul').stop().animate({'marginLeft':'-=258'})

14. }

15. else{

16. f.find('ul').stop().animate({'marginLeft':0})

17. }

20. });

22. $('.imgroll .prev').click(function(){

23. var f = $(this).parent();

25. var l = ('li').size()-4) * 258;

27. (parseInt('ul').css('margin-left')) + '-' + l);

28. if(parseInt('ul').css('margin-left')) < 0){

30. f.find('ul').stop().animate({'marginLeft':'+=258'})

31. }

32. else{

33. f.find('ul').stop().animate({'marginLeft':0})

34. }

36. })

2，点击右箭头，移动一个单元，当移动到最后一个单元的时候，点击右箭头无效。

2. /*图片滚动*/

3. $('.imgroll').each(function(){

4. $(this).find('li').each(function(){

5. $(this).attr('data-index',$(this).index());

6. })

7. })

9. $('.imgroll .next').click(function(){

11. // 将整个ul设置动画方式负移位，制造图片左移的效果，然后设置移位为0，将第一张图片获取补到最后，到这里整个图片左移效果完成

12. var f = $(this).parent();

15. ('li:eq(3)').data('index')+1 + '-----'+ f.find('li').size());

16. if('li:eq(3)').data('index')+ 1 == f.find('li').size()){

17. return false;

18. }

20. f.find('ul').animate({'marginLeft':-258},function(){

21. $(this).css('marginLeft',0).find('li:first').appendTo($(this));

23. });

24. });

26. $('.imgroll .prev').click(function(){

27. var f = $(this).parent();

29. if('li:first').data('index') == 0){

30. return false;

31. }

33. // 同上

34. f.find('ul').css('marginLeft',-258).find('li:last').prependTo('ul'));

35. f.find('ul').animate({'marginLeft':0});

37. })

3，最常规的写法，参见切图框架 slicy 。

原文地址： （切图社区）

加微信公众号：qietuwang （限做前端的人）