<!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. GNS3 模拟icmp分片不可达

    R1 : conf t int f0/0 no shutdown ip add 192.168.1.1 255.255.255.0 no ip routing end R2 f0/0: conf t ...

  2. nodejs 文件路径问题

    fs.stat()  是 获取 本目录下 文件信息 的方法 .如果使用要加上绝对路径.不然会出问题.例: 解决方法

  3. Spring 实战4学习笔记（转）

    http://blog.csdn.net/21aspnet/article/details/51386557 1.IOC装配Bean 参考[spring实战4 2.2],作者提倡无XML配置化. 1. ...

  4. python+opencv+dlib瘦脸效果

    对实现人脸瘦脸简单功能的一个记录,大概流程如下: 1.使用dlib检测出人脸关键点 2.使用Interactive Image Warping 局部平移算法实现瘦脸 参考:https://blog.c ...

  5. Java中的String介绍

    一.概述 String是代表字符串的类,本身是一个最终类,使用final修饰,不能被继承. 二.String字符串的特征 1. 字符串在内存中是以字符数组的形式来存储的. 示例如下,可以从String ...

  6. canvas背景粒子动态变化动画

    var canvas = document.getElementById("cas"); var ctx = canvas.getContext("2d"); ...

  7. text字体样式（多行结尾省略，彩色渐变字体）

    text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; ...

  8. Web基础之Maven

    Web基础之Maven Maven是一个优秀的项目管理工具,可以很轻松的管理项目. POM和LifeCycle POM:Project Object Model.也就是项目模型,简单来说就是对项目进行 ...

  9. 高级js 变量提升以及自由变量

    Q首先一道题 if(false){ var a = 1; } console.log(a); //undefined //我以为输出ReferenceError: aa is not defined ...

  10. 使用Oracle VM VirtualBox创建虚拟机教程

    使用Oracle VM VirtualBox创建虚拟机教程                                                                       ...