<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        ul,ol{

            list-style:none;

        }

        #demo{

            width:500px;

            height:200px;

            border:1px solid black;

            margin:100px auto;

            padding:3px;

            background-color: #ccc;

            position:relative;

        }

        #picbox{

            width:100%;

            height:100%;

            position: relative;

            overflow:hidden;

        }

        #picbox ul{

            position:absolute;

            width:3000px;

            height:200px;

        }

        #picbox ul li{

            float:left;

        }

        #demo ol{

            position:absolute;

            right:10px;

            bottom:10px;

            line-height:20px;

            text-align:center;

        }

        #demo ol li{

            float:left;

            width:20px;

            height:20px;

            background:#fff;

            border:1px solid #ccc;

            margin-left:10px;

            cursor:pointer

        }

        #demo ol .current{

            background-color: yellow;

        }

    </style>

    <script src="../my.js"></script>

</head>

<body>

    <div id="demo">

        <div id="picbox">

            <ul id="ul">

                <li><img src="taobao/1.jpg" alt=""></li>

                <li><img src="taobao/2.jpg" alt=""></li>

                <li><img src="taobao/3.jpg" alt=""></li>

                <li><img src="taobao/4.jpg" alt=""></li>

                <li><img src="taobao/5.jpg" alt=""></li>

            </ul>

        </div>

    </div>

</body>

</html>

<script>

    var demo=document.getElementById("demo");

    var picbox=document.getElementById("picbox");

    var ul=document.getElementById("ul");

    var ulkids=ul.children;

    ul.appendChild(ulkids[0].cloneNode(true)); //把ul中的第一张图片克隆添加到ul中去

    var ol=document.createElement("ol"); //demo里面添加ol

    demo.appendChild(ol);

    for(var i=0;i<ulkids.length-1;i++)  //ol里面添加li

    {

        var li=document.createElement("li");

        ol.appendChild(li);

        li.innerHTML=i+1;

    }

    ol.children[0].className="current";

    //动画效果

    var olkids=ol.children;

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

    {

        olkids[i].index=i;

        olkids[i].onmouseover=function () {

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

            {

                olkids[j].className="";

            }

            this.className="current";

            run(ul,-this.index*500);//调用匀速运动动画封装函数，谁做动画，哪个方向移动多少

            pic=anniu=this.index;//鼠标碰到按钮上，都以当前的索引号为主

        }

    }

    //轮播图每隔1秒钟自动播放，设置定时器

    var timer=null;

    var pic=0;//控制播放张数

    var anniu=0;//控制播放按钮

    timer=setInterval(autoplay,1000);

    function autoplay()

    {

        pic++; //先加加

        if(pic>ulkids.length-1) //后判断,播放了5张图之后

        {

            ul.style.left=0; //迅速切到第1张

            pic=1;//然后从第2张开始播放 ,因为第6张就是第1张

        }

        run(ul,-pic*500);//再执行

        anniu++;//先加加

        if(anniu>olkids.length-1) //后判断 ,因为序列号从0到4，所以需要减一

        {

            anniu=0;

        }

        for(var i=0;i<olkids.length;i++)  //再执行

        {

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

            {

                olkids[j].className="";

            }

            olkids[anniu].className="current"; //播放了0张，第0个按钮黄色，播放了1张，第1个按钮黄色

        }

    }

    //最后，鼠标经过大盒子，清除定时器，离开时又开始定时器

    demo.onmouseover=function () {

        clearInterval(timer);

    }

    demo.onmouseout=function () {

        timer=setInterval(timer);

    }

    //匀速运动动画封装函数

    function run(obj,target)

    {

        var speed=(target-obj.offsetLeft)>0 ?  10 : -10;  //用来判断应该往前走还是后退

        clearInterval(obj.timer);

        obj.timer=setInterval(function(){

            var result=target-obj.offsetLeft; //盒子距离目标位置的距离

            if(Math.abs(result)<=10) //盒子距离目标位置的距离在步长10以内时，说明到位置了，因为不会在10以内

            {

                obj.style.left=target+"px";

                clearInterval(obj.timer);

            }

            else{

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

            }

        },10)

    }

