JavaScript—原生轮播和无缝滚动
<!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—原生轮播和无缝滚动的更多相关文章
- 【自定义轮播图】微信小程序自定义轮播图无缝滚动
先试试效果,可以通过设置参数调整样式 微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...
- JavaScript焦点轮播图
在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...
- js原生轮播
js原生轮播 今天用js做了轮播图,做的不怎么好,希望大家能够看懂. 效果: 1.鼠标放在轮播图上自动停止 2.鼠标离开轮播图自动播放 3.鼠标点击轮播图上的小圆点跳转到相应的图上. 代码: < ...
- 第一百五十五节,封装库--JavaScript,轮播器
封装库--JavaScript,轮播器 html <div id="banner"> <img src="img/banner1.jpg" a ...
- JavaScript banner轮播 左右切换 圆点点击切换
1.效果如下图: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...
- js原生选项卡(包含无缝滚动轮播图)一
原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...
- 原生JavaScript实现轮播图
---恢复内容开始--- 实现原理 通过自定义的animate函数来改变元素的left值让图片呈现左右滚动的效果 HTML: <!DOCTYPE html> <html> &l ...
- 原生javascript焦点轮播图
刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...
随机推荐
- EditText标签的使用
前文: 介绍EditText的使用,这个是文本输入控件,用来输入文本内容 使用: EditText继承TextView所以TextView的东西EditText都可以使用 text:显示文本 text ...
- windows中的运行命令
首先按“开始”-“运行”,或按WIN键+R,进入『运行』窗口. 下面是常用的运行命令 (按英文字符顺序排列) appwize.cpl----添加.删除程序 access.cpl-----辅助功能选项 ...
- Gym - 101190F Foreign Postcards (期望dp)
题意:有n张标有“C”或“F”的卡片. 1.随机取前k张(1<=k<=n) 2.若这k张的第一张为“C”,则不翻转,否则,全部翻转这k张. 3.然后处理剩下的n-k张 4.重复步骤1~3直 ...
- tomcat以服务形式开机启动
第一步 将tomcat配置为服务模式 cp $TOMCAT_HOME/bin/catalina.sh /etc/init.d/tomcat #将tocmt启动文件复制到/etc/init.d下 vim ...
- 14.swoole学习笔记--异步读取文件
<?php //异步读取文件 swoole_async_readfile(__DIR__."/1.txt",function($filename,$content){ ech ...
- python --- request返回值乱码问题
1.分析 a)<HTTP权威指南>里第16章国际化里提到,如果HTTP响应中Content-Type字段没有指定charset,则默认页面是'ISO-8859-1'编码.一般现在页面编码都 ...
- web系统能力培养计划
服务器知识掌握如下 01购买linux服务器 客户端工具:https://mobaxterm.mobatek.net/download.html 02linux常用命令 https://www.run ...
- python *args 和 ** kwargs
可变长度的参数 *args的使用方法 *args 用来将参数打包成tuple给函数体调用 可见,1这个参数,被打包成了一个元组 def func(*args): print(args,type(arg ...
- mysql 时区问题导致的时间相差14小时
1.mysql 字段名称 类型 begin_time TIME begin_time=08:18:39 2.java数据库连接串 jdbc:mysql://x.x.x.x:3306/y?useUnic ...
- 一天一个设计模式——模板方法(Template Method)模式
一.模式说明 现实世界中的模板是用于将事物的结构规律予以固定化.标准化的成果,它体现了结构形式的标准化.例如镂空文字印刷的模板,通过某个模板印刷出来的文字字体大小都是一模一样,但是具体使用什么材质的颜 ...