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实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...
随机推荐
- 内网穿透NPS
内网穿透实现 nps文档 https://ehang-io.github.io/nps/#/install nps docker镜像 https://hub.docker.com/r/ffdfgdfg ...
- Bootstrap Blazor Table 组件（二）
原文链接:https://www.cnblogs.com/ysmc/p/16128206.html 很多小伙伴在使用 Bootstrap Blazor Table组件的时候,都会有这样的一个需求: 我 ...
- NodeJs学习日报day7——简单中间件
const express = require('express') const app = express() const mw = function(req, resp, next) { cons ...
- Java应用工程结构
分层的本质是关注点分离,隔离对下层的变化,可以简化复杂性,使得层次结构更加清晰. 1. 主流分层结构介绍 目前业界存在两种主流的应用工程结构:一种是阿里推出的<Java开发手册>中推荐的, ...
- Go汇编语法和MatrixOne使用介绍
目录 MatrixOne数据库是什么? Go汇编介绍 为什么使用Go汇编? 为什么不用CGO? Go汇编语法特点 操作数顺序 寄存器宽度标识 函数调用约定 对写Go汇编代码有帮助的工具 avo tex ...
- springmvc04-数据处理
数据处理 我们把它分为三种情况来分析,这样我们对于数据处理会有更好的理解 1.提交的域名称和处理方法的参数名一致 提交数据 : http://localhost:8080/hello?name=xi ...
- vue - vue基础/vue核心内容（终结篇）
今天是vue基础.vue核心内容第三天,也是最后一天,后面开始进入组件化学习,整个基础内容以生命周期的结束而结束,不得不说,张天禹把这节课讲活了,开始觉得vue是一个有生命的东西,包括前面所说的很多脏 ...
- 干货 | LVM快照学习
一个执着于技术的公众号 前言 在上一章节,我们学习了LVM逻辑卷管理技术,知道了LVM能够通过增减PE的数量来弹性调整文件系统的大小.除此之外,LVM还有另一个重要功能「LVM快照技术」,也就是可以给 ...
- spring 拦截器流程 HandlerInterceptor AsyncHandlerInterceptor HandlerInterceptorAdapter
HandlerInterceptor源码 3种方法: preHandle:拦截于请求刚进入时,进行判断,需要boolean返回值,如果返回true将继续执行,如果返回false,将不进行执行.一般用于 ...
- java.sql和javax.sql的区别
根据 JDBC 规范,javax.sql 包中的类和接口首先作为 JDBC 2.0 可选包提供.此可选程序包以前与 J2SE1.2 中的 java.sql 程序包是分开的.从 J2SE1.4 开始,这 ...