</script>

　　

效果：1，轮播图要无缝滚动（处理：5张轮播图的最后再添加一张轮播图，即添加第一张图片放在最                  后）

　　    2，右下方的按钮跟随轮播图的滚动而滚动（pic=anniu=this.index，鼠标碰到按钮上，都以当                    前的索引号为主)

　　    3，自动播放，设置定时器。

关键代码：

1，布局：（5个按钮在js里面添加)

<div id="demo">

    <div id="picbox">

           <ul>

               <li><img src="taobao/5.jpg" alt=""></li>

               <li><img src="taobao/5.jpg" alt=""></li>

               <li><img src="taobao/5.jpg" alt=""></li>

               <li><img src="taobao/5.jpg" alt=""></li>

               <li><img src="taobao/5.jpg" alt=""></li>

           </ul>

    </div>

</div>

2，把ul里面的第一张图片克隆添加到ul里面去

ul.appendChild( ulkids[],cloneNode(true));

3,demo里面添加ol , 然后通过for循环添加 li ，并且第一个li 的当前样式--背景颜色是黄色

var ol=document.createElement("ol");

demo.appendChild(ol);

for(var i=;i<ulkids.length-;i++)

{

     var li=document.createElement("ll");

    ul.appendChild(li);

    li.innerHTML=i+;

}

ol.children[].className="current";

4, 动画，首先实现效果：鼠标移动哪个按钮上方，哪个按钮就变成黄色背景，需要遍历所有按钮，然后利用排他思想让所有按钮失去背景而当前按钮黄色背景。

当鼠标移动到第一个按钮，ul 的 left 值为0，移动到第二个按钮，left值减去一张图片的长度，依次，所以需要自定义当前按钮的索引号 index 属性，遍历所有按钮时，ul 的 left值就是当前索引号乘以一张图片的宽度的负值。

最后，鼠标移动到当前按钮，要把当前按钮的索引号的值赋给pic和anniu

var olkids=ol.children;

for(var i=;i<olkids.length;i++)

{

   olkids[i].index=i;

   olkids[i].onmouseover=function(){

       for(var j=;j<olkids.length;j++)

        {

            olkids[i].className="";

        }

        this.className="current";

        run(ul ,  -this.index*);

        pic=anniu=this.index;

   }

}

5，轮播图每个一秒钟自动播放，设置定时器

pic  控制播放张数

anniu  控制播放按钮

封装一个自动播放函数（图片播放和按钮播放，都是先++后判断再执行）

注意图片的自动播放：播放到第5张之后（pic> ulkids.length-1) ，迅速切到第一张图片( ul.style.left=0), 然后从第二张图片开始播放，因为第一张已经播放过了（第六张就是第一张)

注意按钮的自动播放：按钮播放到最后一个的判断是 if(anniu>olkids.length-1)， 减一是因为序列号是从0到4，播放到最后一个按钮之后，又从第一个按钮开始播放(anniu=0) 。最后按钮播放的执行是通过排他思想.

var timer=null;

var pic=;

var anniu=;

timer=setInterval(autoplay,);

function autoplay()

{

   pic++;

   if(pic>ulkids.length-)

   {

       ul.style.left=;

       pic=;

   }

   run(ul, -pic*);

  anniu++;

  if(anniu>olkids.length-)

  {

       anniu=;

   }

  for(var i=; i<olkids.length; i++)

  {

      for(var j=; j<olkids.length;j++)

     {

         olkids[j].className="";

     }

     this.className="current";

  }

}

6, 最后一步，鼠标经过大盒子，清除定时器，取消自动播放，鼠标离开时自动播放又开始.

demo.onmouseover=funciton()

{

   clearInterval(timer);

}

