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实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...
随机推荐
- Oracle双字段约束
Oracle里有unique约束,意思是该字段唯一. 但如果是两个字段呢? 比如说一个会员等级表 ID NAME POINT DISCOUNT PRIVILEGE MID 1019 普通会员 0 10 ...
- MySQL学习day3随笔
索引在数据量不大的时候体现不出来,数据很多的时候区别明显 1 select * from app_user where `name`='用户9999';-- 0.053 sec 2 select * ...
- 【Azure API 管理】解决API Management添加AAD Group时遇见的 Failed to query Azure Active Directory graph due to error 错误
问题描述 为APIM添加AAD Group时候,等待很长很长的时间,结果添加失败.错误消息为: Write Groups ValidationError :Failed to query Azure ...
- react实战系列 —— 起步（mockjs、第一个模块、docusaurus）
其他章节请看: react实战 系列 起步 本篇我们首先引入 mockjs ,然后进入 spug 系统,接着模仿"任务计划"模块实现一个类似的一级导航页面("My任务计划 ...
- Day 007：PAT训练--1108 Finding Average (20 分)
话不多说: 该题要求将给定的所有数分为两类,其中这两类的个数差距最小,且这两类分别的和差距最大. 可以发现,针对第一个要求,个数差距最小,当给定个数为偶数时,二分即差距为0,最小:若给定个数为奇数时, ...
- 【笔记】排查CPU占用过高
本文是该教程视频的笔记 https://www.bilibili.com/video/BV15T4y1y7eH 1. 问题演示 将演示项目打包放到服务器运行 执行 curl http://localh ...
- vsphere部署OVF虚拟机提示未能部署OVF软件包
一.从vshere平台导出OVF,准备导入到另一个vsphere平台提示:传输入失败:Error transferring file to https://172.22.1.85/nfc/5267db ...
- XCTF练习题---MISC---Hear-with-your-Eyes
XCTF练习题---MISC---Hear-with-your-Eyes flag:e5353bb7b57578bd4da1c898a8e2d767 解题步骤: 1.观察题目,下载附件 2.打开附件, ...
- 【图解】面试题：ConcurrentHashMap是如何保证线程安全的
注意:JDK1.7与JDK1.8中的ConcurrentHashMap主要延续HashMap的设计与思想,是在其基础上进行的相应优化 1.JDK1.7中的底层实现原理 (1)JDK1.7Concurr ...
- 老生常谈系列之Aop--Spring Aop原理浅析
老生常谈系列之Aop--Spring Aop原理浅析 概述 上一篇介绍了AspectJ的编译时织入(Complier Time Weaver),其实AspectJ也支持Load Time Weaver ...