<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/lunbo.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; } body { font-size: 14px; line-height: 1.5; font-family: 'Microsoft Yahei', 'arial', 'tahoma', 'simsun'; color: #666; background-color: #fff } img { border: 0; } a { text-decoration: none; color: #666; } .wrapper_lb { position: relative; width: 640px; height: 480px; } .lb_pic_list a { position: absolute; display: block; } .lb_pic_list a img { width: 640px; height: 480px; display: block; } .arrow_left { position: absolute; top: 50%; margin-top: -18px; left: 10px; } .arrow_right { position: absolute; top: 50%; margin-top: -18px; right: 10px; } </style> </head> <body> <div class="wrapper_lb"> <div class="lb_pic_list" id="scrollWrap"> <a href="javascript:;" class="J_pic"><img src="images/01.jpg" alt="1"></a> <a href="javascript:;" class="J_pic"><img src="images/02.jpg" alt="2"></a> <a href="javascript:;" class="J_pic"><img src="images/03.jpg" alt="3"></a> <a href="javascript:;" class="J_pic"><img src="images/04.jpg" alt="4"></a> <a href="javascript:;" class="J_pic"><img src="images/05.jpg" alt="5"></a> </div> <div class="arrow_left J_arrow"> <img src="images/arrowl.png" style=" 20px;height: 35px;cursor: pointer;"> </div> <div class="arrow_right J_arrow"> <img src="images/arrowr.png" style=" 20px;height: 35px; cursor: pointer;"> </div> </div> <script type="text/javascript"> $(function() { var i = 0; var timer; //获取id为scrollWrap 所有的img var imgList = $('#scrollWrap a img'); //img的个数 var imgNum = imgList.length; //第一张图显示 $('.J_pic').eq(0).show().siblings().hide(); //自动播放图片 showTime(); $('.J_pic').mouseover(function(){ clearInterval(timer); //鼠标经过停止自动播放 }); $('.J_pic').mouseout(function(){ showTime(); //鼠标离开继续自动播放 }); //点击向左按钮 $('.arrow_left').click(function() { clearInterval(timer); if (i == 0) { i = imgNum; } i--; showBg(); showTime(); }); //点击向右按钮 $('.arrow_right').click(function() { clearInterval(timer); if (i == imgNum - 1) { i = -1; } i++; showBg(); showTime(); }); function showBg() { $('.J_pic').eq(i).fadeIn(300).siblings().fadeOut(300); } function showTime() { timer = setInterval(function() { i++; if (i == imgNum) { i = 0; } showBg(); }, 2000); } }); </script> </body> </html>