js写很菜的轮播图

来源：互联网发布：阿里云新注册编辑：程序博客网时间：2024/06/03 18:01

    <div id="imgs">        <img src="img/xmad_1496676101228_Tjuqb.jpg" alt="">        <img src="img/xmad_14954204614402_ryTxl.jpg" alt="">        <img src="img/xmad_14962269003907_VWLCx.jpg" alt="">        <img src="img/xmad_14970180755263_SbmYT.jpg" alt="">        <img src="img/xmad_14970188542193_PCzUo.jpg" alt="">        <img src="img/xmad_14970190941587_RoJKv.jpg" alt="">        <a href="javascript:;"class="pre move" id="pre"><</a>        <a href="javascript:;"class="next move" id="next"> ></a>        <ul>            <li style="background: rgba(255,255,255,.5)"></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>        </ul>    </div>

------------------------------------------------------------------

#imgs{    width: 1226px;    height: 460px;    position: relative;}#imgs ul{    position: absolute;    bottom: 10px;    right: 10px;    z-index: 100px;}#imgs ul li{    float: left;    width: 10px;    height: 10px;    border: 2px solid #b0b0b0;    border-radius: 50%;    background: rgba(0,0,0,.3);    margin-right: 5px;}#imgs img{    width: 1226px;    height: 460px;    position: absolute;    top:0;    left:0;}

-------------------------------------------

window.onload = function (){        var imgs = document.getElementById('imgs');  //抓外层盒子        var imgss = imgs.getElementsByTagName('img');  //抓所有图片        var pre = document.getElementById('pre');   //抓上翻按钮        var next = document.getElementById('next'); // 抓下翻按钮        var li = imgs.getElementsByTagName('li');   //抓所有小点        var num = 0;    //设置变量        function hidd()   //隐藏        {            for(var i = 0; i < imgss.length; i++)   //遍历所有图片，全部隐藏            {                imgss[i].style.display = 'none';            }            imgss[num].style.display = 'block';  // 只让数值是num 的显示            for(var k = 0; k < li.length; k++)   //遍历所有点， 让全部隐藏            {                li[k].style.background = 'none';            }            li[num].style.background = 'rgba(255,255,255,.5)';  //只让是num 的显示        }        var timer = setInterval(run,3000);  //设置定时器，以便轮播        function run() {            num++;            if (num == imgss.length)  //当num的值== 所有img图片的长度时，让 num = 0；            {                num = 0;            }            hidd();        }            imgs.onmouseover = function ()   //当鼠标经过盒子时， 让图片停止轮播            {                clearInterval(timer);            }            imgs.onmouseout = function ()   // 当鼠标离开盒子时，让图片继续轮播           {                timer = setInterval(run,3000);            }            pre.onclick = function ()   //当点击上翻按钮时，num自减1            {                num = num-1;                if (num == -1)   //如果num == -1时。                {                    num = imgss.length-1;  //将所有图片长度-1 给num， 因为num是从0开始的，所以要长度-1                }                hidd();   //调用函数执行            }            pre.onmouseover = function ()            {                pre.style.background = 'rgba(0,0,0,.5)';            }            pre.onmouseout = function ()            {                pre.style.background = 'none';            }            next.onclick = function ()  //当点击下翻按钮时。            {                num = num + 1;                if (num == imgss.length)  //如果num == 所有图片长度                {                    num = 0;   //让num = 0，                }                hidd();   //执行函数            }            next.onmouseover = function ()            {                next.style.background = 'rgba(0,0,0,.5)';            }            next.onmouseout = function ()            {                next.style.background = 'none';            }            for(var j = 0; j < li.length; j++)   //给每个点 添加点击事件            {                li[j].index = j;    //  将点击的值保存                li[j].onclick = function ()                {                    var S = this.index;   //                    num = S;                    hidd()                }            }

｝

阅读全文

0 0