上效果：

实现步骤：

最重要的是运动公式！！！

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>总有人比你富有，却比你更聪明更努力！</title>

     <style type="text/css">

         /* css 重置 */

         * {

             margin: 0;

             padding: 0;

             list-style: none;

         }

         body {

             background: #fff;

             font: normal 12px/22px 宋体;

         }

         img {

             border: 0;

         }

         a {

             text-decoration: none;

             color: #333;

         }

         /* 本例子css */

         .slideBox {

             width: 790px;

             height: 340px;

             overflow: hidden;

             position: relative;

             border: 1px solid #ddd;

             margin: 50px auto;

         }

         .bd .hd {

             height: 20px;

             /*overflow: hidden;*/

             position: absolute;

             right: 5px;

             bottom: 5px;

             z-index: 1;

             width: 16%;

         }

         .bd .hd ul {

             /*overflow: hidden;*/

             zoom: 1;

             float: left!important;

         }

         .bd .hd ul li {

             margin-right: 5px!important;

             width: 20px;

             height: 20px;

             line-height: 20px;

             font-weight: bold;

             text-align: center;

             background: #fff;

             cursor: pointer;

             border-radius: 50%;

             float: left;

         }

         .bd .hd ul li.on {

             background: #f00;

             color: #fff;

         }

         .slideBox .bd {

             position: relative;

             height: 100%;

             z-index: 0;

         }

         .slideBox .bd ul{

             float: left!important;

             width: 600%;

             position: absolute;

         }

         /* -----------------------  */

         .slideBox .bd li {

             zoom: 1;

             vertical-align: middle;

             left: 0;

             top: 0;

             float: left;

         }

         /*.slideBox .bd li.first {*/

             /*z-index: 1;*/

         /*}*/

         /* -----------------------  */

         .slideBox .bd img {

             width: 790px;

             height: 340px;

             display: block;

         }

         .slideBox .prev,

         .slideBox .next {

             position: absolute;

             left: 0;

             top: 50%;

             margin-top: -25px;

             display: none;

             width: 32px;

             height: 40px;

             background: rgba(0,0,0,0.3);

             filter: alpha(opacity=50);

             opacity: 0.5;

             text-align: center;

             font-size: 30px;

             font-weight: bold;

             color: #fff;

             line-height: 40px;

         }

         .slideBox .next {

             left: auto;

             right: 0;

             background-position: 8px 5px;

         }

         .slideBox .prev:hover,

         .slideBox .next:hover {

             filter: alpha(opacity=100);

             opacity: 1;

         }

     </style>

 </head>

 <body>

 <div id="slideBox" class="slideBox">

     <div class="bd" id="bd">

         <div class="hd">

             <ul id="control"></ul>

         </div>

         <ul id="imgsUl"></ul>

         <a class="prev" id="prev" href="javascript:;" ><</a>

         <a class="next" id="next" href="javascript:;">></a>

     </div>

 </div>

 </body>

 </html>

 <script>

     // 记录当前图片下标-- 为了图片索引值同步

     var imgIndex = 0;

     var t = null; // 计时器变量

     var imgWidth =790;

     var target = 0 ; // 缓动动画移动目标和缓动动画开始位置

     var autoTimer;

     // 公共获取事件源函数

     function $(id) {

       return document.getElementById(id);

     }

     // 功能需求类似tab栏，也可参考线上轮播图效果

     // 获取轮播图区

     // 获取轮播图

     var imgArr = [

         "images/01.jpg",

         "images/02.jpg",

         "images/03.jpg",

         "images/04.jpg",

         "images/05.jpg"

     ];

     //自动生成小红点li

     // 默认设置第一个li的className是on

     // 生成第一个默认li带并设置className = "on"

     var liArr = [];

     for(var i = 0 ; i < imgArr.length ; i++ ) {

         liArr.push('<li></li>')

     }

     // 转换成字符串

     $('control').innerHTML = liArr.join('');

     // 设置属性

     $('control').children[0].setAttribute("class","on")

     // 自动生成图片li

     var imgUl = $("imgsUl");

     var imgsLis = [];

     for(var i = 0 ; i < imgArr.length ; i++ ) {

         imgsLis.push('<li><a href="#"><img id="bigImg" src="'+imgArr[i]+'"/></a></li>')

     }

     // 转换成字符串

     imgUl.innerHTML = imgsLis.join('');

     // 克隆第一张图片li

     imgUl.appendChild(imgUl.children[0].cloneNode(true));

     // 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮

     $('bd').onmouseover = function () {

         $('prev').style.display = "block";

         $('next').style.display = "block";

     }

     $('bd').onmouseout = function () {

         $('prev').style.display = "none";

         $('next').style.display = "none";

     }

     // 圆点鼠标移到上面图片轮播

     var liBtns = $('control').getElementsByTagName('li');

     for (var i = imgIndex ; i < liBtns.length ; i++) {

         // 设置当前按钮下标

         liBtns[i].index = i;

         liBtns[i].onmouseover = function () {

             imgIndex = this.index;

             // 开启的缓动动画的计时器

             startInterval(imgIndex);

         }

     }

     /*上下轮播图*/

     // 下一张轮播图

     $('next').onclick = function () {

         clearInterval(t);

         imgIndex++;

         if(imgIndex == imgUl.children.length ) {

             imgUl.style.left = 0;

             imgIndex = 1;

         }

         startInterval(imgIndex);

     };

     // 上一张轮播图

     $('prev').onclick = function () {

         clearInterval(t);

         imgIndex--;

         if(imgIndex == -1 ) {

             imgUl.style.left = -imgWidth*(imgUl.children.length-1) +"px";

             imgIndex = imgUl.children.length - 2;

         }

         startInterval(imgIndex);

     }

     // 开启缓动动画计时器

   function startInterval(index) {

       // 关闭缓动动画计时器

       clearInterval(t);

       for(var j = 0 ; j < liBtns.length ; j++) {

           liBtns[j].className = "";

       }

       liBtns[index%5].className = 'on';

       console.log(target+'ttt');

       t = setInterval(function () {

           // 无缝轮播图片

           target = -index * imgWidth;

           var speed = (target-imgUl.offsetLeft)/7;

           speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

           if(target == imgUl.offsetLeft) {

               clearInterval(t);

           }else{

               imgUl.style.left = imgUl.offsetLeft + speed + "px";

           }

       },30);

   }

 </script>

JavaScript--缓动动画+轮播图的更多相关文章

  1. 【JavaScript】固定布局轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. javascript无缝流畅动画轮播，终于让我给搞出来了。

    自己一直想写一个真正能用的轮播图,以前是写过一个,但是不是无缝的轮播,感觉体验很差,这个轮播之前也搞了很多实例,看了很多代码,但是脑子总转不过弯,为什么在运动到一定距离后可以突然转回到原始位置,而没有 ...

  3. 简要分析javascript的选项卡和轮播图

    选项卡 思路 1.按钮和展示的页面要对应:分别遍历,记住当前按钮的索引,让其成为展示页面的索引 2.只出现所对应的页面:所有的页面隐藏,只展示想要的页面 只展示js代码 for(var i=0;i&l ...

  4. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

  5. photoSlider-原生js移动开发轮播图、相册滑动插件

    详细内容请点击 在线预览   立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...

  6. photoSlider-html5原生js移动开发轮播图-相册滑动插件

    简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...

  7. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  8. jQuery封装轮播图插件

    // 布局要求,必须有一个容器,图片和两个按钮,布局方式自定,小圆点样式固定 // <div class="all"> // <img src="img ...

  9. JS —— 轮播图中的缓动函数的封装

    轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...

随机推荐

  1. DVWA 之low级别sql注入

    将Security level设为low,在左侧列表中选择“SQL Injection”,然后在右侧的“User ID”文本框中输入不同的数字就会显示相应的用户信息. 我们首先需要判断这里所传输的参数 ...

  2. mongodb+nodejs 增删查的demo

    1.启动数据库 启动完成后显示 端口号是27017 2.创建数据库 创建一个名为mydb的数据库   3.先查询一下当然的用户,再新增一个 4.创建数据表,查询所有的表 db.createCollec ...

  3. 2019-8-31-C++-驱动开发-error-LNK2019-unresolved-external-symbol-__CheckForDebuggerJustMyCode-referenced-...

    title author date CreateTime categories C++ 驱动开发 error LNK2019 unresolved external symbol __CheckFor ...

  4. 开发者说 | 分布式事务中间件 Seata 的设计原理

    导读 微服务架构体系下,我们可以按照业务模块分层设计,单独部署,减轻了服务部署压力,也解耦了业务的耦合,避免了应用逐渐变成一个庞然怪物,从而可以轻松扩展,在某些服务出现故障时也不会影响其它服务的正常运 ...

  5. c++设计模式：策略模式

    1.主要思想:例如针对不同的算法,创建不同的类. #include <iostream> using namespace std; // The abstract strategy cla ...

  6. bzoj月赛1805

    题目在最后,FG还不会做,等着$NicoDafaGood$和$Achen$给我讲 A 对于每一个质因子建一棵线段树,直接查询就好了 主要是看到所有数的大小都不是很大,然后质因子最多只有log个,复杂度 ...

  7. TZ_06_SpringMVC_常用注解

    1. @Controller@RequestMapping(path = "/user")//一级目录 public class FormSubmit { @RequestMapp ...

  8. PHP拓展 - xhprof性能分析工具

    Windows安装 参考:https://www.cnblogs.com/buexplain/p/4821619.html dll文件下载:https://windows.php.net/downlo ...

  9. Vue.extend用法

    Vue.extend 是构造一个组件的语法器. 用法 Vue.extend ( options ),options 是对象: 使用基础Vue构造器,创建一个子类,参数是一个包含组件选项的对象,data ...

  10. How to class-dump iPad apps?

    http://stackoverflow.com/questions/4776593/how-to-class-dump-ipad-apps The issue here is that the bi ...