焦点图片轮播代码

来源：互联网发布：淘宝网完美芦荟胶编辑：程序博客网时间：2024/05/18 01:37

最近学习了一下通过js来控制焦点图片轮播，学习的目的是领悟代码实现过程和实现思路，以下附上代码，可以学习学习领悟一下：
HTML文件mytest.html:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>测试焦点轮播图片</title>        <link rel="stylesheet" href="css/mytest.css" />        <script type="text/javascript" src="js/mytest.js" ></script>    </head>    <body>        <div class="mydiv" id="mydiv">            <div class="mydiv01">              <ul>                <li><img src="images/1.jpg" width="500" height="200" /></li>                <li><img src="images/2.jpg" width="500" height="200" /></li>                <li><img src="images/3.jpg" width="500" height="200" /></li>                <li><img src="images/4.jpg" width="500" height="200" /></li>                <li><img src="images/5.jpg" width="500" height="200" /></li>              </ul>            </div>            <ol>            </ol>        </div>    </body></html>

样式文件mytest.css:

*{padding: 0;margin: 0;list-style: none;border: 0;}body{background: #FFFF00;}/******************/.mydiv{width: 500px; height: 200px; padding: 7px;border: 1px solid red; margin: 100px auto; position: relative;}.mydiv01{    width: 500px;     height: 200px;     overflow: hidden;    position: relative;    }.mydiv01 ul{    position: absolute;    left: 0px;    top: 0;    width: 3000px;}.mydiv01 ul li{    width: 500px;    height: 200px;    overflow: hidden;    float: left;} .mydiv ol{    position: absolute;    right: 10px;    bottom: 10px;    line-height: 20px;}.mydiv ol li{    float: left;    width: 15px;    height: 15px;    background: #fff;    margin-left: 5px;    cursor: pointer;    font-size: 10px;    font-family: verdana;    line-height: 15px;    border-radius: 15px;    text-align: center;}.mydiv ol li.current{ background: yellow;}

javascript脚本文件mytest.js:

//页面加载时要执行的函数window.onload= function(){    //获取大盒子mydiv    var mydiv=document.getElementById("mydiv");    //获取第一个盒子的UL节点    var ul=mydiv.children[0].children[0];    //获取UL中的所有子节点    var ullis=ul.children;    //克隆ul第一个字节点到最后    ul.appendChild(ullis[0].cloneNode(true));    //获取大盒子mydiv第二个子节点    var ol=mydiv.children[1];    //在ol下创建li子节点    for(var i=0;i<ullis.length-1;i++){        //创建li节点元素        var li=document.createElement("li")        //为创建的节点赋值        li.innerHTML=i+1;        //将创建的子节点作为ol的子节点        ol.appendChild(li);    }    //获取ol中所有子节点    var ollis=ol.children;    //初始化第一个子节点类选择器为current    ollis[0].className="current";    //开始动画，遍历所有ol子节点并为其赋值特定属性    for(var j=0;j<ollis.length;j++){        //为每个li元素赋值索引        ollis[j].index=j;        //为每个li元素添加鼠标事件        ollis[j].onmouseover=function(){            //清除所有类选择器            for(var k=0;k<ollis.length;k++){                ollis[k].className="";            }            //设置当前元素类选择器            this.className="current";            //调用动画函数            animate(ul,-this.index*ullis[0].offsetWidth);            //鼠标经过key square要等于当前索引（key:用来控制图片的键，square:用来控制的小方块）            key=square=this.index;        }    }    //定时器部分    var timer=0;    //定义控制图片的键    var key=0;    //定义控制小方块的键    var square=0;    //设置定时器的时间间隔为3秒执行一次指定函数    timer=setInterval(autoplay,3000);    //定义自动播放函数    function autoplay(){        //图片控制部分        key++;        if(key>ullis.length-1){            ul.style.left=0;            //第6张图片是第一张，所以从第2开始重新播放            key=1;        }        //调用动画函数        animate(ul,-key*ullis[0].offsetWidth);        //小方块控制部分        square++;        square=square>ollis.length-1? 0 :square;        for(var i=0;i<ollis.length-1;i++){            ollis[i].className="";        }        ollis[square].className="current";    }    //鼠标经过时停止定时器    mydiv.onmouseover=function(){        //清除定时器        clearInterval(timer);    }    //鼠标离开时启用定时器    mydiv.onmouseout=function(){        //设置定时器        timer=setInterval(autoplay,3000)    }}//obj：做动画的对象，target:当前动画相对于下一个动画的距离function animate(obj,target){    //开启定时器之前把前面的定时器清楚掉    clearInterval(obj.timer);    var speed=obj.offsetLeft<target? 15 :-15;    obj.timer=setInterval(function(){        //若result为0则说明完全相等        var result=target-obj.offsetLeft;        //动画原理        obj.style.left=obj.offsetLeft+speed+"px";        if(Math.abs(result)<=15){            //抖动            obj.style.left=target+"px";            clearInterval(obj.timer);        }    },10)}

以下是实现效果截图：
这里写图片描述

0 0