menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

二种方法js实现轮播图自动切换

武飞扬头像
聪明的加菲猫
帮助1人

先看效果图

学新通

第一种

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

学新通

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

  1.  
    html,
  2.  
    body,
  3.  
    ul,
  4.  
    li {
  5.  
    margin: 0;
  6.  
    padding: 0;
  7.  
    }
  8.  
     
  9.  
    a {
  10.  
    text-decoration: none;
  11.  
    }
  12.  
     
  13.  
    .loopbox {
  14.  
    width: 1226px;
  15.  
    height: 460px;
  16.  
    background: #030;
  17.  
    position: relative;
  18.  
    overflow: hidden;
  19.  
    }
  20.  
     
  21.  
    .box {
  22.  
    width: 100%;
  23.  
    height: 100%;
  24.  
    float: left;
  25.  
    transition: all .3s;
  26.  
    position: absolute;
  27.  
    left: 0;
  28.  
    /* overflow: hidden; */
  29.  
    }
  30.  
    .box.notran{
  31.  
    transition: none;
  32.  
    }
  33.  
     
  34.  
    .box-item {
  35.  
    /* width: 100%; */
  36.  
    width: 1226px;
  37.  
    height: 100%;
  38.  
    float: left;
  39.  
    background: #f1f1f1;
  40.  
    text-align: center;
  41.  
    font-size: 24px;
  42.  
    line-height: 100px;
  43.  
    /* display: none; */
  44.  
    /* transition: all .3s; */
  45.  
    }
  46.  
     
  47.  
    .box-item img {
  48.  
    width: 100%;
  49.  
    height: 100%;
  50.  
    /* 图片适应 */
  51.  
    object-fit: cover;
  52.  
    }
  53.  
     
  54.  
    .arrow {
  55.  
    width: 60px;
  56.  
    line-height: 30px;
  57.  
    background: #f00;
  58.  
    text-align: center;
  59.  
    color: #f1f1f1;
  60.  
    position: absolute;
  61.  
    top: 50%;
  62.  
    left: 10px;
  63.  
    margin-top: -15px;
  64.  
    border-radius: 15px;
  65.  
    }
  66.  
     
  67.  
    .arrow:hover {
  68.  
    background: #f60;
  69.  
    }
  70.  
     
  71.  
    .arrow.arrow-right {
  72.  
    left: auto;
  73.  
    right: 10px;
  74.  
    }
  75.  
     
  76.  
    .page {
  77.  
    position: absolute;
  78.  
    width: 100%;
  79.  
    text-align: center;
  80.  
    bottom: 10px;
  81.  
    }
  82.  
     
  83.  
    .page li {
  84.  
    display: inline-block;
  85.  
    width: 80px;
  86.  
    height: 8px;
  87.  
    border-radius: 4px;
  88.  
    background: #000;
  89.  
    }
  90.  
    /* .page li:first-child {
  91.  
    background: #f90;
  92.  
    } */
  93.  
     
  94.  
    .page li:hover {
  95.  
    background: #f60;
  96.  
    }
  97.  
     
  98.  
    .page li.current {
  99.  
    background: #f90;
  100.  
    }
  101.  
     
  102.  
    .side-qq {
  103.  
    width: 100px;
  104.  
    height: 100px;
  105.  
    background: #f00;
  106.  
    /* position: fixed; */
  107.  
    position: absolute;
  108.  
    right: 10px;
  109.  
    top: 450px;
  110.  
    }
  111.  
     
  112.  
    .navbar {
  113.  
    width: 100%;
  114.  
    background: #ccc;
  115.  
    text-align: center;
  116.  
    }
  117.  
     
  118.  
    .navbar.fixed {
  119.  
    position: fixed;
  120.  
    left: 0;
  121.  
    top: 0;
  122.  
    }
  123.  
     
  124.  
    .nav {
  125.  
    height: 21px;
  126.  
    }
学新通