demo.onmouseout=function(){

  timer.setInterval(timer);

}

轮播图--js课程的更多相关文章

  1. 轮播图--JS手写

    轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> < ...

  2. 轮播图js版&jQ版

    JS版轮播图 html部分和css部分自己任意定 主要构成: 1,一个固定的框 超出框的部分隐藏 2,几张图片float:left 3,下部下原点,点击切换,切换到不同的张都有红色显示 4,左右两个大 ...

  3. 小米官网轮播图js+css3+html实现

    官网轮播: 我的轮播: 重难点: 1.布局 2.图片和右下角小圆点的同步问题 3.setInterval定时器的使用 4.淡入淡出动画效果 5.左右箭头点击时,图片和小圆点的效果同步 6.另一种轮播思 ...

  4. 轮播图js编写

    //面向对象 function Left() { this.index = 0; this.lefthover = $('#left-content'); this.listenhover(); th ...

  5. 转：大气炫酷焦点轮播图js特效

    使用方法 Step 1. 在html的标签内引入相关文件 <script type="text/javascript" src="js/myfocus-2.0.0. ...

  6. banner轮播图js

    例子1: if(!$('.side_ul ul').is(":animated")){            var wli = $('.side_ul li').width()+ ...

  7. 简单介绍无限轮播图，js源代码

    无限轮播图js源代码,今天介绍一下用js简单的编写无限轮播图 <!DOCTYPE html> <html>   <head>     <meta charse ...

  8. App轮播图

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

随机推荐

  1. python-opencv中的cv2.inRange函数

    本次目标是将一副图像从rgb颜色空间转换到hsv颜色空间,颜色去除白色背景部分 具体就调用了cv2的两个函数,一个是rgb转hsv的函数 具体用法 hsv = cv2.cvtColor(rgb_ima ...

  2. BZOJ 1069 Luogu P4166 最大土地面积 (凸包)

    题目链接: (bzoj)https://www.lydsy.com/JudgeOnline/problem.php?id=1069 (luogu)https://www.luogu.org/probl ...

  3. 探究代码审查（Code review）

    Code review 是什么 对软件源代码的系统性检查,查找软件源代码质量,结构,漏洞等问题. PS:Code review  ≍ Code inspections ≥ Code walkthrou ...

  4. 异步分发任务celery

    Celery简介 Celery是一个功能完备即插即用的任务队列.它使得我们不需要考虑复杂的问题,使用非常简单. celery适用异步处理问题,当遇到发送邮件.或者文件上传, 图像处理等等一些比较耗时的 ...

  5. centos官网镜像下载方法

    1.CentoS简介 CentOS(Community Enterprise Operating System,社区企业操作系统)是一个基于Red Hat Linux 提供的可自由使用源代码的企业级L ...

  6. diff()函数

    1 diff()是将原来的数据减去移动后的数据. 在numpy和pandas中都能调用. pandas的调用方法: import pandas as pd df = pd.DataFrame( {'a ...

  7. delphi xe2 64位嵌入汇编问题 https://bbs.csdn.net/topics/390333981

    Function xxx(xxx):xxx;assembler;asm  XOR RAX , RAX  ...end;这样的可以. 0 0 引用 ・ 举报 ・ 管理 5t4rk   回复于 2013- ...

  8. go bigfile （文件传输管理系统）前端分片上传demo

    BIGFILE Github地址: https://github.com/bigfile/bigfile 欢迎大家前来issue & star BIGFILE 中文文档地址:https://l ...

  9. 各种CNN模型

    Resnet: model_urls = { 'resnet18': 'https://download.pytorch.org/models/resnet18-5c106cde.pth', 'res ...

  10. 20191127 Spring Boot官方文档学习（6-8）

    6.部署Spring Boot应用程序 在部署应用程序时,Spring Boot的灵活打包选项提供了很多选择.您可以将Spring Boot应用程序部署到各种云平台,容器映像(例如Docker)或虚拟 ...