利用js实现轮播图自动切换

3403771864 发布于2022-10-27 21:35 / 256人阅读

　　实现轮播图自动切换就用JS，先看效果图

　　第一种

　　//点击按钮，序号变化
　　showIdx++;
　　if (showIdx == imgArr.length) {
　　showIdx = 0;
　　}
　　//所有盒子左移动
　　for (let i = 0; i <items.length; i++) {
　　items[i].style.left = parseFloat(items[i].style.left) - loopbox.offsetWidth + "px";
　　}
　　//冗余容器从页面中删除
　　//当冗余容器从页面中移除后，为了保证结构想对应，所以呀item中数组也要把这个容器删除
　　let deleteBox = items.shift();
　　// console.log(items);
　　deleteBox.remove();
　　//在用户看不到的内存中，变更【被从这个页面删除的元素的位置
　　deleteBox.style.left = "900px";
　　wrapper.appendChild(deleteBox);
　　items.push(deleteBox);
　　//把容器从小添加至压面后，容器加载的图片在当前的下一站
　　// 第七步 把容器重新添加至页面后，容器加载的图片要是当前这张的下一张
　　if (showIdx == imgArr.length - 1) {
　　deleteBox.innerHTML = `<img src=${imgArr[0]}>`;
　　} else {
　　deleteBox.innerHTML = `<img src=${imgArr[showIdx + 1]}>`;
　　}

　　第二种，图片切换，css代码

　　html,
　　body,
　　ul,
　　li {
　　margin: 0;
　　padding: 0;
　　}
　　a {
　　text-decoration: none;
　　}
　　.loopbox {
　　width: 1226px;
　　height: 460px;
　　background: #030;
　　position: relative;
　　overflow: hidden;
　　}
　　.box {
　　width: 100%;
　　height: 100%;
　　float: left;
　　transition: all .3s;
　　position: absolute;
　　left: 0;
　　/* overflow: hidden; */
　　}
　　.box.notran{
　　transition: none;
　　}
　　.box-item {
　　/* width: 100%; */
　　width: 1226px;
　　height: 100%;
　　float: left;
　　background: #f1f1f1;
　　text-align: center;
　　font-size: 24px;
　　line-height: 100px;
　　/* display: none; */
　　/* transition: all .3s; */
　　}
　　.box-item img {
　　width: 100%;
　　height: 100%;
　　/* 图片适应 */
　　object-fit: cover;
　　}
　　.arrow {
　　width: 60px;
　　line-height: 30px;
　　background: #f00;
　　text-align: center;
　　color: #f1f1f1;
　　position: absolute;
　　top: 50%;
　　left: 10px;
　　margin-top: -15px;
　　border-radius: 15px;
　　}
　　.arrow:hover {
　　background: #f60;
　　}
　　.arrow.arrow-right {
　　left: auto;
　　right: 10px;
　　}
　　.page {
　　position: absolute;
　　width: 100%;
　　text-align: center;
　　bottom: 10px;
　　}
　　.page li {
　　display: inline-block;
　　width: 80px;
　　height: 8px;
　　border-radius: 4px;
　　background: #000;
　　}
　　/* .page li:first-child {
　　background: #f90;
　　} */
　　.page li:hover {
　　background: #f60;
　　}
　　.page li.current {
　　background: #f90;
　　}
　　.side-qq {
　　width: 100px;
　　height: 100px;
　　background: #f00;
　　/* position: fixed; */
　　position: absolute;
　　right: 10px;
　　top: 450px;
　　}
　　.navbar {
　　width: 100%;
　　background: #ccc;
　　text-align: center;
　　}
　　.navbar.fixed {
　　position: fixed;
　　left: 0;
　　top: 0;
　　}
　　.nav {
　　height: 21px;
　　}

　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta charset="UTF-8">
　　<meta http-equiv="X-UA-Compatible" content="IE=edge">
　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　<title>Document</title>
　　<link rel="stylesheet" href="./css/index.css">
　　</head>
　　<body>
　　<!-- 1.分析页面结构 -->
　　<div>
　　<div id="box">
　　<div class="box-item curr"><img src="images/1.webp"></div>
　　<div><img src="images/2.webp"></div>
　　<div><img src="images/3.webp"></div>
　　<div><img src="images/4.webp"></div>
　　</div>
　　<a class="arrow arrow-left" href="javascript:;">左</a>
　　<a class="arrow arrow-right" href="javascript:;">右</a>
　　<ul id="page">
　　<li></li>
　　<li></li>
　　<li></li>
　　<li></li>
　　</ul>
　　</div>
　　<script>
　　// 1.5.初始化页面，保证所有的图片先拍成一排
　　let items = document.querySelectorAll(".box-item");
　　let lis = document.querySelectorAll(".page li");
　　let leftBtn=document.querySelector(".arrow-left")
　　let box = document.querySelector(".box");
　　let loopbox = document.querySelector(".loopbox");
　　box.style.width = items.length * loopbox.offsetWidth + "px";
　　box.style.left = 0+"px";
　　// 2.分析功能入口
　　let rightBtn = document.querySelector(".arrow-right");
　　let showIdx = 0;
　　rightBtn.onclick = function (){
　　items[showIdx].classList.remove("curr");
　　lis[showIdx].classList.remove("current");
　　showIdx ++;
　　if(showIdx == 4){
　　showIdx = 0;
　　}
　　items[showIdx].classList.add("curr");
　　lis[showIdx].classList.add("current");
　　box.style.left = (-1) * showIdx * loopbox.offsetWidth + "px";
　　for(let i=0;i<lis.length;i++){
　　lis[i].onclick =function(){
　　items[showIdx].classList.remove("curr");
　　lis[showIdx].classList.remove("current");
　　showIdx=i;
　　items[showIdx].classList.add("curr");
　　lis[showIdx].classList.add("current");
　　}
　　}
　　leftBtn.onclick = function(){
　　//第一张 消失（取消类名）
　　items[showIdx].classList.remove("curr");
　　lis[showIdx].classList.remove("current");
　　showIdx --;
　　//预知判断
　　if(showIdx == -1){
　　//点击之后,点击之前意味着已经在加，需要归零
　　showIdx = 3;
　　}
　　items[showIdx].classList.add("curr");
　　lis[showIdx].classList.add("current");
　　box.style.left = (-1) * showIdx * loopbox.offsetWidth + "px";
　　// 第二张 出现（添加类名）showIdx+1
　　};
　　for(let j=0;j<lis.length;j++){
　　lis[j].onclick = function(){
　　items[showIdx].classList.remove("curr");
　　lis[showIdx].classList.remove("current");
　　//选好变为点击序号对应结构
　　showIdx=j;
　　items[showIdx].classList.add("curr");
　　lis[showIdx].classList.add("current");
　　}
　　}
　　}
　　function time(){
　　items[showIdx].classList.remove("curr");
　　lis[showIdx].classList.remove("current");
　　showIdx ++;
　　if(showIdx == 4){
　　showIdx = 0;
　　}
　　items[showIdx].classList.add("curr");
　　lis[showIdx].classList.add("current");
　　box.style.left = (-1) * showIdx * loopbox.offsetWidth + "px";
　　}
　　for(let i=0;i<lis.length;i++){
　　lis[i].onclick =function(){
　　items[showIdx].classList.remove("curr");
　　lis[showIdx].classList.remove("current");
　　showIdx=i;
　　items[showIdx].classList.add("curr");
　　lis[showIdx].classList.add("current");
　　}
　　}
　　setInterval(time,3000)
　　</script>
　　</body>
　　</html>

