javascript写无缝平移的轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin: 0;padding: 0;}
#container {
width: 590px;
height: 470px;
position: relative;
margin: 50px auto;
border:1px solid;
overflow: hidden;
}
#imgs {
height: 470px;
position: absolute;
top: 0;
left: 0;
list-style: none;
}
#imgs li {
width: 590px;
height: 470px;
float: left;
}
#pages {
width: 590px;
height: 30px;
background: #000;
position: absolute;
bottom: 0;
left: 0;
}
#pages i {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
background: #fff;
margin:10px;
}
#pages i.current {
background: #f00;
}
#prev, #next {
width: 45px;
height: 100px;
background: #000;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
color: #fff;
font-size: 30px;
line-height: 100px;
text-align: center;
}
#next {
right: 0;
}
</style>
</head>
<body>
<div id="container">
<ul id="imgs">
<li><a href="#"><img src="data:images/1.jpg"></a></li>
<li><a href="#"><img src="data:images/2.jpg"></a></li>
<li><a href="#"><img src="data:images/3.jpg"></a></li>
<li><a href="#"><img src="data:images/4.jpg"></a></li>
</ul>
<div id="pages"></div>
<div id="prev"><</div>
<div id="next">></div>
</div>
<script src="js/tools.js"></script>
<script>
var lis = $("li"), // 所有轮播的图片盒子
len = lis.length, // 图片张数
liWidth = lis[0].offsetWidth, // 每个图片盒子宽度
currentIndex = 1, // 当前图片索引
nextIndex = 2, // 即将显示图片的索引
duration = 3000, // 轮播时间间隔
timer = null, // 轮播计时器id
circles = null; // 所有小圆点
/* 动态添加小圆点 */
var html = "";
for (var i = 0; i < len; i++) {
html += "<i></i>";
}
$("#pages").innerHTML = html;
// 获取所添加的所有小圆点DOM元素
circles = $("i");
circles[0].className = "current";
// 复制第一个与最后一个图片盒子
var first = lis[0].cloneNode(true),
last = lis[len - 1].cloneNode(true);
// 添加到 ul#imgs 内部
$("#imgs").appendChild(first);
$("#imgs").insertBefore(last, lis[0]);
// 图片张数加2
len += 2;
// 设置 ul#imgs 宽度
$("#imgs").style.width = liWidth * len + "px";
$("#imgs").style.left = -liWidth + "px";
// 轮播切换函数
function move(){
// 计算轮播切换定位终点
var _left = -1 * nextIndex * liWidth;
// 运动动画
animate($("#imgs"), {left : _left}, 200, function(){
// 运动结束，判断是否还原到原始位置
if (currentIndex === len - 1) { // 最后
currentIndex = 1;
nextIndex = 2;
$("#imgs").style.left = -liWidth + "px";
} else if (currentIndex === 0) { // 最前
currentIndex = len - 2;
nextIndex = len - 1;
$("#imgs").style.left = -1 * (len - 2) * liWidth + "px";
}
});
// 轮播过程中，切换小圆点样式
// 设置为红色背景的小圆点索引
var circleIndex = nextIndex - 1;
if (circleIndex < 0)
circleIndex = len - 3;
else if (circleIndex >= len - 2)
circleIndex = 0;
for (var i = 0; i < len - 2; i++) {
circles[i].className = "";
}
circles[circleIndex].className = "current";
// 修改索引
currentIndex = nextIndex;
nextIndex++;
}
更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118599227
javascript写无缝平移的轮播图的更多相关文章
- 使用JavaScript制作一个好看的轮播图
目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...
- 带无缝滚动的轮播图（含JS运动框架）
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- javascript效果：手风琴、轮播图、图片滑动
最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...
- 【前端】javascript+jQuery实现旋转木马效果轮播图slider
实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...
- JQuery手写一个简单的轮播图
做出来的样式: 没有切图,就随便找了一些图片来实现效果,那几个小星星萌不萌. 这个轮播图最主要的部分是animate(),可以先熟悉下这个方法. 代码我放到了github上,链接:https://gi ...
- 用纯css、JavaScript、jQuery简单的轮播图
完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为 img ...
- JavaScript面向对象的方式开发轮播图插件
轮播图是很多页面必不可少的组件.这里来使用面向对象方式开发一个插件.减去开发的痛楚 首先需要寻找对象:只有一个对象,轮播图!关键点在于找到这个对象所拥有的属性以及方法,通过代码实现出来,这是面向对象最 ...
- 带无缝滚动的轮播图（含JS运动框架）-简洁版
昨天写的神逻辑,今天终于解决,经过大家的商讨,终于研究出来一套简单的代码!!! js代码如下: <script> window.onload = function() { var oWra ...
- 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流
未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...
随机推荐
- Mysql 8 使用过程中的命令记录
Mysql 8 使用过程中的命令记录 注: 当前 MySQL 数据库的版本 8.0.27 修改密码 1. 使用其他用户修改root 密码 ALTER USER 'root'@'localhost' I ...
- 《java基础——对象的拷贝》
java基础--对象的拷贝 一.浅拷贝: 规则: 1. 浅拷贝只是拷贝了源对象的地址,所以源对象的值发生变化时,拷贝对象的值也会发生变化. 2. 浅拷贝相当于两个对象共用一套实例. 格式: 类名 对象 ...
- 6.Jenkins进阶之流水线pipeline语法入门学习(1)
目录一览: 0x00 前言简述 Pipeline 介绍 Pipeline 基础知识 Pipeline 扩展共享库 BlueOcean 介绍 0x01 Pipeline Syntax (0) Groov ...
- GopherCon SG 2019 "Understanding Allocations" 学习笔记
本篇是根据 GopherCon SG 2019 "Understanding Allocations" 演讲的学习笔记. Understanding Allocations: th ...
- 学习打卡day14&&构建之法阅读笔记第二篇
对于书中所提到的结对编程我还是有些许感受的,在大二上学期我就有和同学合作,共同完成编码.有时候可能是我来做非常非常简易的前端页面部分,然后给同学一个基础框架,让同学往框架里面填充,时而遇到问题我再来沟 ...
- Java函数的学习
函数的定义 - 定义的位置:定义在类的内部 - 组成部分: 函数修饰符 类型 函数名(形式参数){ 局部变量: 注释: 函数体: } 函数的调用 - 调用函数时使用 : `函数名():` - 函数在执 ...
- DFA算法之内容敏感词过滤
DFA 算法是通过提前构造出一个 树状查找结构,之后根据输入在该树状结构中就可以进行非常高效的查找. 设我们有一个敏感词库,词酷中的词汇为:我爱你我爱他我爱她我爱你呀我爱他呀我爱她呀我爱她啊 那么就可 ...
- spring中的事件发布与监听
点赞再看,养成习惯,微信搜索「小大白日志」关注这个搬砖人. 文章不定期同步公众号,还有各种一线大厂面试原题.我的学习系列笔记. spring事件发布与监听的应用场景 当处理完一段代码逻辑,接下来需要同 ...
- postman4.15
测开培训笔记4.15 postman:很主流的API测试工具,也是在工作中使用很广泛的研发工具 queue 队列 先进先出的原则 列如:客户端有100个请求 服务端最多只能承受90个 其余都要排队进行 ...
- Linuxshell脚本-格式-变量-条件测试
1.Linuxshell脚本格式 脚本文件名称格式: 1.NAME.sh.脚本文件名称必须以 .sh 结尾 脚本编辑第一行必须包括shell声明序列:#! 添加注释,注释以#开头 2.加3执行 ...