js轮播图

最新推荐文章于 2023-09-17 14:12:21 发布
最新推荐文章于 2023-09-17 14:12:21 发布
阅读量49 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61685370/article/details/125840970
版权

最垃圾的轮播图

<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>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        div{

            position: relative;

        margin: 0 auto;

     

        }

        body{

            z-index: 10000;        

        }

        ul{

            list-style: none;

            display: flex;

            position: relative;

           

        }

        .one>li{

            width: 500px;

            height: 300px;

            position: absolute;

            left: 50%;

            margin-left:-250px;

        }

        .one>:nth-last-child(4){

            background-color: blanchedalmond;

        }

        .one>:nth-last-child(3){

            background-color: rgb(73, 3, 186);

        }

        .one>:nth-last-child(2){

            background-color: rgb(102, 4, 70);

        }

        .one>:nth-last-child(1){

            background-color: rgb(3, 88, 0);

           

        }

        .one>:nth-last-child(5){

            background-color: rgb(211, 203, 203);

           

        }

        .one>:nth-last-child(6){

            background-color: rgb(147, 0, 0);

         

        }

       .qq{

        z-index: 1;

       }

       #long{

        width: 25px;

        height: 80px;

        position: absolute;

            left: 50%;

            margin-left:225px;

            margin-top: 110px;

            z-index: 1000000000;

            opacity: 0.5;

       }

       #mong{

        width: 25px;

        height: 80px;

        position: absolute;

            left: 50%;

            margin-left:-250px;

            margin-top: 110px;

            z-index: 1000000000;

            opacity: 0.5;

       }

       .two{

        z-index: 544455448848;

       width: 250px;

       height: 120px;

       margin: 0 50%;

       margin-top: 250px;

     

       }

       .two>li{

      width: 20px;

      height: 20px;

      border: 1px solid violet;

      border-radius: 50%;

    margin-left: 12px;

   background-color: black;

       }

    </style>

</head>

<body>

    <div class="">

        <ul class="one">

            <li class="oo  qq">0</li>

            <li class="oo">1</li>

            <li class="oo">2</li>

            <li class="oo">3</li>

            <li class="oo">4</li>

            <li class="oo">5</li>

        </ul>

        <button id="long" οnclick="one()">></button>

        <button id="mong" οnclick="two()"><</button>

    </div>

    <ul class="two">

        <li class="jong"></li>

        <li class="jong"></li>

        <li class="jong"></li>

        <li class="jong"></li>

        <li class="jong"></li>

        <li class="jong"></li>

    </ul>

</body>

<script>

    var ul= document.getElementsByClassName('oo')

    var long = document.getElementById('long')

    var mong = document.getElementById('mong')

    var jongs = document.getElementsByClassName('jong')

    var bodys = document.getElementsByTagName("div")

    var i =0;

    var p= 2

    //左切换

  function one(){

   

   if(i<ul.length-1){

    i++

    ul[i].style.zIndex=p

    console.log('i'+i);

    console.log(p)

    p++

  }else if(i=ul.length-1){

        i=0

        ul[i].style.zIndex=p

    console.log(i);

    console.log(p)

    p++

  }

  }

  //右切换

  function two(){

   

if(i!=0){

   

    i--

    ul[i].style.zIndex=p

    p++

}else{

    i=ul.length-1

ul[i].style.zIndex=p

p++

}

  }


 

  //自动轮播

    var aaa=setInterval('one()',1500)


 

//    console.log(jongs);

   for (var u = 0, len = jongs.length; u < len; u++) {

  (function (j) {

    //点圆点切换对应的图

    jongs[j].onclick = function () {

        p++

        ul[j].style.zIndex=p

        console.log(p);

    }

    var  ppo=2

   

    //点击停止自动轮播

  if(ppo%2==0){

        ppo++

        ul[j].onclick = function(){

    clearInterval(aaa)

    // console.log(ppo);

   

    } }

  })(u)

}



 

</script>

</html>