js

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
    <title>Document</title>
  8.  
    <link rel="stylesheet" href="./css/index.css">
  9.  
    </head>
  10.  
    <body>
  11.  
    <!-- 1.分析页面结构 -->
  12.  
    <div class="loopbox">
  13.  
    <div id="box" class="box">
  14.  
    <div class="box-item curr"><img src="images/1.webp"></div>
  15.  
    <div class="box-item"><img src="images/2.webp"></div>
  16.  
    <div class="box-item"><img src="images/3.webp"></div>
  17.  
    <div class="box-item"><img src="images/4.webp"></div>
  18.  
    </div>
  19.  
    <a class="arrow arrow-left" href="javascript:;">左</a>
  20.  
    <a class="arrow arrow-right" href="javascript:;">右</a>
  21.  
    <ul id="page" class="page">
  22.  
    <li class="current"></li>
  23.  
    <li></li>
  24.  
    <li></li>
  25.  
    <li></li>
  26.  
    </ul>
  27.  
    </div>
  28.  
    <script>
  29.  
    // 1.5.初始化页面，保证所有的图片先拍成一排
  30.  
    let items = document.querySelectorAll(".box-item");
  31.  
    let lis = document.querySelectorAll(".page li");
  32.  
    let leftBtn=document.querySelector(".arrow-left")
  33.  
    let box = document.querySelector(".box");
  34.  
    let loopbox = document.querySelector(".loopbox");
  35.  
    box.style.width = items.length * loopbox.offsetWidth "px";
  36.  
    box.style.left = 0 "px";
  37.  
    // 2.分析功能入口
  38.  
    let rightBtn = document.querySelector(".arrow-right");
  39.  
     
  40.  
    let showIdx = 0;
  41.  
    rightBtn.onclick = function (){
  42.  
    items[showIdx].classList.remove("curr");
  43.  
    lis[showIdx].classList.remove("current");
  44.  
    showIdx ;
  45.  
    if(showIdx == 4){
  46.  
    showIdx = 0;
  47.  
    }
  48.  
    items[showIdx].classList.add("curr");
  49.  
    lis[showIdx].classList.add("current");
  50.  
    box.style.left = (-1) * showIdx * loopbox.offsetWidth "px";
  51.  
    for(let i=0;i<lis.length;i ){
  52.  
     
  53.  
    lis[i].onclick =function(){
  54.  
     
  55.  
    items[showIdx].classList.remove("curr");
  56.  
    lis[showIdx].classList.remove("current");
  57.  
    showIdx=i;
  58.  
    items[showIdx].classList.add("curr");
  59.  
    lis[showIdx].classList.add("current");
  60.  
    }
  61.  
    }
  62.  
    leftBtn.onclick = function(){
  63.  
    //第一张 消失（取消类名）
  64.  
    items[showIdx].classList.remove("curr");
  65.  
    lis[showIdx].classList.remove("current");
  66.  
    showIdx --;
  67.  
    //预知判断
  68.  
    if(showIdx == -1){
  69.  
    //点击之后,点击之前意味着已经在加，需要归零
  70.  
    showIdx = 3;
  71.  
    }
  72.  
    items[showIdx].classList.add("curr");
  73.  
    lis[showIdx].classList.add("current");
  74.  
    box.style.left = (-1) * showIdx * loopbox.offsetWidth "px";
  75.  
    // 第二张 出现（添加类名）showIdx 1
  76.  
    };
  77.  
    for(let j=0;j<lis.length;j ){
  78.  
    lis[j].onclick = function(){
  79.  
    items[showIdx].classList.remove("curr");
  80.  
    lis[showIdx].classList.remove("current");
  81.  
    //选好变为点击序号对应结构
  82.  
    showIdx=j;
  83.  
    items[showIdx].classList.add("curr");
  84.  
    lis[showIdx].classList.add("current");
  85.  
    }
  86.  
     
  87.  
    }
  88.  
     
  89.  
     
  90.  
    }
  91.  
    function time(){
  92.  
    items[showIdx].classList.remove("curr");
  93.  
    lis[showIdx].classList.remove("current");
  94.  
    showIdx ;
  95.  
    if(showIdx == 4){
  96.  
    showIdx = 0;
  97.  
    }
  98.  
    items[showIdx].classList.add("curr");
  99.  
    lis[showIdx].classList.add("current");
  100.  
    box.style.left = (-1) * showIdx * loopbox.offsetWidth "px";
  101.  
     
  102.  
    }
  103.  
    for(let i=0;i<lis.length;i ){
  104.  
     
  105.  
    lis[i].onclick =function(){
  106.  
     
  107.  
    items[showIdx].classList.remove("curr");
  108.  
    lis[showIdx].classList.remove("current");
  109.  
    showIdx=i;
  110.  
    items[showIdx].classList.add("curr");
  111.  
    lis[showIdx].classList.add("current");
  112.  
    }
  113.  
    }
  114.  
    setInterval(time,3000)
  115.  
     
  116.  
     
  117.  
    </script>
  118.  
    </body>
  119.  
    </html>
学新通

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhhachci
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群