* {
? ? padding: 0;
? ? margin: 0;
}
html,
body {
? ? height: 100%;
? ? overflow: hidden;
}
body{
? ? background: rgba(0, 0, 0, 0.2);
}
.box {
? ? width: 1000px;
? ? height: 80%;
? ? margin: 50px auto;
? ? position: relative;
? ? overflow: hidden;
? ? box-shadow: 2px 2px 15px #333333;
}

ul {
? ? height: 100%;
? ? position: absolute;
? ? display: flex;
}

ol,
ul,
li {
? ? list-style: none;
}

li {
? ? flex-shrink: 0;
? ? width: 1000px;
? ? height: 100%;
}

li>img {
? ? width: 100%;
? ? height: 100%;
}

button {
? ? width: 70px;
? ? height:50px;
? ? color: #f5f5f5;
? ? position: absolute;
? ? z-index: 3;
? ? top: 50%;
? ? transform: translateY(-50%);
? ? background: rgba(0, 0, 0, 0.2);
? ? border-radius:0 5px 5px 0;
? ? opacity: 0;
? ? border: none;
? ? cursor: pointer;
? ? outline: none;
? ? transition: all 1s;
}
.box:hover button{
? ? opacity: 1;
}
button:hover{
? ? background: rgba(0, 0, 0, 0.5);
}
.left{
? ? border-radius:0 5px 5px 0;
}
.right {
? ? border-radius:5px 0px 0px 5px;
? ? right: 0;
}
ol{
? ? width: 120px;
? ? display: flex;
? ?? ? /*進行水平布局，與float功能并無差異，此處用float也是可以的*/
? ? justify-content: space-between;
? ? position: absolute;
? ? bottom: 10px;
? ? left: 50%;
? ? transform: translateX(-50%);
}
ol li{
? ? border-radius: 50%;
? ? width: 10px;
? ? height: 10px;
? ? background-color: #fff;
? ? cursor: pointer;
? ?
}
.ac{
? ? width: 25px;?
? ? transition: width 1s;
? ? border-radius: 5px 5px 5px 5px;
}

html，js代碼片段

<!DOCTYPE html>
<html lang="en">

<head>
? ? <meta charset="UTF-8">

? ? <title>Document</title>
? ? <link rel="stylesheet" href="../css/icon/iconfont.css" >
? ? <link rel="stylesheet" href="../css/carousel.css" >
? ? <script src="../jquery-3.4.1.min.js"></script>
</head>

<body>
? ? <div class="box">
? ? ? ? <ul>
? ? ? ? ? ? <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>
? ? ? ? ? ? <li><img src="../images/5.jpeg" alt=""></li>
? ? ? ? ? ? <li><img src="../images/6.jpg" alt=""></li>
? ? ? ? </ul>
? ? ? ? <button class="iconfont left">&#xe60d;</button>
? ? ? ? <button class="iconfont right">&#xe658;</button>
? ? ? ? <ol>
? ? ? ? </ol>
? ? </div>
? ? <script>
? ? ? ? const box = $(".box");
? ? ? ? const ul = $(box).children("ul");
? ? ? ? const img_li = $(ul).children("li");
? ? ? ? const len = $(img_li).length,
? ? ? ? ? ? width = $(box).width();//獲取box也就是li的寬
? ? ? ? var flag = false;?? ??? ?//定義一個標識，來進行判斷當次動畫是否已經(jīng)完成
? ? ? ? var index = 0, lastIndex = 0;?? ?//定義全局的index，與lastIndex，也就是一個起到下標的標識
? ? ? ? $(img_li).first().clone(true).appendTo($(ul))//克隆第一張圖片放在ul的最后
? ? ? ? //生成所有的ol>li即小圓點
? ? ? ? for (let i = 0; i < len; i++) {
? ? ? ? ? ? $("<li>").addClass(i === 0 ? "ac" : "").appendTo($("ol")); //三元運算符給addClass進行填值
? ? ? ? ? ? //給第一個小圓點進行默認樣式的設置
? ? ? ? }
? ? ? ? //小圓點點擊切換圖片
? ? ? ? $("ol li").on('click', function () {
? ? ? ? ? ? if (flag) return;?? ??? ?//標識動畫，動畫未完成時，取消掉點擊事件
? ? ? ? ? ? flag = true;?? ??? ??? ?//動畫完成是執(zhí)行點擊事件的代碼
? ? ? ? ? ? lastIndex = index;?? ??? ?//記錄上次的點擊的index的值
? ? ? ? ? ? index = $(this).index();?? ??? ?//將小圓點的小標賦值給index
? ? ? ? ? ? $("ol li").eq(lastIndex).removeClass("ac")
? ? ? ? ? ? $(this).addClass("ac");?? ??? ?//將樣式進行toggle
? ? ? ? ? ? $(ul).animate({ left: -index * width }, 1000, function () //jquery的自定義動畫方法
? ? ? ? ? ? ? ? flag = false;//回調(diào)函數(shù)將在動畫結(jié)束之后將標識變?yōu)閠rue，以便于執(zhí)行下一次點擊事件
? ? ? ? ? ? })
? ? ? ? })

