<!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. HDU 5504：GT and sequence

    GT and sequence  Accepts: 95  Submissions: 1467  Time Limit: 2000/1000 MS (Java/Others)  Memory Limi ...

  2. vSphere vSwitch网络属性配置详解

    1.安全 混杂模式:把vSwitch当成是一个hub,同一台交换机上面所有的虚拟机都能接受到二层数据包. MAC地址更改:当vSwitch上面连接的某一个虚拟机MAC地址发生更改时,vSwitch是否 ...

  3. code first网站发布后数据表中没有数据问题

    code first网站发布后数据表中没有数据问题 (1).将internal sealed class Configuration类访问修饰符改为public  class Configuratio ...

  4. 操作数据库的SqlHelper类

    public static class SqlHelper { public static readonly string connstr = ConfigurationManager.Connect ...

  5. dede:list 与 dede:arclist 的区别

    1.{dede:list}是用于列表页的文章列表调用,通常是用于list_article.htm页面,这个文章列表是可以分页的. 功能说明:表示列表模板里的分页内容列表适用范围:仅列表模板 list_ ...

  6. [JZOI]1251.收费站[二分][最短路]

    Description 在某个遥远的国家里,有n个城市.编号为1,2,3,--,n. 这个国家的政府修建了m条双向的公路.每条公路连接着两个城市.沿着某条公路,开车从一个城市到另一个城市,需要花费一定 ...

  7. reduce()、filter()、map()、some()、every()、...展开属性

    reduce().filter().map().some().every()....展开属性   这些概念属于es5.es6中的语法,跟react+redux并没有什么联系,我们直接在https:// ...

  8. 七十五、SAP中数据库的使用SQL

    一.在SAP中可以使用两张数据库,一直是NativeSQL和OPEN SQL. Native SQL(本地SQL)特点: 1.每种关系型数据库都有其对应的  SQL,是数据库相关的. 2.不同的 SA ...

  9. PostAsync与GetAsync

    using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; using System.Collections.Generic; u ...

  10. scp、wget

    scp使用方法 -1  强制scp命令使用协议ssh1 -2  强制scp命令使用协议ssh2 -4  强制scp命令只使用IPv4寻址 -6  强制scp命令只使用IPv6寻址 -B  使用批处理模 ...