溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
jQuery呼吸輪播圖制作原理是什么，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
輪播圖：carousel
呼吸輪播圖變種布局重點：所有的圖片摞一起。
jquery選擇元素的能力非常好，但是我們習慣將用到的元素，提前保存到變量。通常我們使用id選中元素。一般我們以$box。
左右按鈕防流氓的策略：當圖片運動時，不進行任何操作。is()
小圓點的防流氓的策略：立即響應新事件。stop(true)
注意：使用代碼時將圖片更換，以及需要引入jquery庫。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
#carousel {
position: relative;
width: 900px;
height: 540px;
border: 1px solid #000;
margin: 50px auto;
}
/*呼吸輪播圖布局關鍵是所有圖片落在一起*/
#carousel .imgs ul li {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: none;
}
#carousel .imgs ul li:first-child {
display: block;
}
.btns a {
position: absolute;
width: 30px;
height: 60px;
top: 50%;
margin-top: -30px;
text-decoration: none;
background-color: rgba(0, 0, 0, .5);
line-height: 60px;
text-align: center;
font-size: 20px;
color: #fff;
}
.btns a:first-child {
left: 10px;
}
.btns a:last-child {
right: 10px;
}
#carousel .circles {
position: absolute;
width: 200px;
height: 20px;
left: 50%;
margin-left: -100px;
bottom: 30px;
}
#carousel .circles ol {
width: 210px;
}
#carousel .circles ol li {
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
background-color: blue;
line-height: 20px;
text-align: center;
border-radius: 20px;
}
#carousel .circles ol li.cur {
background-color: orange;
}
</style>
</head>
<body>
<div id="carousel">
<div class="imgs" id="imgs">
<ul>
<li><img src="images/aoyun/0.jpg" alt=""></li>
<li><img src="images/aoyun/1.jpg" alt=""></li>
<li><img src="images/aoyun/2.jpg" alt=""></li>
<li><img src="images/aoyun/3.jpg" alt=""></li>
<li><img src="images/aoyun/4.jpg" alt=""></li>
<li><img src="images/aoyun/5.jpg" alt=""></li>
<li><img src="images/aoyun/6.jpg" alt=""></li>
</ul>
</div>
<div class="btns">
<a href="#" id="leftBtn"><</a>
<a href="#" id="rightBtn">></a>
</div>
<div class="circles" id="circles">
<ol>
<li class="cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ol>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
// 獲取元素
var $leftBtn = $("#leftBtn");
var $rightBtn = $("#rightBtn");
var $imgs = $("#imgs ul li");
var $circles = $("#circles ol li");
var $carousel = $("#carousel");
// 定義length
var length = $imgs.length;
// 定義信號量
var idx = 0;
// 開啟定時器
var timer = setInterval(change, 2000);
// 鼠標移入停止定時器
$carousel.mouseenter(function() {
// 清除定時器
clearInterval(timer);
})
// 鼠標離開從新開啟定時器
$carousel.mouseleave(function() {
// 設表先關
clearInterval(timer);
// 重新賦值timer
timer = setInterval(change, 2000);
})
// 右按鈕事件
$rightBtn.click(change);
function change() {
// 防流氓
if ($imgs.is(":animated")) {
return;
}
// 當前圖片消失
$imgs.eq(idx).fadeOut(600);
// 信號量改變
idx++;
// 邊界判定
if (idx > length - 1) {
idx = 0;
}
// 下一張圖片淡入
$imgs.eq(idx).fadeIn(600);
// 當前小圓點要加cur
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
}
// 左按鈕事件
$leftBtn.click(function() {
// 防流氓
if (!$imgs.is(":animated")) {
// 當前圖片消失
$imgs.eq(idx).fadeOut(600);
// 信號量改變
idx--;
// 邊界判定
if (idx < 0) {
idx = length - 1;
}
// 下一張圖片淡入
$imgs.eq(idx).fadeIn(600);
// 當前小圓點加cur
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
}
})
// 小圓點事件
$circles.mouseenter(function() {
// 當前圖片消失
$imgs.eq(idx).stop(true).fadeOut(600);
// 改變信號量
idx = $(this).index();
// 下一張圖片出現
$imgs.eq(idx).stop(true).fadeIn(600);
// 當前小圓點加cur
$(this).addClass("cur").siblings().removeClass("cur");
})
</script>
</body>
</html>看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
