網(wǎng)站首頁 編程語言 正文
本文實(shí)例為大家分享了jquery實(shí)現(xiàn)無縫輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)功能（無縫輪播圖Jquery）
利用移動(dòng)定位進(jìn)行無縫滾動(dòng)，大體實(shí)現(xiàn)點(diǎn)擊切換圖片，每張圖片對(duì)應(yīng)一個(gè)小圓點(diǎn)，并且小圓點(diǎn)點(diǎn)擊可以進(jìn)行切換。鼠標(biāo)移入停止圖片輪播
強(qiáng)調(diào)
jquery引入本地引入，你可以在網(wǎng)上導(dǎo)入
全局由index貫穿
動(dòng)畫中的回調(diào)函數(shù)
flag標(biāo)識(shí)，進(jìn)行判斷動(dòng)畫在執(zhí)行中還是執(zhí)行結(jié)束
對(duì)于圖片切換到第一張還是最后一張的處理
css代碼片段
* {
? ? 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;
? ?? ? /*進(jìn)行水平布局，與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 href="../css/icon/iconfont.css" >
? ? <link 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"></button>
? ? ? ? <button class="iconfont right"></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;?? ??? ?//定義一個(gè)標(biāo)識(shí)，來進(jìn)行判斷當(dāng)次動(dòng)畫是否已經(jīng)完成
? ? ? ? var index = 0, lastIndex = 0;?? ?//定義全局的index，與lastIndex，也就是一個(gè)起到下標(biāo)的標(biāo)識(shí)
? ? ? ? $(img_li).first().clone(true).appendTo($(ul))//克隆第一張圖片放在ul的最后
? ? ? ? //生成所有的ol>li即小圓點(diǎn)
? ? ? ? for (let i = 0; i < len; i++) {
? ? ? ? ? ? $("<li>").addClass(i === 0 ? "ac" : "").appendTo($("ol")); //三元運(yùn)算符給addClass進(jìn)行填值
? ? ? ? ? ? //給第一個(gè)小圓點(diǎn)進(jìn)行默認(rèn)樣式的設(shè)置
? ? ? ? }
? ? ? ? //小圓點(diǎn)點(diǎn)擊切換圖片
? ? ? ? $("ol li").on('click', function () {
? ? ? ? ? ? if (flag) return;?? ??? ?//標(biāo)識(shí)動(dòng)畫，動(dòng)畫未完成時(shí)，取消掉點(diǎn)擊事件
? ? ? ? ? ? flag = true;?? ??? ??? ?//動(dòng)畫完成是執(zhí)行點(diǎn)擊事件的代碼
? ? ? ? ? ? lastIndex = index;?? ??? ?//記錄上次的點(diǎn)擊的index的值
? ? ? ? ? ? index = $(this).index();?? ??? ?//將小圓點(diǎn)的小標(biāo)賦值給index
? ? ? ? ? ? $("ol li").eq(lastIndex).removeClass("ac")
? ? ? ? ? ? $(this).addClass("ac");?? ??? ?//將樣式進(jìn)行toggle
? ? ? ? ? ? $(ul).animate({ left: -index * width }, 1000, function () //jquery的自定義動(dòng)畫方法
? ? ? ? ? ? ? ? flag = false;//回調(diào)函數(shù)將在動(dòng)畫結(jié)束之后將標(biāo)識(shí)變?yōu)閠rue，以便于執(zhí)行下一次點(diǎn)擊事件
? ? ? ? ? ? })
? ? ? ? })
? ? ? ? //點(diǎn)擊下一張進(jìn)行切換
? ? ? ? $(".right").on('click', function () {
? ? ? ? ? ? if (flag) return;?? ??? ?
? ? ? ? ? ? flag = true;?? ??? ?
? ? ? ? ? ? lastIndex = index;?? ??? ?
? ? ? ? ? ? index++;?? ??? ?//將index進(jìn)行++，使其向下一張輪播
? ? ? ? ? ? if (index === len) {?? ??? ?//當(dāng)輪播到最后一張clone的圖片時(shí)
? ? ? ? ? ? ? ? index = 0;?? ??? ??? ??? ?//將index賦值為0，讓小圓點(diǎn)正常執(zhí)行
? ? ? ? ? ? ? ? $(ul).animate({ left: -len * width }, 1000, function () {//讓動(dòng)畫繼續(xù)執(zhí)行到clone的那張圖片
? ? ? ? ? ? ? ? ? ? flag = false;?? ??? ?
? ? ? ? ? ? ? ? ? ? $(ul).css("left", 0)?? ?//當(dāng)執(zhí)行到最后一張clone的圖片，執(zhí)行完成時(shí)，立馬瞬移到第一張圖片
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? $(ul).animate({ left: -index * width }, 1000, function () {
? ? ? ? ? ? ? ? ? ? flag = false
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? ? $("ol li").eq(lastIndex).removeClass("ac")?? ?//給相應(yīng)的小圓點(diǎn)進(jìn)行樣式設(shè)置
? ? ? ? ? ? $("ol li").eq(index).addClass("ac")
? ? ? ? })
? ? ? ? //點(diǎn)擊上一張進(jìn)行切換
? ? ? ? //與點(diǎn)擊下一張進(jìn)行切換思想一致
? ? ? ? $(".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")
? ? ? ? })
? ? ? ? //自動(dòng)播放
? ? ? ? $(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>原文鏈接：https://blog.csdn.net/boylzh/article/details/103645297
相關(guān)推薦
- 2022-10-10 VMware?Workstation與Device/Credential?Guard不兼容的解決_V
- 2022-08-11 C++使用boost::lexical_cast進(jìn)行數(shù)值轉(zhuǎn)換_C 語言
- 2022-03-31 Linux中Go環(huán)境配置和GoModule常用操作_Golang
- 2023-01-01 matplotlib基本圖形繪制操作實(shí)例_python
- 2022-06-17 docker上快速搭建gitlab、gitlab-runer及實(shí)現(xiàn)CI/CD功能_docker
- 2023-02-10 Golang中interface的基本用法詳解_Golang
- 2022-04-17 python中random隨機(jī)函數(shù)詳解_python
- 2024-01-10 右鍵添加 idea 打開功能
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版（
- Linux 中運(yùn)行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符，流程控制 Flo
- 1. Int 和Integer 的區(qū)別，Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤：Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動(dòng)態(tài)字符串（SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列，發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支
提供CDN加速