? ? ? ? //點擊下一張進行切換
? ? ? ? $(".right").on('click', function () {
? ? ? ? ? ? if (flag) return;?? ??? ?
? ? ? ? ? ? flag = true;?? ??? ?
? ? ? ? ? ? lastIndex = index;?? ??? ?
? ? ? ? ? ? index++;?? ??? ?//將index進行++，使其向下一張輪播
? ? ? ? ? ? if (index === len) {?? ??? ?//當輪播到最后一張clone的圖片時
? ? ? ? ? ? ? ? index = 0;?? ??? ??? ??? ?//將index賦值為0，讓小圓點正常執(zhí)行
? ? ? ? ? ? ? ? $(ul).animate({ left: -len * width }, 1000, function () {//讓動畫繼續(xù)執(zhí)行到clone的那張圖片
? ? ? ? ? ? ? ? ? ? flag = false;?? ??? ?
? ? ? ? ? ? ? ? ? ? $(ul).css("left", 0)?? ?//當執(zhí)行到最后一張clone的圖片，執(zhí)行完成時，立馬瞬移到第一張圖片
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? $(ul).animate({ left: -index * width }, 1000, function () {
? ? ? ? ? ? ? ? ? ? flag = false
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? ? $("ol li").eq(lastIndex).removeClass("ac")?? ?//給相應的小圓點進行樣式設置
? ? ? ? ? ? $("ol li").eq(index).addClass("ac")

? ? ? ? })
? ? ? ? //點擊上一張進行切換
? ? ? ? //與點擊下一張進行切換思想一致
? ? ? ? $(".left").on('click', function () {
? ? ? ? ? ? if (flag) return;
? ? ? ? ? ? flag = true;
? ? ? ? ? ? lastIndex = index;
? ? ? ? ? ? index--;
? ? ? ? ? ? if (index < 0) {
? ? ? ? ? ? ? ? index = len - 1;
? ? ? ? ? ? ? ? $(ul).css("left", -len * width)
? ? ? ? ? ? ? ? $(ul).animate({ left: -index * width }, 1000, function () {
? ? ? ? ? ? ? ? ? ? flag = false;
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? $(ul).animate({ left: -index * width }, 1000, function () {
? ? ? ? ? ? ? ? ? ? flag = false
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? ? $("ol li").eq(lastIndex).removeClass("ac")?? ??? ?
? ? ? ? ? ? $("ol li").eq(index).addClass("ac")
? ? ? ? })
? ? ? ? //自動播放

? ? ? ? $(box[0]).hover(() => {
? ? ? ? ? ? clearInterval($(box)[0].timer)
? ? ? ? }, (function auto() {
? ? ? ? ? ? $(box)[0].timer = setInterval(() => { //立即執(zhí)行函數(shù)，在最后返回出auto函數(shù)，讓hover的leave有事件執(zhí)行
? ? ? ? ? ? ? ? $(".right").trigger('click');
? ? ? ? ? ? }, 2000);
? ? ? ? ? ? return auto;
? ? ? ? }
? ? ? ? )())? ?


? ? </script>
</body>

</html>

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

您可能感興趣的文章: