<!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. Elasticsearch上手指南

    目录 ElasticStack及Elasticsearch介绍 Elasticsearch安装 Elasticsearch入门 Elasticsearch配置 Elasticsearch REST A ...

  2. flex布局 （转）

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  3. 查找SQL SERVER卡顿语句

    SELECT [session_id], [blocking_session_id] AS '正在阻塞其他会话的会话ID', DB_NAME([database_id]) AS '数据库名称', [r ...

  4. python学习-Day26

    目录 今日内容详细 编程思想 面向过程编程 面向对象编程 类与对象 概念 类与对象的创建 先定义类 后产生对象 语法结构 如何产生对象 对象的实例化 绑定方法 今日内容详细 编程思想 面向过程编程 将 ...

  5. SDDC的Windows初体验-QT篇

    前言 如果熟悉爱智和看过我之前文章的朋友见到这篇文章一定会有很大疑问,SDDC 作为智能设备发现控制协议,怎么会用在 windows 上? 这一切还是源自于我巨大的脑洞,因为这段在搞 Windows ...

  6. [ubuntu18.04 python3.6] 清华源 CondaHTTPError: HTTP 000 CONNECTION

    问题 嫌官网源安装jupyter notebook太慢,所以尝试修改为清华源,但每次在Solving environment的时候就报错如下: 解决方法,修改conda配置信息: vim ~/.con ...

  7. Oracle查看表空间大小

    遇到报错 java.sql.SQLException: ORA-01653: 表 MESHIS.HIS_RET_LOT_FQC 无法通过 8 (在表空间 MESHIS_DATA_TBS 中) 扩展 a ...

  8. Linux内存、Swap、Cache、Buffer详细解析

    关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 1. 通过free命令看Linux内存 total:总内存大小. used:已经使用的内存大小 ...

  9. 忘带U盘了？？别急！一行python代码即可搞定文件传输

    近日发现了python一个很有趣的功能,今天在这里给大伙儿做一下分享 需求前提 1.想要拷贝电脑的文件到另一台电脑但是又没有U盘2.手机上想获取到存储在电脑的文件3.忘带U盘- 您也太丢三落四了吧,但 ...

  10. 一文看懂：网址，URL，域名，IP地址，DNS，域名解析

    一个执着于技术的公众号 前言 今天给大家梳理一篇关于网址.URL.IP地址.域名.DNS.域名解析的白话长文,并以简单的提问-解答 形式让读者更加深刻理解,希望有助于读者的学习,面试和工作! 1.一个 ...