前端基本功：JS案例（七）动画: 轮播图（匀缓）、焦点图

无缝滚动

原理：
首先先复制两张图片（第一张和第二张）放到最后面（本质上是第 5.6张）

ul 是盒子移动的，如果ul 的left 值大于等于 4张图片的宽度，就应该快速复原为0 。

案例：

无缝滚动，鼠标放上时停止，移开则继续滚动.gif

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style:none;}
        img {vertical-align: top; }  /*取消图片底部3像素距离*/
        .box {
            width: 600px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            position: relative;
            overflow: hidden;
        }
        .box ul li {
            float: left;
        }
        .box ul {
            width: 400%;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div class="box" id="scroll">
    <ul>
        <li><img src="images/01.jpg" alt=""/></li>
        <li><img src="images/02.jpg" alt=""/></li>
        <li><img src="images/03.jpg" alt=""/></li>
        <li><img src="images/04.jpg" alt=""/></li>
        <li><img src="images/01.jpg" alt=""/></li>
        <li><img src="images/02.jpg" alt=""/></li>
    </ul>
</div>
</body>
</html>
<script>
    var scroll = document.getElementById("scroll");
    var ul = scroll.children[0];
    var num = 0; //控制左侧值  left
    var timer = null;  // 定时器
    timer = setInterval(autoPlay,20);
    function autoPlay() {
        num--;
        //console.log(num);
        num<=-1200 ? num = 0 : num;
        ul.style.left = num + "px";
    }
    scroll.onmouseover = function() {  // 鼠标经过大盒子  停止定时器
        clearInterval(timer);
    }
    scroll.onmouseout = function() {
        timer = setInterval(autoPlay,20);  // 开启定时器
    }

</script>

匀速动画

匀速动画.gif

匀速动画源码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            position: absolute;
            top:100px;
            left:0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<button id="btn">开始</button>
<div class="box" id="bOX">
</div>
</body>
</html>
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("bOX");
    var num = 0;
    var timer = null;
    btn.onclick = function() {
        timer = setInterval(function(){
            num++;
            if(num >=500)
            {
                clearInterval(timer);
            }
            else
            {
                box.style.left = num + "px";
            }
        },10)
    }
</script>

缓动动画

匀速动画，看起来，效果太简单。
缓动动画公式:
一个盒子初始值是 0 要走到 400 px 的位置
假如说，初始值 leader 0 target 400
box.style.left = xxxx + “px”

leader = leader + (target - leader ) /10 ;

缓动动画如下效果：

缓动动画.gif

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            position: absolute;
            top:100px;
            left:0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

<button id="btn">开始</button>
<div class="box" id="bOX"></div>
</body>
</html>
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("bOX");
    var timer = null;
    var leader = 0;
    var target = 500;
    btn.onclick = function() {
        setInterval(function(){
            leader = leader + (target - leader )/10;
            box.style.left = leader + "px";
        },30)
    }
</script>

焦点图：

焦点图.gif

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0; padding: 0;}
        ul,ol{list-style:none;}
        img {
            display: block;  /* 清除图片底册 3像素缝隙*/
        }
        .slider {
            width: 490px;
            height: 170px;
            border:1px solid #ccc;
            margin: 100px auto;
            padding:5px;
            position: relative;
        }
        .inner {
            width: 100%;
            height: 100%;
            background-color: pink;
            position: relative;
            /*overflow: hidden*/
        }
        .inner ul {
            width: 1000%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .inner ul li {
            float: left;
        }
        .slider ol {
            position: absolute;
            left: 50%;
            margin-left: -80px;
            bottom: 10px;

        }
        .slider ol li{
            float: left;
            width: 18px;
            height: 18px;
            background-color: #fff;
            margin-right: 10px;
            text-align: center;
            line-height: 18px;
            cursor: pointer;
        }
        .slider ol li.current {
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="slider" id="jd">
    <div class="inner">
        <ul>
            <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
        </ul>
    </div>
    <ol>
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>
</body>
</html>
<script>
    var  jd = document.getElementById("jd");
    var ul = jd.children[0].children[0];
    var ol = jd.children[1];
    var olLis = ol.children;
    var leader = 0, target = 0;  // target 目标位置
    for(var i=0; i<olLis.length; i++)
    {
        olLis[i].index = i;  // 每个li 的索引号
        olLis[i].onmouseover = function() {
            for(var j=0;j<olLis.length;j++)
            {
                olLis[j].className = "";
            }
            this.className = "current";
            target = -this.index * 490; // 目标位置 就是用当前的索引号乘以  一个盒子的宽度
        }
    }
    setInterval(function() {
        leader = leader + (target - leader ) / 10;
        ul.style.left = leader + "px";
    },30);


</script>

左右轮播图.gif

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,ul,ol,li,img{margin:0;padding:0;list-style:none;}
#box{width:490px;height:170px;padding:5px;
    position: relative;border:1px solid #ccc;margin:100px auto 0;overflow:hidden;}
.ad{width:490px;height:170px;overflow:hidden;position:relative;}
#box img{width:490px;}
.ad ol{position:absolute;right:10px;bottom:10px;}
.ad ol li{width:20px;height:20px;line-height:20px;border:1px solid #ccc;text-align:center;background:#fff;float:left;margin-right:10px;cursor:pointer;_display:inline;}
.ad ol li.current{background:yellow;}
.ad ul li{float:left;}
.ad ul{ position:absolute; top:0; width:2940px;}
.ad ul li.current{display:block;}
#arr {
    display: none;}
#arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;}
#arr #right{right:5px; left:auto;}
</style>
</head>
<body>
    <div id="box" class="all">
      <div class="ad">
        <ul id="imgs">
          <li><img src="images/1.jpg" /></li>
          <li><img src="images/2.jpg" /></li>
          <li><img src="images/3.jpg" /></li>
          <li><img src="images/4.jpg" /></li>
          <li><img src="images/5.jpg" /></li>
        </ul>
      </div>
        <div id="arr"><span id="left"><</span><span id="right">></span></div>
    </div>
</body>
</html>
<script>
    function $(id) {return document.getElementById(id)}
    var box = document.getElementById("box");
    box.onmouseover = function() {
        $("arr").style.display = "block";
    }
    box.onmouseout = function() {
        $("arr").style.display = "none";
    }

    $("right").onclick = function() {
        target -= 490;
    }
    $("left").onclick = function() {
        target += 490;
    }

    //缓动动画
    var leader = 0,target = 0;
    setInterval(function() {
        if(target >= 0)
        {
            target = 0;
        }
        else if(target <= -1960)
        {
            target = -1960;
        }
        leader = leader + (target - leader) / 10;
        $("imgs").style.left = leader + "px";
    },30)
</script>

以上素材图片获取：
链接：http://pan.baidu.com/s/1i5foF45 密码：l1hu

最后编辑于：2017.12.04 08:56:07

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,542评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,596评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,021评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,682评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,792评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,985评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,107评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,845评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,299评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,612评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,747评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,441评论 4赞 333
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,072评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,828评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,069评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,545评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,658评论 2赞 350

前端基本功：JS案例（七） 动画: 轮播图 （匀缓）、焦点图

无缝滚动

匀速动画

缓动动画

焦点图：

推荐阅读更多精彩内容

前端基本功：JS案例（七）动画: 轮播图（匀缓）、焦点图