<!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. NO2 pwd-touch-vim-vi-echo-重定向等命令

    ·查看网卡配置:cat/etc/sysconfig/network-scripts/ifcfg-eth0·改onboot=no:sed -i's#noboot=yes#g' /etc/sysconfi ...

  2. python_os 的知识点

    1. os.getcwd() #获得当前路径 2. os.listdir(path) #列出path路径下的所有目录名和文件名包括后缀 3. os.mkdir(path) #在path创建一个目录 4 ...

  3. 配置thinkphp对mysql线上线下切换不同环境的配置 - (mysql-thinkphp) (1)

    1.先打印出配置项的信息,在Index控制器下面的index->index里面设置 namespace app\index\controller; class Index { public fu ...

  4. POJ 3250：Bad Hair Day 好玩的单调栈

    Bad Hair Day Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 15699   Accepted: 5255 Des ...

  5. error LNK2019: 无法解析的外部符号……

    在VS中开发程序的时候遇到一个问题,应该算是比较常见,所以记录下. 在编译程序的时候遇到一个错误,大致提示如下: "error LNK2019: 无法解析的外部符号--" 遇到这个 ...

  6. 一百一十三、SAP的SCAT录屏操作，类似按键精灵可用于批量修改数据

    一.输入事务代码SCAT,输入Z开头的程序名,点击左上角的新建图标 二.输入标题和模块名 三.保存为本地对象 四.包属性修改为CATT,然后保存 五.可以看到我们新建的一条内容,点击小铅笔修改 六.点 ...

  7. Elasticsearch 搜索API

    章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...

  8. UVA - 11925 Generating Permutations（生成排列）（构造）

    题意:将序列1,2,3,……,n,用不超过2n^2次操作,通过下列操作变成给定序列.(1<=n<=300) 1.交换前两个元素 2.将第一个元素移到最后 分析:因为将序列变成升序更容易操作 ...

  9. HDU 5282：Senior's String

    Senior's String  Accepts: 30  Submissions: 286  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit ...

  10. windows driver 延时

    #define Delay_One_MicroSecond (-10) #define Delay_One_MilliSecond (Delay_One_MicroSecond * 1000) voi ...