JS循环轮播图

最新推荐文章于 2022-08-24 15:15:30 发布
最新推荐文章于 2022-08-24 15:15:30 发布
阅读量404 收藏 1
点赞数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1022数组</title>
    <style>
        #container{
            position: relative;
            height: 400px;
            width: 1240px;
            margin: 50px auto;
        }
        .img{
            position: absolute;
            width: 450px;
            height: 300px;
            top: 50px;
            left: 395px;
            bottom: 0;
            z-index: 0;
            background-color: #404040;
            font-size: 48px;
            color: #fff;
            transition: all 0.8s ease-out;
        }
        .img:nth-of-type(1){
            width: 450px;
            height: 300px;
            top: 50px;
            left: 0;
            z-index: 1;
            opacity: 0.8;
        }
        .img:nth-of-type(2){
            width: 525px;
            height: 350px;
            top: 25px;
            left: 140px;
            z-index: 2;
            opacity: 0.9;
        }
        .img:nth-of-type(3){
            width: 600px;
            height: 400px;
            top: 0;
            left: 320px;
            z-index: 3;
            opacity: 1;
        }
        .img:nth-of-type(4){
            width: 525px;
            height: 350px;
            top: 25px;
            left: 575px;
            z-index: 2;
            opacity: 0.9;

        }
        .img:nth-of-type(5){
            width: 450px;
            height: 300px;
            top: 50px;
            left: 790px;
            z-index: 1;
            opacity: 0.8;
        }
    </style>
</head>
<body>
<div id="container">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
</div>

</body>
<script>
    var imgs = document.getElementsByClassName("img");
    var container = document.getElementById("container");
    var imgSrc = [" http://cdn.attach.qdfuns.com/notes/pics/201710/26/120712ngt2edra2crr7dgd.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120652w2q5xqqr8lt9ry7r.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120714s2o8oolp628lhnhb.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120553pqqp08q6pkkqpq8o.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120641af8ja5noa88joc8n.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120644mwoeh09r9rzwxzn8.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120725h4jskiflsivw15k1.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120635qga4ljgurljnzrvj.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120728nn78gfnyinf2gf7i.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120632lpjom8ppsl26dd68.jpg"];
    var numA = 2;
    var numB = 0;


    for (var i = 0; i < imgs.length; i ++) {
        imgs[i].src = imgSrc[i];
        imgs[i].index = i;//给每张图片添加一个序号，通过这个序号来计算套用哪个样式
    }


    for ( var  k = 0; k < imgs.length; k ++) {
        imgs[k].onclick = function () {

            //通过激活序号(numA)和当前按钮序号(numB)的差算出新的序号,用for来更新一遍
            numB = this.index;
            for (var i = 0; i < imgs.length; i ++) {
                if (imgs[i].index + numA - numB >= 0) {
                    imgs[i].index = (imgs[i].index + numA - numB) % imgs.length;
                } else if (imgs[i].index + numA - numB < 0) {
                    imgs[i].index = imgs[i].index + numA - numB + imgs.length;
                }

                //根据序号刷新样式
                if (imgs[i].index === 0) {
                    imgs[i].style.width = 450 + "px";
                    imgs[i].style.height = 300 + "px";
                    imgs[i].style.zIndex = 1;
                    imgs[i].style.top = 50 + "px";
                    imgs[i].style.left = 0 + "px";
                    imgs[i].style.opacity = 0.5
                } else if (imgs[i].index === 1) {
                    imgs[i].style.width = 525 + "px";
                    imgs[i].style.height = 350 + "px";
                    imgs[i].style.zIndex = 2;
                    imgs[i].style.top = 25 + "px";
                    imgs[i].style.left = 140 + "px";
                    imgs[i].style.opacity = 0.8
                } else if (imgs[i].index === 2) {
                    imgs[i].style.width = 600 + "px";
                    imgs[i].style.height = 400 + "px";
                    imgs[i].style.top = 0 + "px";
                    imgs[i].style.zIndex = 3;
                    imgs[i].style.left = 320 + "px";
                    imgs[i].style.opacity = 1
                } else if (imgs[i].index === 3) {
                    imgs[i].style.width = 525 + "px";
                    imgs[i].style.height = 350 + "px";
                    imgs[i].style.zIndex = 2;
                    imgs[i].style.top = 25 + "px";
                    imgs[i].style.left = 575 + "px";
                    imgs[i].style.opacity = 0.8
                } else if (imgs[i].index === 4) {
                    imgs[i].style.width = 450 + "px";
                    imgs[i].style.height = 300 + "px";
                    imgs[i].style.zIndex = 1;
                    imgs[i].style.top = 50 + "px";
                    imgs[i].style.left = 790 + "px";
                    imgs[i].style.opacity = 0.5
                } else {
                    imgs[i].style.width = 450 + "px";
                    imgs[i].style.height = 300 + "px";
                    imgs[i].style.zIndex = 0;
                    imgs[i].style.top = 50 + "px";
                    imgs[i].style.left = 395 + "px";
                    imgs[i].style.opacity = 0
                }
            }
        };

    }

    //定时器部分
    function play() {
        //自动播放相当于点击序号2的图片
        for (var j = 0; j < imgs.length; j ++) {
            if (imgs[j].index === 1) {
                imgs[j].onclick();
                break  //这个break不能省,不然会有bug
            }
        }
    }
    var imgPlay = window.setInterval(play,2000);
    container.onmouseover = function () {
        window.clearInterval(imgPlay);
    };
    container.onmouseout = function () {
        imgPlay = window.setInterval(play,2000);
    };





