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实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...
随机推荐
- Python操作数据库类 Oracle、Sqlserver、PostgreSQL
我在工作中经常使用Python,特点很明显,轻量,效率还不错,尤其在维护或者自动化方面. 下面是我使用到的访问数据库(Oracle.Sqlserver.PostgreSQL)的公共类. 一.Oracl ...
- 【FAQ】应用集成HMS Core部分服务出现“ 6003报错”情况的解决方法来啦
背景 开发者在应用中集成HMS Core部分服务时,android sdk 以及flutter等跨平台sdk,会出现编译打包后,运行报6003错误码的情况.根据查询可以得知,错误代码 6003 表示证 ...
- 初识ES6（JavaScript）
初识ES6(JavaScript) 关于ES6: ES6即ECMAScript6,是一种规范,JavaScript遵循了这种规范. *优点:*代码比较简洁. *缺点:*浏览器的兼容性不好. 1.变量和 ...
- box-shadow-阴影，你真的懂吗
大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师-关注公众号:搞前端的半夏,了解更多前端知 ...
- 动态规划 Dynamic Programming 学习笔记
文章以 CC-BY-SA 方式共享,此说明高于本站内其他说明. 本文尚未完工,但内容足够丰富,故提前发布. 内容包含大量 \(\LaTeX\) 公式,渲染可能需要一些时间,请耐心等待渲染(约 5s). ...
- python学习-Day37
目录 今日内容详细 GIL全局解释器锁 GIL与普通互斥锁区别 GIL对程序的影响 验证多线程作用 两个大前提 关于CPU的个数 关于任务的类型 死锁现象 避免死锁的解决: 添加超时释放锁 信号量 自 ...
- [题解][YZOJ50104] 密码 | 简单计数
同步发表于 Mina! 题目大意 对于满足以下要求的长度为 \(n\) 的序列进行计数: 序列的值域为 \([1,k]\); 对于序列的任意位置 \(p\in[1,n]\),可以找到至少一个 \(i\ ...
- 10个 Linux 命令，让你的操作更有效率
点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 根据老九大师兄口头阐述,Linux是最适合开发的操作系统 ...
- 容器内的Linux诊断工具0x.tools
原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介 Linux上有大量的问题诊断工具,如perf.bcc等,但这些诊断工具,虽然功能强大,但却需要很高的权限才可以使用 ...
- django-rest-framework 基础二 序列化器和路由
django-rest-framework 基础二 序列化器和路由 目录 django-rest-framework 基础二 序列化器和路由 1. 序列化器 1.1 Serializer的使用 1.2 ...