JavaScript滾動輪播圖制作原理詳解

更新時間：2022年03月29日 18:52:02 作者：周帥帥Love

這篇文章主要為大家詳細(xì)介紹了JavaScript滾動輪播圖制作原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript滾動輪播圖制作原理，供大家參考，具體內(nèi)容如下

滾動輪播圖

滾動輪播圖布局關(guān)鍵：是所有圖片并排在一起，所以unit的寬要足夠?qū)挕?br />克隆第一張圖片追加到最后一張
右按鈕拉動策略：先拉動，再瞬移
左按鈕拉動策略：先瞬移，再拉動
與呼吸輪播圖一樣，需要做防流氓策略

復(fù)制代碼：將我代碼中的圖片更換為你的圖片，注意圖片路徑，還需要引入js庫，我引入的是jquery-1.12.3.min.js的版本，引入的時候注意路徑

舉例：

<!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;
?? ??? ?}
?? ??? ?a {
?? ??? ??? ?text-decoration: none;
?? ??? ?}
?? ??? ?.carousel {
?? ??? ??? ?width: 560px;
?? ??? ??? ?height: 300px;
?? ??? ??? ?margin: 50px auto;
?? ??? ??? ?border: 5px solid red;
?? ??? ??? ?position: relative;
?? ??? ??? ?overflow: hidden;
?? ??? ?}
?? ??? ?/* 滾動輪播圖布局關(guān)鍵，是所有圖片并排在一起
?? ??? ??? ?unit的寬要足夠?qū)?
?? ??? ? */
?? ??? ? .carousel .unit {
?? ??? ? ?? ?position: absolute;
?? ??? ? ?? ?width: 9999px;
?? ??? ? ?? ?left: 0;
?? ??? ? ?? ?top: 0;
?? ??? ? }
?? ??? ? .carousel .unit li {
?? ??? ? ?? ?float: left;
?? ??? ? ?? ?width: 560px;
?? ??? ? ?? ?height: 300px;
?? ??? ? }
?? ??? ? .btns a {
?? ??? ? ?? ?position: absolute;
?? ??? ? ?? ?width: 30px;
?? ??? ? ?? ?height: 60px;
?? ??? ? ?? ?top: 50%;
?? ??? ? ?? ?margin-top: -30px;
?? ??? ? ?? ?background-color: rgba(0, 0, 0, .5);
?? ??? ? ?? ?color: #fff;
?? ??? ? ?? ?font-size: 20px;
?? ??? ? ?? ?line-height: 60px;
?? ??? ? ?? ?text-align: center;
?? ??? ? }
?? ??? ? .btns a:first-child {
?? ??? ? ?? ?left: 10px;
?? ??? ? }
?? ??? ? .btns a:last-child {
?? ??? ? ?? ?right: 10px;
?? ??? ? }
?? ??? ? .circles {
?? ??? ? ?? ?position: absolute;
?? ??? ? ?? ?width: 140px;
?? ??? ? ?? ?height: 20px;
?? ??? ? ?? ?left: 50%;
?? ??? ? ?? ?margin-left: -70px;
?? ??? ? ?? ?bottom: 30px;
?? ??? ? }
?? ??? ? .circles ol {
?? ??? ? ?? ?width: 150px;
?? ??? ? }
?? ??? ? .circles ol li {
?? ??? ? ?? ?float: left;
?? ??? ? ?? ?width: 20px;
?? ??? ? ?? ?height: 20px;
?? ??? ? ?? ?margin-right: 10px;
?? ??? ? ?? ?background-color: orange;
?? ??? ? ?? ?border-radius: 50%;
?? ??? ? }
?? ??? ? .circles ol li.cur {
?? ??? ? ?? ?background-color: yellow;
?? ??? ? }
?? ?</style>
</head>
<body>
?? ?<div class="carousel" id="carousel">
?? ??? ?<ul class="unit" id="unit">
?? ??? ??? ?<li><img src="images/0.jpg" alt=""></li>
?? ??? ??? ?<li><img src="images/1.jpg" alt=""></li>
?? ??? ??? ?<li><img src="images/2.jpg" alt=""></li>
?? ??? ??? ?<li><img src="images/3.jpg" alt=""></li>
?? ??? ??? ?<li><img src="images/4.jpg" alt=""></li>
?? ??? ?</ul>
?? ??? ?<div class="btns">
?? ??? ??? ?<a href="javascript:void(0)" id="leftBtn">&lt;</a>
?? ??? ??? ?<a href="javascript:void(0)" id="rightBtn">&gt;</a>
?? ??? ?</div>
?? ??? ?<div class="circles" id="circles">
?? ??? ??? ?<ol>
?? ??? ??? ??? ?<li class="cur"></li>
?? ??? ??? ??? ?<li></li>
?? ??? ??? ??? ?<li></li>
?? ??? ??? ??? ?<li></li>
?? ??? ??? ??? ?<li></li>
?? ??? ??? ?</ol>
?? ??? ?</div>
?? ?</div>
?? ?<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
?? ?<script type="text/javascript">
?? ?// 獲取元素
?? ?var $unit = $("#unit");
?? ?var $leftBtn = $("#leftBtn");
?? ?var $rightBtn = $("#rightBtn");
?? ?var $circles = $("#circles ol li");
?? ?var length = $circles.length;
?? ?// console.log(length);