　　学习要多实践才可以多记住。

云服务器专线服务 html轮播图自动 react实现轮播图 js轮播图视频 js焦点轮播图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128223.html

实现简单的轮播图

摘要：小练习轮播图组件任务描述在和上一任务同一目录下面创建一个文件，在目录中创建，并在其中编码，实现一个轮播图的功能。实现思路考察对节点，定时器，事件的处理。小练习3：轮播图组件任务描述在和上一任务同一目录下面创建一个task0002_3.html文件，在js目录中创建task0002_3.js，并在其中编码，实现一个轮播图的功能。图片数量及URL均在HTML中写好可以配置轮播的顺...

EsgynChina 2019-08-22 10:39 评论0 收藏0
JS -- 记一种用原生JS 实现轮播图的方法（非无限循环不自动切换）

摘要：实现一个非无限循环不自动切换的轮播图只需要几张图片和两个按钮简化部分两个按钮，几张图片假如有四张图右侧按钮左侧按钮部分动态添加删除的属性部分已是最后一张图这是第一张图实现一个非无限循环不自动切换的轮播图只需要几张图片和两个按钮（简化） HTML部分两个按钮，几张图片（假如有四张图）右侧按钮左侧按钮 CSS部分动态...

hidogs 2019-08-23 10:44 评论0 收藏0
手把手教你用原生JavaScript造轮子（2）——轮播图（更新：ES6版本）

摘要：绑定轮播事件然后是鼠标移入移出事件的绑定鼠标移入移出事件移入时停止轮播播放的定时器，移出后自动开始下一张的播放。通过上一篇文章的学习，我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图，希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Lets begin! 目前项目使用 ES5及UMD 规范封装，所以在前端暂时只支持标签的引入方式...

jasperyang 2019-08-23 10:57 评论0 收藏0
授人以渔式解析原生JS写轮播图

摘要：鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，鼠标移开时左右箭头隐藏掉并且自动轮播。核心原理清除定时器，绑定事件，重构下代码封装出往右往左轮播函数和自动轮播函数。需求与分析需求：循环无缝自动轮播五张图，按左右箭头可以手动切换图片，鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，...

Zack 2019-08-29 16:58 评论0 收藏0
授人以渔式解析原生JS写轮播图

摘要：鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，鼠标移开时左右箭头隐藏掉并且自动轮播。核心原理清除定时器，绑定事件，重构下代码封装出往右往左轮播函数和自动轮播函数。需求与分析需求：循环无缝自动轮播五张图，按左右箭头可以手动切换图片，鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，...

SKYZACK 2019-08-02 11:42 评论0 收藏0
授人以渔式解析原生JS写轮播图

摘要：鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，鼠标移开时左右箭头隐藏掉并且自动轮播。核心原理清除定时器，绑定事件，重构下代码封装出往右往左轮播函数和自动轮播函数。需求与分析需求：循环无缝自动轮播五张图，按左右箭头可以手动切换图片，鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，...

Pink 2019-08-23 12:22 评论0 收藏0