<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

        }

        #banber {

            border: #e74c3c 1px solid;

            margin: 100px;

            width: 800px;

            height: 480px;

            position: relative;

            overflow: hidden;

        }

        #banber span:last-child {

            left: 780px;

        }

        #banber span {

            background: #999999;

            font-size: 26px;

            color: #ffffff;

            width: 20px;

            height: 40px;

            opacity: 0.7;

            position: absolute;

            top: 220px;

        }

        #banber ul {

            width: 6000px;

            position: absolute;

        }

        #banber ul li {

            width: 800px;

            height: 480px;

            float: left;

        }

        #list {

            position: absolute;

            background-color: #cccccc;

            left: 580px;

            top: 420px;

            height: 10px;

            opacity: 0.7;

            padding: 2px 50px 2px 0px;

        }

        #list a {

            float: left;

            background-color: #f23d9c;

            border-radius: 50%;

            width: 10px;

            height: 10px;

            margin-left: 8px;

        }

    </style>

    <script src="animte.js"></script>

</head>

<body>

<div id="banber">

    <ul>

        <li><img src="data:images/CJD2.jpg" alt=""></li>

        <li><img src="data:images/CJD1.jpg" alt=""></li>

        <li><img src="data:images/CJD3.jpg" alt=""></li>

        <li><img src="data:images/CJD4.jpg" alt=""></li>

        <li><img src="data:images/CJD5.jpg" alt=""></li>

    </ul>

    <div id="arrol">

        <span><</span>

        <span>> </span>

    </div>

    <div id="list">

    </div>

</div>

<script>

    const banaer = document.getElementById('banber')

    const arrol = document.getElementById('arrol')

    const list = document.getElementById('list')

    let index = 0

    //1,动态生成小圆球

    //获取ul

    const b_ul = banaer.getElementsByTagName('ul')[0];

    //获取LI的长度

    const len = b_ul.getElementsByTagName('li').length

    for (let i = 0; i < len; i++) {

        let a = document.createElement('a')

        list.appendChild(a)

        a.onclick = Click

        //设置标签自定义属性--很重要 添加索引

        a.setAttribute('index', i)

    }

    list.children[0].style.backgroundColor = '#ff8400'

        //点击

    function Click() {

        for (let i = 0; i < list.children.length; i++) {

            let a = list.children[i]

            a.style.backgroundColor = ''

            this.style.backgroundColor = '#ff8400'

            // 获取自定义属性 点的是第几个

            index = parseInt(this.getAttribute('index'))

            //调用动画

            animte(b_ul, (-index) * 800)

        }

    }

    //箭头

    arrol.children[0].onclick = function () {

        if (index == 0) {

            index = len;

            b_ul.style.left = -index * 800 + 'px';

        }

        index--;

        list.children[index].click()

    }

    //无缝滚动

    let firstLi = b_ul.children[0]

    let clone = firstLi.cloneNode(true)

    b_ul.appendChild(clone)

    arrol.children[1].onclick = function () {

        if (index === len) {

            b_ul.style.left = '0px';

            index = 0

        }

        index++;

        if (index < len) {

            list.children[index].click()

        } else {

            animte(b_ul, index * -800)

            for (let i = 0; i < list.children.length; i++) {

                let a = list.children[i]

                a.style.backgroundColor = ''

            }

            list.children[0].style.backgroundColor = '#ff8400'

        }

    }

    // 自动播放

    let time=setInterval(function () {

        arrol.children[1].click()

    },3000)

    banaer.onmouseenter=function () {

        clearInterval(time)

    }

    banaer.onmouseleave=function () {

        time=setInterval(function () {

            arrol.children[1].click()

        },3000)

    }

</script>

</body>

</html>

　　今天写了无缝轮播滚动 虽然代码有许许多多的不规范，不过对思维的一个锻炼 前面知识的复习，对于初学者也是很不错

JavaScript—原生轮播和无缝滚动的更多相关文章

  1. 【自定义轮播图】微信小程序自定义轮播图无缝滚动

    先试试效果,可以通过设置参数调整样式 微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...

  2. JavaScript焦点轮播图

    在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...

  3. js原生轮播

    js原生轮播 今天用js做了轮播图,做的不怎么好,希望大家能够看懂. 效果: 1.鼠标放在轮播图上自动停止 2.鼠标离开轮播图自动播放 3.鼠标点击轮播图上的小圆点跳转到相应的图上. 代码: < ...

  4. 第一百五十五节，封装库--JavaScript，轮播器

    封装库--JavaScript,轮播器 html <div id="banner"> <img src="img/banner1.jpg" a ...

  5. JavaScript banner轮播 左右切换 圆点点击切换

    1.效果如下图: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  6. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  7. js原生选项卡（包含无缝滚动轮播图）一

    原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...

  8. 原生JavaScript实现轮播图

    ---恢复内容开始--- 实现原理 通过自定义的animate函数来改变元素的left值让图片呈现左右滚动的效果 HTML: <!DOCTYPE html> <html> &l ...

  9. 原生javascript焦点轮播图

    刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...

随机推荐

  1. Linux: 桥接 NET HOST-only

    桥接 虚拟机会利用真实的网卡和真实计算机之间通信  还能和同一局域网之间的计算机之间通信 缺点:会耗费一个ip地址 NET:虚拟机会通过VMnet8 虚拟的网卡与真实计算机之间通信    如果真实计可 ...

  2. mapper语句的一些问题，union连表查询和mapper中根据条件不同采用不同语句的查询问题

    根据业务要求,不同表查出来的内容天需要一起展示出来,并且还有分页之类的,不同表查询字段也不完全相同,这样就有一个问题,不同表如何接合在一起,不同字段怎么办? 这个问题就需要用到union联合查询,并将 ...

  3. 重采样Resample 的一些研究记录。

    最近项目有需要重采样算法,先找了一下,主流的就是几个开源算法,Speex / Opus / ffmpeg / sox 1.最早的事Speex,算法源自CCRMA(Center for Computer ...

  4. tf.argmax()函数作用

    tf.argmax()函数原型: def argmax(input, axis=None, name=None, dimension=None, output_type=dtypes.int64) 作 ...

  5. c++链接mysql5.7

    1.单独安装mysql5.7 phpstudy安装的没有include和lib文件夹2.vs2013中右键属性 项目 - C/C++ - 常规 - 附加包含目录 里面添加 D:\**\include ...

  6. IDE一直在indexing, 造成系统卡死解决方法

    点击箭头指向,重启idea

  7. IntelliJ IDEA中，mybatis的配置文件（map.xml）无法编译到class文件夹下

    编译工具:IntelliJ IDEA 项目结构:maven 项目框架:SSM 问题:java目录下,mybatis的配置文件(map.xml)无法编译到class文件夹下 问题原因:在idea中,直接 ...

  8. Ubantu学习笔记1

    重启后按e键进行编辑,在文档倒数第二行r0处修改为rw init=/bin/bash 然后F10操作,输入passwd zichua =>修改此用户名的密码,重新输入两次密码(这里密码是看不到的 ...

  9. Swift字符串截取与Range使用

    1.String.Index String.Index表示一个位置,使用String与String.Index可以获取该位置的Character let str = "123456789&q ...

  10. docker修改存储路径（转载）

    系统盘只有40G,有时docker镜像会占据大量的存储空间,于是想把docker的默认存储位置改成挂载的数据盘.docker的默认存储位置未为:/var/lib/docker 更改docker的默认存 ...