jCarousel 自动滚动的传送切换
jCarousel
http://www.zhangxinxu.com/jq/jcarousel_zh/
jQuery下的滚动切换传送插件
自动滚动的传送切换
内部设定为没2
秒钟滚动一次。当鼠标移到图片上或点击“往前”“往后”按钮shit停止自动滚动。wrap
设为"last"
.
转载自:http://www.zhangxinxu.com/jq/jcarousel_zh/examples/static_auto.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jcarousel demo</title> <link rel="stylesheet" type="text/css" href="style/skin.css"/> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jcarousel.min.js"></script> <script type="text/javascript"> function mycarousel_initCallback(carousel) { // Disable autoscrolling if the user clicks the prev or next button. carousel.buttonNext.bind('click', function() { carousel.startAuto(0); }); carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); }); // Pause autoscrolling if the user moves with the cursor over the clip. carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); }; $(function(){ $('#static_simple').jcarousel({ auto: 2, wrap: 'last', initCallback: mycarousel_initCallback }); }); </script> </head> <body> <ul id="static_simple" class="jcarousel-skin-tango"> <li> <a href="#" target="_blank"> <img src="images/20140807110625186.jpg" width="290" height="218" alt="侏罗恐龙" class="vt" /> </a> </li> <li> <a href="#" target="_blank"> <img src="images/20140807173948155.jpg" width="290" height="218" alt="十二海洋星座" class="vt" /> </a> </li> <li> <a href="#" target="_blank"> <img src="images/20140807174016630.jpg" width="290" height="218" alt="梦想之园系列" class="vt" /> </a> </li> <li> <a href="#" target="_blank"> <img src="images/20140807110625186.jpg" width="290" height="218" alt="侏罗恐龙" class="vt" /> </a> </li> <li> <a href="#" target="_blank"> <img src="images/20140807173948155.jpg" width="290" height="218" alt="十二海洋星座" class="vt" /> </a> </li> <li> <a href="#" target="_blank"> <img src="images/20140807174016630.jpg" width="290" height="218" alt="梦想之园系列" class="vt" /> </a> </li> <li> <a href="#" target="_blank"> <img src="images/20140807110625186.jpg" width="290" height="218" alt="侏罗恐龙" class="vt" /> </a> </li> <li> <a href="#" target="_blank"> <img src="images/20140807173948155.jpg" width="290" height="218" alt="十二海洋星座" class="vt" /> </a> </li> <li> <a href="#" target="_blank"> <img src="images/20140807174016630.jpg" width="290" height="218" alt="梦想之园系列" class="vt" /> </a> </li> </ul> </body> </html>