上效果：

实现步骤：

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

 <!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. MyBatis配置文件(五)－－objectFactory对象工厂

    我们在使用MyBatis执行查询语句的时候,通常都会有一个返回类型,这个是在mapper文件中给sql增加一个resultType(或resultMap)属性进行控制.resultType和resul ...

  2. 前端存取cookie

    1.存cookie document.cookie="user_phone="+loginMake1Value;//存手机号码cookie//'user_phone'为cookie ...

  3. 阿里面试题，为什么wait()方法要放在同步块中？

    某天我在***的时候,突然有个小伙伴微信上说:“哥,阿里面试又又挂了,被问到为什么wait()方法要放在同步块中,没答出来!” 我顿时觉得**一紧,仔细回顾一下,如果wait()方法不在同步块中,代码 ...

  4. LUOGU P1779 魔鬼杀手_NOI导刊2010提高（03）

    传送门 解题思路 背包,首先先用aoe都打残然后单伤补刀,用f[i]表示AOE打了i的伤害的最小花费,g[i]表示单伤打了i的伤害的最小花费. 代码 #include<iostream> ...

  5. 20190809-RP？不存在的

    火苗静静的将世界荡涤. ??? 毁灭它,点亮它. 只发光不放热? 那是虚无, ……还有你我的遗言. 考试过程. 通看三题. 额嗯嗯,没想法. T1写个暴力吧. T2好像挺简单. T3好像还行?? T1 ...

  6. mysql 常用命令语法

    登录到mysql client 以windows下为例,打开cmd命令窗口,进入到mysql安装目录bin目录下,首先要启动mysql服务,执行命令: net start mysql,这里不需要分号. ...

  7. SpringBooot-基础<2>-POM.xml配置

    SpringBooot-基础<2>-POM.xml配置 项目创建完成后,需要配置pom.xml文件. pom.xml里面的配置,按需进行添加,这里提供一份参考,后面做笔记会都用到. < ...

  8. python Pandas文件读写

  9. python 内置操作函数

  10. JS中document对象和window对象的区别

    简单来说,document是window的一个对象属性. Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 win ...