脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js轮播图自动切换

js实现轮播图自动切换

 更新时间：2022年07月12日 08:40:53   作者：聪明的加菲猫  
这篇文章主要为大家详细介绍了js实现轮播图自动切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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;
}

js

<!DOCTYPE html>
<html lang="en">
<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 class="loopbox">
    <div id="box" class="box">
        <div class="box-item curr"><img src="images/1.webp"></div>
        <div class="box-item"><img src="images/2.webp"></div>
        <div class="box-item"><img src="images/3.webp"></div>
        <div class="box-item"><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" class="page">
        <li class="current"></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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • javascript函数中参数传递问题示例探讨

    javascript函数中参数传递问题示例探讨

    本节主要与大家探讨下javascript函数中参数传递问题，有不明白的朋友可以参考下
    2014-07-07
  • js前端传json后台接收‘‘被转为quot的问题解决

    js前端传json后台接收‘‘被转为quot的问题解决

    这篇文章主要介绍了js前端传json后台接收‘‘被转为&quot;的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • 前端项目部署后如何提示用户版本更新详解

    前端项目部署后如何提示用户版本更新详解

    这篇文章主要给大家介绍了关于前端项目部署后如何提示用户版本更新的相关资料,文中通过代码介绍的非常详细,对大家的工作或者学习具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-03-03
  • uniapp中实现canvas超出屏幕滚动查看功能

    uniapp中实现canvas超出屏幕滚动查看功能

    亲爱的小伙伴,当你需要在uniapp中使用canvas绘制一个超长图,就类似于横向的流程图时,这个canvas超出屏幕部分拖动屏幕查看会变得十分棘手,怎么解决这个问题呢,下面小编给大家介绍uniapp中实现canvas超出屏幕滚动查看功能,感兴趣的朋友一起看看吧
    2024-03-03
  • JavaScript实现三级联动效果

    JavaScript实现三级联动效果

    这篇文章主要为大家详细介绍了JavaScript实现三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 用js控制视频播放进度基本示例代码

    用js控制视频播放进度基本示例代码

    写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-04-04
  • JS input文本框禁用右键和复制粘贴功能的代码

    JS input文本框禁用右键和复制粘贴功能的代码

    由于项目要求，有些文本框需要禁用掉右键和复制粘贴的功能，昨天刚刚用JS实现。
    2010-04-04
  • 固定表格行列(expression)在IE下适用

    固定表格行列(expression)在IE下适用

    本文为大家介绍下使用expression固定表格行列，这是一种在IE下适用的固定行列的方法，感兴趣的朋友可以学习下，希望对大家有所帮助
    2013-07-07
  • js方块躲避游戏代码

    js方块躲避游戏代码

    鼠标控制，空色方块不要让蓝色方块碰到就可以，看能玩多久，是个javascript不错的一个游戏啊，想用js写游戏的朋友可以参考下，看代码应该是国外的人写的
    2008-05-05
  • Markdown与Bootstrap相结合实现图片自适应属性

    Markdown与Bootstrap相结合实现图片自适应属性

    Markdown 是一种轻量级的标记语言，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。接下来通过本文给大家介绍Markdown与Bootstrap相结合实现图片自适应属性，感兴趣的朋友一起学习吧
    2016-05-05

最新评论