<!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. 在windows7 64位上安装selenium2library问题解决

    今天发现了windows7 64位上安装selenium2Libaray的问题,下载exe文件安装不行.就切换成了半自动模式.  方案如下: 1.首先下载pip安装.(因为要用pip来安装 selen ...

  2. HDU - 6143 Killer Names（dp记忆化搜索+组合数）

    题意:从m种字母中选取字母组成姓名,要求姓和名中不能有相同的字母,姓和名的长度都为n,问能组成几种不同的姓名. 分析: 1.从m种字母中选取i种组成姓,剩下m-i种组成名. 2.i种字母组成长度为n的 ...

  3. arduino通信问题的学习与解决

    我想实现的是,我用电脑在串口监视器上输入一个字符串,arduino能识别这个字符串中的每一个字符并在相应的串口上给出相应的高低电平以驱动舵机,比如输入L1,RS,功能是左手腕舵机逆时针旋转90°,然后 ...

  4. 《TensorFlow实战Google深度学习框架》笔记——TensorFlow入门

    一.Tensorflow计算模型:计算图 计算图是Tensorflow中最基本的一个概念,Tensorflow中的所有计算都被被转化为计算图上的节点. Tensorflow是一个通过计算图的形式来描述 ...

  5. bzoj 1912: [Apio2010]patrol 巡逻

    呵呵呵呵呵呵,自己画图,大概半个小时,觉的连上边会成环(是不是该交仙人掌了??)然后求环不重合部分最大就好了, 结果写了一坨DP,最后写不下去了,再次扒了题解. 发现我真的是个sb. k==1,直接是 ...

  6. 用 Python 分析网易严选 Bra 销售信息，告诉你她们真实的 Size

    今天通过爬虫数据进行分析,一起来看看网易严选商品评论的获取和分析. 声明:这是一篇超级严肃的技术文章,请本着学习交流的态度阅读,谢谢! !   ​ 网易商品评论爬取 分析网页 评论分析 进入到网易严选 ...

  7. 072-PHP数组的交集和差集

    <?php $arr1=array(1,3,4,5,34,78,99); //参加第一项竞赛的学生学号数组 $arr2=array(5,6,7,3,56,34,8,9); //参加第二项竞赛的学 ...

  8. Zookeeper 在 Kafka 中的作用

    https://www.jianshu.com/p/a036405f989c 待整理...

  9. module已经装了但仍提示找不到的解决方法

    今天遇到的问题:(这里只是个例子) 解决方法: npm clean cache --force 删了node_modules 和 package-lock ,然后npm install 如果再不行,看 ...

  10. JAVA - SpringBoot项目跨域访问

    JAVA - SpringBoot添加支持CORS跨域访问 CORS(Cross-Origin Resource Sharing)“跨域资源共享”,是一个W3C标准,它允许浏览器向跨域服务器发送Aja ...