使用js实现图片轮滑效果

来源：互联网发布：淘宝客推广教程全攻略编辑：程序博客网时间：2024/04/30 15:54

经常在购物网站，看到那种图片轮滑的效果，所以看到有人实现了，所以我也就学习下了。
首先贴出html代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>document</title>    <link rel="stylesheet" type="text/css" href="style.css">    <script type="text/javascript" src="javascript.js"></script></head><body><div id="flash">    <ul id="pic">        <li style="display:block"><img src=""></li>        <li><img src="" ></li>        <li><img src=""></li>        <li><img src=""></li>        <li><img src=""></li>        <li><img src=""></li>    </ul>    <ol id="num">        <li class="activate">1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>    </ol>    <a href="javascript:;" class="arrow" id="left">&lt;</a>    <a href="javascript:;" class="arrow" id="right">&gt;</a></div></body></html>

图像的原路径我就不制定了，css文件

* {    margin: 0;    padding: 0;    list-style: none;}a{    text-decoration: none;    color: #fff;}#flash{    width: 730px;    height: 454px;    margin: 100px auto;    position: relative;    cursor: pointer;}#pic li{    position: absolute;    top: 0;    left: 0;    z-index: 1;    display: none;}#num{    position: absolute;    left: 40%;    bottom: 10px;    z-index: 2;    cursor:default;}#num li{    float: left;    width: 20px;    height: 20px;    border-radius: 50%;    background: #666;    margin: 3px;    line-height: 20px;    text-align: center;    color: #fff;    cursor: pointer;}#num li.active{    background: #f00;}.arrow{    height: 60px;    width: 30px;    line-height: 60px;    text-align: center;    display: block;    position: absolute;    top:45%;    background-color: rgba(0,0,0,0.3);    z-index: 3;    display: none;}.arrow:hover{    background: rgba(0,0,0,0.7);}#flash:hover .arrow{    display: block;}#left{    left: 2%;}#right{    right: 2%;}

js代码：

function $(id) {    return typeof id==='string'?document.getElementById(id):id;}window.onload=function(){    var index=0;    var timer=null;    var pic=$("pic").getElementsByTagName("li");    var num=$("num").getElementsByTagName("li");    var flash=$("flash");    var left=$("left");    var right=$("right");    //单击左箭头    left.onclick=function()    {        index--;        if (index<0)        {index=num.length-1};        changeOption(index);    }    //单击右箭头    right.onclick=function(){        index++;        if (index>=num.length) {index=0};        changeOption(index);    }    //鼠标划在窗口上面，停止计时器    flash.onmouseover=function(){        clearInterval(timer);    }    //鼠标离开窗口，开启计时器    flash.onmouseout=function()    {        timer=setInterval(run,2000)    }    //鼠标划在页签上面，停止计时器，手动切换    for(var i=0;i<num.length;i++)    {        num[i].id=i;        num[i].onmouseover=function()        {            clearInterval(timer);            changeOption(this.id);        }    }    //定义计时器    timer=setInterval(run,2000)    //封装函数run    function run(){        index++;        if (index>=num.length) {index=0};        changeOption(index);    }    //封装函数changeOption    function changeOption(curindex)    {        console.log(index)        for(var j=0;j<num.length;j++){            pic[j].style.display="none";            num[j].className="";        }        pic[curindex].style.display="block";        num[curindex].className="active";        index=curindex;    }}

如果想看结果可以上http://neal1991.pythonanywhere.com，这个有实现结果的。

1 0