我之前写过一个简易版的自动+手动轮播图:简易轮播图
但是这个轮播图在切换的时候是没有实现无缝滚动的,每张图片都是单张切换的,而不是滑动。现在用JQuery实现无缝连接的轮播图。
无缝连接的轮播图的原理如下:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>无缝轮播图</title> </head> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; text-decoration: none; } #container { position: relative; /*轮播图容器的宽高*/ width: 500px; height: 260px; margin: 20px auto; overflow: hidden; /*溢出隐藏:只显示一张图片*/ } #container .wrapper { position: absolute; top: 0; left: 0; /*每张图片的宽度和轮播图容器的宽度相等, 整个图片层长度:500*5=2500,由于克隆了一张,多加一张宽度*/ width: 3000px; height: 100%; } #container .wrapper li { width: 500px; height: 100%; float: left; } #container .wrapper li img { width: 100%; height: 100%; vertical-align: middle; /*去掉未浮动时图片间的上下空隙*/ } #container .btnLeft, #container .btnRight { display: none; z-index: 999; width: 30px; height: 30px; position: absolute; top: 50%; margin-top: -15px; background-color: #9E9E9E; border-radius: 20%; opacity: 60%; font-size: 20px; color: #673ab7; text-align: center; line-height: 30px; } #container .btnLeft { left: 0; } #container .btnRight { right: 0; } #container .btnLeft:hover, #container .btnRight:hover { opacity: 70%; cursor: pointer; } /* 鼠标滑过图片的时候显示按钮 */ #container:hover .btnLeft, #container:hover .btnRight { display: block; } /*圆点层*/ #container .dots { background: rgba(0, 0, 0, .3); position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 999; padding: 4px; border-radius: 24px; } #container .dots li { width: 15px; height: 15px; border-radius: 50%; background-color: #9e9e9e; float: left; /*可以使用行块盒*/ /*display: inline-block;*/ margin: 0 5px; cursor: pointer; } #container .dots li.active { background-color: #c74b42; } .clearfix::after { content: ""; display: block; clear: both; } </style> <body> <!-- 实现轮播图的容器 --> <div id="container"> <!-- 存放全部图片的容器 --> <div class="wrapper"> <!-- LI: 每张图片 --> <li><img src="/UploadFiles/2021-04-02/0.jpg"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>无缝轮播图</title> </head> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; text-decoration: none; } #container { position: relative; /*轮播图容器的宽高*/ width: 500px; height: 260px; margin: 20px auto; overflow: hidden; /*溢出隐藏:只显示一张图片*/ } #container .wrapper { position: absolute; top: 0; left: 0; /*每张图片的宽度和轮播图容器的宽度相等, 整个图片层长度:500*5=2500,由于克隆了一张,多加一张宽度*/ width: 3000px; height: 100%; } #container .wrapper li { width: 500px; height: 100%; float: left; } #container .wrapper li img { width: 100%; height: 100%; vertical-align: middle; /*去掉未浮动时图片间的上下空隙*/ } #container .btnLeft, #container .btnRight { display: none; z-index: 999; width: 30px; height: 30px; position: absolute; top: 50%; margin-top: -15px; background-color: #9E9E9E; border-radius: 20%; opacity: 60%; font-size: 20px; color: #673ab7; text-align: center; line-height: 30px; } #container .btnLeft { left: 0; } #container .btnRight { right: 0; } #container .btnLeft:hover, #container .btnRight:hover { opacity: 70%; cursor: pointer; } /* 鼠标滑过图片的时候显示按钮 */ #container:hover .btnLeft, #container:hover .btnRight { display: block; } /*圆点层*/ #container .dots { background: rgba(0, 0, 0, .3); position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 999; padding: 4px; border-radius: 24px; } #container .dots li { width: 15px; height: 15px; border-radius: 50%; background-color: #9e9e9e; float: left; /*可以使用行块盒*/ /*display: inline-block;*/ margin: 0 5px; cursor: pointer; } #container .dots li.active { background-color: #c74b42; } .clearfix::after { content: ""; display: block; clear: both; } </style> <body> <!-- 实现轮播图的容器 --> <div id="container"> <!-- 存放全部图片的容器 --> <div class="wrapper"> <!-- LI: 每张图片 --> <li><img src="/UploadFiles/2021-04-02/0.jpg">JS部分:index.js
function debounce(func, wait, immediate) { let timer = null, result = null; return function anonymous(...args) { let context = this, now = immediate && !timer; clearTimeout(timer); timer = setTimeout(() => { timer = null; !immediate "#container"), $wrapper = $container.children(".wrapper"), $btnLeft = $container.find(".btnLeft"), $btnRight = $container.find(".btnRight"), $dots = $container.find(".dots"), $dotList = $dots.find("li"); let autoTimer = null, interval = 2000, imgIndex = 0; //当前轮播的图片索引,默认第一张 // 自动轮播 function autoPlay() { // 让wrapper向左移动 imgIndex++; /* if(imgIndex === 4) imgIndex = 0; 这样写会导致图片会一下变到第一张,不是无缝滚动 无缝滚动: 1. 把第一张克隆一份放到末尾,wrapper中会比真实的图片层多一张 2. 依然一张张往后滚动,滚动到第5张的时候,继续向后走(imgIndex=6),看到了克隆的第一张,再要向后走的时候, 让其“立即”跳转到真实的第一张(肉眼看不出跳转),然后运动到第二张...... */ if (imgIndex > 5) { // 上次显示的是克隆的那张,忽略真实的第一张,让其立即跳转到第二张 $wrapper.css("left", 0); imgIndex = 1; } // 匀速向左移动 // 无动画版:$wrapper.css('transform', 'translate(' + (-imgIndex * 500) + 'px)'); // 动画版: $wrapper.stop().animate({ left: -imgIndex * 500 //JQ自动补'px' }, 300); showDots(); } // 圆点对焦 function showDots() { // 由于不能修改imgIndex的值,所以定义一个临时变量 let temp = imgIndex; temp === 5 "active"); return; } $item.removeClass("active"); }); } //点击圆点 function clickDots() { $dotList.click(debounce(function () { let index = $(this).index(); imgIndex = index; $wrapper.stop().animate({ left: -imgIndex * 500 //JQ自动补'px' }, 300); showDots(); },300,true)); } // 左右按键 function btnClick() { $btnLeft.click(function () { imgIndex--; if (imgIndex < 0) { // 上次显示的是真实的第一张,忽略克隆的倒数第一张,让其立即跳转倒数第二张 $wrapper.css('left', -2500); imgIndex = 4; } $wrapper.stop().animate({ left: -imgIndex * 500 //JQ自动补'px' }, 300); showDots(); }); // 右键点击:相当于自动轮播 $btnRight.click(debounce(autoPlay, 300, true)); } return { init: function () { autoTimer = setInterval(autoPlay, interval); // 鼠标进入/离开轮播区域时停止/开启自动轮播 $container.on("mouseenter", () => { clearInterval(autoTimer); }); $container.on("mouseleave", () => { autoTimer = setInterval(autoPlay, interval); }); clickDots(); btnClick(); }, }; })(); bannerModule.init();以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- 任天堂今晚举行直面会!第三方及独立游戏展示
- 《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A梦
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
- 陈奕迅.2013-Easons.Life演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许美静.1995-遗憾(新马版)【上华】【WAV+CUE】
- 《叶倩文 歌声情缘》[WAV+CUE][410MB]
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-7