箱子?
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
js轮播图片小圆点变化_原生js实现轮播图的示例代码
weixin_39855186的博客
12-21 1122
很多网站上都有轮播图，但却很难找到一个系统讲解的，因此这里做一个简单的介绍，希望大家都能有所收获，如果有哪些不正确的地方，希望大家可以指出。原理：将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。步骤一：建立html基本布局如下所示：轮播图 12345<>只有五张图片，却使用7张来轮播，这是...
JavaScript案例-js轮播图
02-16
在这个"JavaScript案例-js轮播图"中，我们将深入探讨如何使用纯JavaScript实现一个功能完善的轮播图效果。 首先，轮播图是网页设计中常见的元素，它允许展示一组图片或内容，并在用户交互或定时自动切换之间进行...
JS 轮播图 图片切换（定时器）
热门推荐
qq_38318589的博客
08-13 4万+
JS 轮播图 图片切换（定时器） 这次的轮播图与上次的图片切换相比，仅仅是加上了定时器，使其可以自动切换。 上次的图片切换的链接：https://blog.csdn.net/qq_38318589/article/details/99050117
JS轮播图详解
最新发布
weixin_75154342的博客
09-17 3719
JS轮播图的实现核心是使用JavaScript来控制图片的切换和显示，配合HTML和CSS完成布局和样式设置。通过定时器实现图片的自动切换，并通过事件监听器实现对鼠标事件的响应。CSS样式：通过CSS样式对容器和列表进行布局和样式设置，例如设置容器的宽度、高度、背景色等，并设置列表项的宽度和高度，以及布局方式，使图片水平排列在一行。调整功能和样式：根据需求，可以进一步调整轮播图的功能和样式，例如添加左右切换按钮、指示器、淡入淡出效果等。HTML结构：首先，在HTML中创建一个包含轮播图的容器，通常使用。
javascript轮播图超详细
周百万的博客
07-06 1万+
鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况...
js轮播图实现
qq_53843555的博客
05-29 5302
使用js实现轮播图
【JS基础】JavaScript轮播图代码详解
qq_44580366的博客
07-06 4999
小米轮播图 js 轮播图效果 JavaScript基础项目
JavaScript轮播图
Junnix的博客
01-09 535
JavaScript轮播图 <!-- 定义初始页面图片 --> <img id="and" src="img/1.jpg" width="100%" height="30%"> <script> var i=1; function fun(){ i++ while(i>3){ i=1 }
原生JavaScript轮播图功能的实现
欢愉码农的博客
06-13 1551
class = "current" 用于定位当前显示图片所在位置。
JS轮播图的n种方法
Benxiaohai_311的博客
03-22 1万+
第一种 轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一种轮播图，没有耳朵，自动轮播，鼠标放上去会停止，只需在body里面更改图片宽高和图片路径</title> <style> *.
JavaScript之手把手教你做轮播图
跳探戈的小龙虾的博客
04-08 1万+
我教你做的轮播图包括但不限于以下功能： 平滑滚动、定时滚动 + 点击滚动、防鼠标连续点击、第一张图与最后一张图无缝处理 如果你是在找轮播图怎么做的小白，那么恭喜你，找到我这儿，不用再换了，认认真真看完这篇文章，我保证你能做一个完整的轮播图。 而且我会以面向小白的简单通俗讲解，带大家做完轮播图，保证全程没有盲点。 不过前提是，有简单的jQuery基础和会用setTimeout()和setInterval()函数，这两个要求可以在我的其他博客里学习到。
JavaScript 轮播图.rar
04-08
JavaScript（可能在javascript文件夹中的script.js）是实现轮播图动态功能的关键。主要功能包括： 1. 初始化：获取DOM元素，如轮播图容器、图片列表、控制按钮等，并设置初始状态，比如第一张图片显示，其他隐藏。 ...
JavaScript实现简单图片轮播效果
10-19
主要介绍了JavaScript实现简单图片轮播效果，点击下标切换到该图片上，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javaScript轮播图实现代码
07-07
JavaScript轮播图是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或用户交互来呈现连续播放的效果。在给定的资源中，我们有`index.html`作为主页面，`images`目录则包含轮播图所需的图片。以下是...
js轮播图_javascript_
10-03
这个简单的JavaScript轮播图只是一个起点，开发者可以根据需求进行扩展和定制，例如添加触摸滑动支持、响应式设计等，以适应不同设备和屏幕尺寸。通过不断学习和实践，您可以创建出功能丰富、用户体验优秀的轮播图...
手写js轮播图.zip
08-20
这些都是JavaScript轮播图进阶的话题，可以根据实际需求进一步学习和拓展。 总之，手写JavaScript轮播图涉及到HTML布局、CSS样式以及JavaScript事件处理和DOM操作。通过实践，你可以更深入地理解这些基本概念，同时...
JS轮播图的实现方法2
12-28
本文实例为大家分享了JS轮播图的实现代码，供大家参考，具体内容如下 需求： 自动轮播，鼠标移入轮播停止、移出继续，小圆点点击切图，左右箭头切图 效果图： ![轮播图] 思路： 将所有需要轮播的图片横向排列，...
纯js实现轮播图(3种轮播图).zip
12-28
在前端开发中，轮播图（Carousel）是一种常见的网页元素，用于展示一组可滑动切换的图片或内容。本资源包含纯JavaScript实现的三种不同类型的轮播图，这对于熟悉JavaScript和想要提升前端技能的开发者来说，是一份...
js图片轮播手动切换效果
11-22
本实例采用了一个名为`ScrollPicLeft.js`的JavaScript库，该库无需依赖jQuery，使得图片轮播可以手动通过点击切换箭头按钮来实现。这样既保留了用户交互性，又避免了传统`<marquee>`标签滚动的机械感。 以下是对`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

箱子?

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值