jQuery无缝图片滚动，带箭头控制方向左右滚动

发布时间：2018-08-16 05:23:50 所属栏目：Asp教程来源：站长网

导读：这是一个来自国外网站的图片滚动特效，作者取的英文名字叫：Automatic Infinite Carousel，引入了 jQuery 插件，实现无缝图片滚动，并且在两侧带有箭头控制方向左右滚动。为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别

　　这是一个来自国外网站的图片滚动特效，作者取的英文名字叫：Automatic Infinite Carousel，引入了jQuery插件，实现无缝图片滚动，并且在两侧带有箭头控制方向左右滚动。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Automatic Infinite Carousel</title> <style type="text/css" media="screen">  </style> <script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> (function () { $.fn.infiniteCarousel = function () { function repeat(str, n) { return new Array( n + 1 ).join(str); } return this.each(function () { // magic! var $wrapper = $('> div', this).css('overflow', 'hidden'), $slider = $wrapper.find('> ul').width(9999), $items = $slider.find('> li'), $single = $items.filter(':first') singleWidth = $single.outerWidth(), visible = Math.ceil($wrapper.innerWidth() / singleWidth), currentPage = 1, pages = Math.ceil($items.length / visible); /* TASKS */ // 1. pad the pages with empty element if required if ($items.length % visible != 0) { // pad $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible))); $items = $slider.find('> li'); } // 2. create the carousel padding on left and right (cloned) $items.filter(':first').before($items.slice(-visible).clone().addClass('cloned')); $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned')); $items = $slider.find('> li'); // 3. reset scroll $wrapper.scrollLeft(singleWidth * visible); // 4. paging function function gotoPage(page) { var dir = page < currentPage ? -1 : 1, n = Math.abs(currentPage - page), left = singleWidth * dir * visible * n; $wrapper.filter(':not(:animated)').animate({ scrollLeft : '+=' + left }, 500, function () { // if page == last page - then reset position if (page > pages) { $wrapper.scrollLeft(singleWidth * visible); page = 1; } else if (page == 0) { page = pages; $wrapper.scrollLeft(singleWidth * visible * pages); } currentPage = page; }); } // 5. insert the back and forward link $wrapper.after('<a href="#" class="arrow back"><</a><a href="#" class="arrow forward">></a>'); // 6. bind the back and forward links $('a.back', this).click(function () { gotoPage(currentPage - 1); return false; }); $('a.forward', this).click(function () { gotoPage(currentPage + 1); return false; }); $(this).bind('goto', function (event, page) { gotoPage(page); }); // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL $(this).bind('next', function () { gotoPage(currentPage + 1); }); }); }; })(jQuery); $(document).ready(function () { // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL var autoscrolling = true; $('.infiniteCarousel').infiniteCarousel().mouseover(function () { autoscrolling = false; }).mouseout(function () { autoscrolling = true; }); setInterval(function () { if (autoscrolling) { $('.infiniteCarousel').trigger('next'); } }, 2000); }); </script> </head> <body> <h1>Automatic Infinite Carousel</h1> <div class="infiniteCarousel"> <div class="wrapper"> <ul> <li><a href="#" title="Tall Glow"><img src="/uploads/common/images/wall_s1.jpg" height="75" width="75" alt="Tall Glow" /></a></li> <li><a href="#" title="Wet Cab"><img src="/uploads/common/images/wall_s2.jpg" height="75" width="75" alt="Wet Cab" /></a></li> <li><a href="#" title="Rockefella"><img src="/uploads/common/images/wall_s3.jpg" height="75" width="75" alt="Rockefella" /></a></li> <li><a href="#" title="Chrysler Reflect"><img src="/uploads/common/images/wall_s4.jpg" height="75" width="75" alt="Chrysler Reflect" /></a></li> <li><a href="#" title="Chrysler Up"><img src="/uploads/common/images/wall_s5.jpg" height="75" width="75" alt="Chrysler Up" /></a></li> <li><a href="#" title="Time Square Awe"><img src="/uploads/common/images/wall_s6.jpg" height="75" width="75" alt="Time Square Awe" /></a></li> <li><a href="#" title="Wonky Buildings"><img src="/uploads/common/images/wall_s7.jpg" height="75" width="75" alt="Wonky Buildings" /></a></li> <li><a href="#" title="Leaves of Fall"><img src="/uploads/common/images/wall_s8.jpg" height="75" width="75" alt="Leaves of Fall" /></a></li> </ul> </div> </div> <br/> <br/> </body> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：许昌站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!