<!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. 想减少代码量，快设置一个有感知的 Aware Spring Bean

    摘要:正常情况下,Spring 中的 Bean 对 Spring 是无感知的,Spring 框架提供了这种扩展能力,能让一个 bean 成为有感知的. 本文分享自华为云社区<有感知的 Aware ...

  2. Lumia一键刷稳定版 Win10 arm 及其报错处理

    前言 之前我发了一篇Lumia1520 刷Win10 arm双系统的文章,不过后来发现那个方法对小白来说太不友好,且系统也不稳定,所以我找到了更好的方法 刷机 我们可以利用刷机迷进行刷机,支持一键刷机 ...

  3. 5.Docker容器学习之新手进阶使用

    @ 原文地址:点击直达 学习参考:https://yeasy.gitbooks.io/docker_practice/repository/registry.html 0x00 前言简述 描述: 本章 ...

  4. 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法

    Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...

  5. 重磅！业界首个云原生批量计算项目Volcano正式晋级为CNCF孵化项目

    摘要:4月7日,云原生计算基金会(CNCF)宣布,由华为云捐献的业界首个云原生批量计算项目Volcano正式晋级为CNCF孵化项目. 4月7日,云原生计算基金会(CNCF)宣布,由华为云捐献的业界首个 ...

  6. 记录Neo4j上写的简单cypher语法

    neo4j是一个高性能的图形数据库,既然是数据库,那么主要操作就是增.删.改.查.所以进入正题: 一.CREATE:创建 语法如下: 1.create(变量名:标签名) :建立一个标签为Animal的 ...

  7. 基于.NetCore开发博客项目 StarBlog - (3) 模型设计

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  8. 【SpringBoot实战】视图技术-Thymeleaf

    前言 在一个Web应用中,通常会采用MVC设计模式实现对应的模型.视图和控制器,其中,视图是用户看到并与之交互的界面.对最初的Web应用来说,视图是由HTML元素组成的静态界面:而后期的Web应用更倾 ...

  9. WIN10 使用POWERSHELL 设置单应用KIOSK模式(win10家庭版或企业版)

    win10 使用PowerShell 设置单应用kiosk模式 win10 家版或企业版PowerShellshell 启动器 v1Autologon.exe 注意事项 win10 家庭版或企业版. ...

  10. animation—延迟和持续时间

    animation: moveToRight .75s 6s linear  infinite ;animation: moveToRight -.75s 1.5s  linear infinite; ...