<!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. Mac 设置git的template

    1.在home目录下修改.gitconfig(没有新建) 2. 在home下新建 .setCommitMsg 文件 3.然后将一下内容复制到文件中 # <类型>: (类型的值见下面描述) ...

  2. C++路径的整理

    写C++,路径的问题一直都让人很头疼,抽空整理一些方法:也许以后会用到: 1."./" 加不加都一样,就是指当前目录 2."../" 表示当前目录的上级目录,即 ...

  3. mysql IF-IFNULL和IF-ISNULL同样逻辑的运行差别

    首先,目标记录是存在的 SELECT * FROM d_device_user_bind dub WHERE dub.`uid`='222222222221' 其次, SELECT dub.uid,d ...

  4. 【STM32H7教程】第52章 STM32H7的LTDC应用之点阵字体和字符编码(重要)

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第52章       STM32H7的LTDC应用之点阵字体和 ...

  5. read和write函数的使用

    https://blog.csdn.net/qq_33883085/article/details/88667003

  6. DP(动态规划求含有冻结期的买卖股票)-05-动态规划-买卖股票

    题目描述 Alice这次决定去股市里当一波韭菜. 她希望你设计一个算法,在满足以下3个约束条件下,计算出最大利润. 1.  你可以多次买卖一支股票,但是对于每支股票,你不能同时参与多笔交易(你必须在再 ...

  7. 105-PHP使用var_dump查看类的类型

    <?php class ren{ //定义人类 } class mao{ //定义猫类 } $ren1=new ren(); //实例化人类 $mao1=new mao(); //实例化猫类 $ ...

  8. 十二、React 生命周期函数

    React生命周期函数: [官方文档]:https://reactjs.org/docs/react-component.html [定义]组件加载之前,组件加载完成,以及组件更新数据,组件销毁. 触 ...

  9. js基础学习之-js对象的属性

    Js属性 1. 设置属性 1)  对象. 2)  对象[‘属性名’] 3)   GetAttribute函数 2. 获取属性 1)  变量=对象. 2)  变量=对象[‘属性名’] 3)  GetAt ...

  10. spring监听器+定时任务

    背景:在原SSM项目中,拟定在每晚的23:59:59执行一个批处理任务. 设计思路:用jdk自带的定时器触发任务执行,设置下次执行间隔为24小时.定时任务由spring的监听器去启动. jdk版本:1 ...