?? ?// 定義信號量 有效范圍: 0, 1, 2, 3, 4
?? ?var idx = 0;

?? ?// 克隆第一張圖片追加到最后一張
?? ?$unit.children("li:first").clone().appendTo($unit);

?? ?// 右按鈕的點擊事件
?? ?$rightBtn.click(function() {
?? ??? ?// 防流氓
?? ??? ?if ($unit.is(":animated")) {
?? ??? ??? ?return;
?? ??? ?}
?? ??? ?// 拉動策略: 先拉動， 再瞬移
?? ??? ?idx++;
?? ??? ?console.log(idx);
?? ??? ?// 信號量 有效值是: 0, 1, 2, 3, 4, 5(5是貓膩圖)
?? ??? ?$unit.animate({"left": -560 * idx}, 1000, function() {
?? ??? ??? ?// 當(dāng)貓膩圖完全顯示之后驗證信號量
?? ??? ??? ?if (idx > length - 1) {
?? ??? ??? ??? ?// idx 歸零
?? ??? ??? ??? ?idx = 0;
?? ??? ??? ??? ?// 瞬間移動到真圖
?? ??? ??? ??? ?$unit.css("left", 0);
?? ??? ??? ?}

?? ??? ?})
?? ??? ?// 小圓點在1000ms之內(nèi)，對應(yīng)的是idx = 5 是貓膩圖
?? ??? ?// 0 - 4 是有效值， 5對應(yīng)的是貓膩圖
?? ??? ?// 定義一個變量用于中轉(zhuǎn)信號量
?? ??? ?var i = idx <= 4 ? idx : 0;
?? ??? ?$circles.eq(i).addClass("cur").siblings().removeClass("cur");

?? ?})


?? ?// 左按鈕點擊事件
?? ?$leftBtn.click(function() {
?? ??? ?// 防流氓
?? ??? ?if ($unit.is(":animated")) {
?? ??? ??? ?return;
?? ??? ?}

?? ??? ?// 左按鈕的拉動策略: 先瞬移， 再拉動
?? ??? ?idx--;
?? ??? ?// 邊界判斷
?? ??? ?if (idx < 0) {
?? ??? ??? ?idx = length - 1;
?? ??? ??? ?// 瞬間移動到貓膩圖
?? ??? ??? ?$unit.css("left", -560 * length);
?? ??? ?}
?? ??? ?console.log(idx);
?? ??? ?// 拉動
?? ??? ?$unit.animate({"left": -560 * idx}, 1000);

?? ??? ?// 當(dāng)前小圓點加cur
?? ??? ?$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
?? ?})

?? ?// 小圓點事件
?? ?$circles.mouseenter(function() {
?? ??? ?// 改變信號量
?? ??? ?idx = $(this).index();
?? ??? ?console.log(idx);
?? ??? ?// 拉動
?? ??? ?$unit.stop(true).animate({"left": -560 * idx}, 600);
?? ??? ?// 小圓點加cur
?? ??? ?$(this).addClass("cur").siblings().removeClass("cur");
?? ?})


?? ?</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: