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实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...
随机推荐
- 2021.07.18 P2290 树的计数（prufer序列、组合数学）
2021.07.18 P2290 树的计数(prufer序列.组合数学) [P2290 HNOI2004]树的计数 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 重点: 1.pru ...
- 使用vscode编辑markdown文件（可粘贴截图）
使用markdown粘贴截图时,操作步骤比较多: 1)截取图片: 2)将图片存在特定位置: 3)记住图片路径,在markdown文件中编写代码: 4)预览效果: 而word之类的文档编辑器,只需要截图 ...
- 最新Mysql大厂面试必会的34问题
目录 1.mysql的隔离级别 2.MYSQL性能优化 常用5种方式 3.索引详解 1.何为索引,有什么用? 2.索引的优缺点 4.什么情况下需要建索引? 5.什么情况下不建索引? 6.索引的底层数据 ...
- MKL库矩阵乘法
此示例是利用Intel 的MKL库函数计算矩阵的乘法,目标为:\(C=\alpha*A*B+\beta*C\),由函数cblas_dgemm实现: 其中\(A\)为\(m\times k\)维矩阵,\ ...
- 『现学现忘』Git基础 — 19、Git中忽略文件
目录 1.忽略文件说明 2.忽略文件的原则 3..gitignore忽略规则 1.忽略文件说明 有些时候,你必须把某些文件放到Git工作目录中,但又不能提交它们到本地版本库,通常都是些自动生成的文件. ...
- 2.3 为什么建议使用虚拟机来安装Linux？
笔者认为,通过虚拟机软件学习是初学者学习 Linux 的最佳方式. 在与部分读者的交流中,笔者发现,很多初学者都认为,学习 Linux 就必须将自己的电脑装成 Linux 系统或者必须要有真正的服务器 ...
- 你不知道的 Linux 使用技巧
开源Linux 一个执着于技术的公众号 1.快速跳转命令 - z 要是每次都要进入一个目录很深的文件夹下,像下面这样: # cd /root/py/auto/fabric 每次都要输入好多个目录名是不 ...
- Docker将镜像文件发布到阿里云
一.创建新镜像文件 1.创建容器并在容器内创建一个文件夹 在容器内创建一个新文件主要是为了代表这个容器非镜像文件直接创建的容器,而是通过自定义在容器内创建了属于自己的文件 2.提交容器副本使之成为一个 ...
- Sharding JDBC案例实战
基础分库 以下实例基于shardingsphere 4.1.0 + SpringBoot 2.2.5.RELEASE版本 依赖导入: <properties> <project.bu ...
- php魔术方法小结
php魔术方法 __construct() __construct(mixed ...$values = ""): void PHP 允许开发者在一个类中定义一个方法作为构造函数. ...