話不多說，請看代碼：
<!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, //滾動速度（px/s）,carousel_speed=1000/interval時間間隔。
start_interval = function() { //執行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())) { //輪播部分超出容器后復位
$('.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>'); //復制carousel-ul，填補左移后出現的無內容區域，以此完成循環
start_interval();
$('.carousel-area').hover(
function() { //鼠標懸停事件
if (start_carousel_flag) { //已經開始interval
end_interval();
}
},
function() { //鼠標離開事件
if (!start_carousel_flag) { //沒有開始interval
start_interval();
}
}
)
})
</script>
</body>
</html>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