</script>
</html>

资料进群领取598399936
 
22guanerye123
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js轮播（三种方式）
多喝热水早点休息的博客
04-18 5332
方式一 1.先将图片信息封装成一个数组的全局变量。 2.创建一个全局变量 i 用于操作数组的下标。 3.点击上、下一个按钮时，触发函数，使 i 自增或自减 4.通过字符串拼接的方式，拼接 url。 js代码： <script type="text/javascript"> //images 用于存储图片信息。可通过下标获取 var images = [ "01.webp", "02.webp", "03.jpg", "04.webp", ]; var i = 0;//用
JS实现轮播图的三种简单方法。
热门推荐
m0_67392409的博客
03-11 1万+
Js实现轮播图01 实现思路 这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下： 实现效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图实现01</title> &
js实现无缝无限循环轮播图片
幼儿园老大的博客
06-18 5573
如果有问题或者更好的方法，欢迎留言 效果图如下： 具体代码见下面： <!DOCTYPE> <html> <head> <title>06</title> <meta charset="utf-8"> <script> window.onload = function () { var ul = ...
css+js制作循环轮播图——可滑动
学习使我快乐_玉祥
03-25 2682
先上效果图： （1）自动切换 （2）手动拖拽 HTML <div id="adbox" class="adbar"> <img src="img/back6.jpg"> <img src="img/back1.jpg"> <img src="img/back2.jpg"> <img src="img/back3.jpg"> <img
js写轮播图，效果为每秒图片左移，循环
zhangcham的博客
02-02 539
html写六张图片及序号按钮 <div class='subbanner' id ='subbanner'> <div class='sub_banner_box'> <ul class='sub_banner_boxItem clearfix'> <li> ...
原生js实现无限循环轮播图效果
11-28
也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断...
js实现图片无缝循环轮播
10-16
主要为大家详细介绍了js实现图片无缝循环轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery图片循环轮播代码
06-09
一款支持左右按钮控制的jQuery图片循环轮播代码，还带缩略图，焦点图无限循环左右滚动切换效果。
JS轮播图的n种方法
Benxiaohai_311的博客
03-22 1万+
第一种 轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一种轮播图，没有耳朵，自动轮播，鼠标放上去会停止，只需在body里面更改图片宽高和图片路径</title> <style> *.
简易循环轮播图
qq_43228610的博客
08-24 125
简易轮播图，可以实现循环往一个方向无限滚动。添加有滚动动画，让滚动更加滑溜溜。
画廊循环轮播图实现
04-22
通过ViewPager实现轮播图，添加自定义圆点指示器，无限循环的实现，画廊效果的实现。
自己用js作的轮播代码自动轮播的很好看，可以借鉴下
09-15
这个js代码是修改里面的number值的，文件夹放的图片必须从1开始到最后20 个，那么js里面的代码的number也要等于20 ，这样就可以无限制添加图片代码啦，这是我的作业，个人感觉不错，可以借鉴下，大家自己可以加下上一张下一张的按钮，事件不够就没有做啦
循环轮播图
Frankeen的博客
06-01 959
循环轮播图，想必大家都在很多app山看到过，但是具体怎么实现呢？今天小弟就跟大家一种通过组合自定义view来实现的方法。 先看一张效果图： 再看一下结构 现在开始正式讲解如何实现这个轮播图的自定义，首先定义一下轮播图的布局文件：shuffling_picture.xml；     xmlns:tools="http://schemas.android.com/t
如何实现一个无限循环的轮播图
weixin_34056162的博客
01-05 2584
前言 由于项目中使用第三方的轮播图出现了崩溃情况，同时也想减少项目的依赖性，所以想自己实现一个轮播图。实现这样一个轮播图，可以使用UICollectionView或者UIScrollView，当然UICollectionView实现起来更容易一些。 原理 实现一个无限循环的轮播图的主要难点是如何实现左右无限滑动，在知乎上搜的的答案 ios轮播图实现原理？。 1.方案一 N张照片把contentsS...
js_for循环应用之生成轮播
at sea
12-18 2991
目的：使用 for循环生成轮播图（如图） 步骤： 获取每个需要的元素 将图片装入数组中，使用数组的下标获取图片 申请变量，通过改变变量，获取数组里面的图片 <div id="banner"> <img src=""/> <ul></ul> <div id="btn"> <div><</div> <
原生js实现图片循环轮播效果
yezi__6的博客
08-16 950
&lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{ margin: 0;padding: 0; } .bloc
无限循环JavaScript轮播
兜ぃф糖
06-30 3184
用过很多轮播的插件，bootstrap的 bootstrap-carousel.js、unslider，用在手机端的swiper，各种效果的slide 以及各种特效网站的轮播代码，其实我只需要一个，方便就好，所以花了点时间自己做了一个。 看起来是无限循环的效果，实际用了一点点小技巧。#just start a damn project# 布局很简单，一个绝对定位+left值的变化就可以实现轮播了，
JS实现轮播图
qq_39035580的博客
03-08 8248
今天给大家介绍下怎么用 JS 实现轮播图效果。 原理描述： 设置好盒子的大小，将所有的图片脱离文档流叠放在一起，通过 querySelectorAll 获取所有的图片循环遍历，由 display 来控制图片的显示与隐藏(先隐藏所有的图片当轮播到当前图片时再显示) 效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v
循环轮播图代码
最新发布
05-29
以下是一个基于 jQuery 的循环轮播图的代码： ```html <div class="slideshow-container"> <div class="mySlides fade"> <img src="img1.jpg"> </div> <div class="mySlides fade"> <img src="img2.jpg"> </div> <div class="mySlides fade"> <img src="img3.jpg"> </div> <a class="prev">❮</a> <a class="next">❯</a> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> ``` ```css /* 轮播图容器 */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* 隐藏所有幻灯片 */ .mySlides { display: none; } /* 下一张和上一张控件 */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* 下一张控件的位置 */ .next { right: 0; border-radius: 3px 0 0 3px; } /* 当用户鼠标悬停在控件上时，改变背景颜色 */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* 控制圆点 */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } /* 将当前圆点更改为未选中状态 */ .active, .dot:hover { background-color: #717171; } /* 淡入幻灯片 */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } ``` JavaScript 代码可以用来控制幻灯片的滑动： ```javascript var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = $(".mySlides"); var dots = $(".dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 2000); // 每 2 秒切换一张幻灯片 } $(".prev").click(function() { slideIndex--; if (slideIndex < 1) {slideIndex = $(".mySlides").length} showSlides(); }); $(".next").click(function() { slideIndex++; if (slideIndex > $(".mySlides").length) {slideIndex = 1} showSlides(); }); $(".dot").click(function() { slideIndex = $(this).index() + 1; showSlides(); }); ``` 以上是一个简单的循环轮播图的代码，你可以根据自己的需求进行修改。在这个代码中，幻灯片会每 2 秒自动切换一次，并且有“上一张”和“下一张”按钮，以及圆点控制。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值