<!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写无缝平移的轮播图的更多相关文章

  1. 使用JavaScript制作一个好看的轮播图

    目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...

  2. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  3. javascript效果：手风琴、轮播图、图片滑动

    最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...

  4. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  5. JQuery手写一个简单的轮播图

    做出来的样式: 没有切图,就随便找了一些图片来实现效果,那几个小星星萌不萌. 这个轮播图最主要的部分是animate(),可以先熟悉下这个方法. 代码我放到了github上,链接:https://gi ...

  6. 用纯css、JavaScript、jQuery简单的轮播图

    完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

  7. JavaScript面向对象的方式开发轮播图插件

    轮播图是很多页面必不可少的组件.这里来使用面向对象方式开发一个插件.减去开发的痛楚 首先需要寻找对象:只有一个对象,轮播图!关键点在于找到这个对象所拥有的属性以及方法,通过代码实现出来,这是面向对象最 ...

  8. 带无缝滚动的轮播图（含JS运动框架）-简洁版

    昨天写的神逻辑,今天终于解决,经过大家的商讨,终于研究出来一套简单的代码!!! js代码如下: <script> window.onload = function() { var oWra ...

  9. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

随机推荐

  1. 如何利用PowerShell完成的Windows服务器系统安全加固实践和基线检测

    0x00 前言简述 最近单位在做等保测评,由本人从事安全运维方面的工作(PS:曾经做过等保等方面的安全服务),所以自然而然的与信安的测评人员一起对接相关业务系统的检查,在做主机系统测评检查时发现了系统 ...

  2. 记一次jenkins发送邮件报错 一直报错 Could not send email as a part of the post-build publishers问题

    写在前面 虽然Jenkins是开源.免费的,好处很多,但有些功能上的使用,我个人还是很不喜欢,感觉用起来特别麻烦.繁琐. 为什么? 就拿这个邮件配置来说吧,因重装系统,电脑需要配置很多东西,结果今天就 ...

  3. vue动态路由实现原理 addRoute

    vue新版router.addRoute基础用法 新版Vue Router中用router.addRoute来替代原有的router.addRoutes来动态添加路由.子路由 在添加子路由的时候 比如 ...

  4. vscode golang 不能自动补全问题

    问题描述: 使用vscode编辑go语言时,有时候会莫名其妙的代码不能自动补全,struct的属性值不能自动提示,这时候如果重新启动vscode也没有效果,就可能是gocode插件出了问题或者有了更新 ...

  5. vue 排错

    error The template root requires exactly one element vue/no-multiple-template-root ... 解决办法: .eslint ...

  6. Linux C++ Reactor模式

    文件结构 reactor_main.cpp reactor_server.cpp reactor_server.h CMakeLists.txt CMakeLists.txt cmake_minimu ...

  7. 【已解决】vscode窗口控制台闪现（不用更改原代码）

    打开launch.json 将"type": "cppdbg"改为"type": "cppvsdbg" 会出现密钥ext ...

  8. Docker的基本原理及使用

    Docker 安装 https://docs.docker.com/engine/install/ubuntu/ 应用场景 Web 应用的自动化打包和发布. 自动化测试和持续集成.发布. 在服务型环境 ...

  9. Java 对象头那点事

    概览 对象头 存放:关于堆对象的布局.类型.GC状态.同步状态和标识哈希码的基本信息.Java对象和vm内部对象都有一个共同的对象头格式. (后面做详细介绍) 实例数据 存放:类的数据信息,父类的信息 ...

  10. django基础--02基于数据库的小项目

    摘要:简单修改.增加部分页面,了解django开发的过程.(Python 3.9.12,django 4.0.4 ) 接前篇,通过命令: django-admin startproject myWeb ...