您好,登錄后才能下訂單哦!
話不多說,請(qǐng)看代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Picture carousel</title> <style> * { margin: 0; padding: 0; } .carousel-container { overflow: hidden; width: 405px;/* 130*3+5*3 = 405 */ height: 150px; margin: 50px auto; background-color: #2c2c2c; } .carousel-area { width: 1350px;/* 675*2 = 1350 */ height: 150px; } .carousel-ul { float: left; overflow: hidden; width: 675px;/* 130*5+5*5 = 675 */ height: 150px; } .carousel-ul li { float: left; overflow: hidden; width: 130px; height: 130px; margin: 10px 5px 10px 0; list-style-type: none; } </style> </head> <body> <div class="carousel-container"> <div class="carousel-area"> <ul class="carousel-ul" id="carousel-ul-1"> <li><img src="img/1.gif" alt=""></li> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.jpg" alt=""></li> <li><img src="img/4.jpg" alt=""></li> <li><img src="img/5.gif" alt=""></li> </ul> </div> </div> <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function() { var carousel_interval_id, //interval ID start_carousel_flag = false, //是否開始interval carousel_speed = 50, //滾動(dòng)速度(px/s),carousel_speed=1000/interval時(shí)間間隔。 start_interval = function() { //執(zhí)行interval start_carousel_flag = true; carousel_interval_id = setInterval(function() { var margin_left = $('.carousel-area').css('margin-left'); $('.carousel-area').css('margin-left', (parseInt(margin_left) - 1) + 'px'); //不斷左移1px if (parseInt($('.carousel-area').css('margin-left')) <= -($('.carousel-ul').width())) { //輪播部分超出容器后復(fù)位 $('.carousel-area').css('margin-left', 0); } }, 1000 / carousel_speed) }, end_interval = function() { //停止interval start_carousel_flag = false; carousel_interval_id = clearInterval(carousel_interval_id); } $('.carousel-area').append('<ul class="carousel-ul">' + $('.carousel-ul').html() + '</ul>'); //復(fù)制carousel-ul,填補(bǔ)左移后出現(xiàn)的無(wú)內(nèi)容區(qū)域,以此完成循環(huán) start_interval(); $('.carousel-area').hover( function() { //鼠標(biāo)懸停事件 if (start_carousel_flag) { //已經(jīng)開始interval end_interval(); } }, function() { //鼠標(biāo)離開事件 if (!start_carousel_flag) { //沒有開始interval start_interval(); } } ) }) </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持億速云!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。