码迷,mamicode.com
首页 > Web开发 > 详细

纯js轮播测试版

时间:2018-01-25 20:47:11      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:body   black   time   test   rgba   pre   head   颜色   text   

这是一个纯js写的轮播测试版,代码有待改进

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="js/function.js"></script>
    <style type="text/css">
        .ndiv{
            width: 2060px;
            position: relative;
        }
        .wdiv{
            width: 497px;
            overflow: hidden;
            height: 177px;
            position: relative;
        }
        img{
            
            margin-left: -4px;
        }
        ul{
margin-top: -50px;

        }
        li{
            list-style: none;
            width: 20px;
            height: 20px;
            float: left;
            background-color: blue;
            text-align: center;
            line-height: 20px;
            border-radius: 50%;
            color: white;
            margin-right: 10px;
        }
        .nu{
            position: relative;
            width: 180px;
            margin:0 auto;
            z-index: 999;
        }
        .wdiv:hover .ltr{
            width: 40px;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: rgba(255,0,255,0.6);

        }
        .wdiv:hover .rtl{
            width: 40px;
            height: 100%;
            position: absolute;
            top: 0px;
            right: 0px;
            background-color: rgba(255,0,255,0.6);

        }
    </style>
</head>
<body>
<div class="wdiv"> <div class="ndiv"> <img src="img/s_banner1.jpg" width="500" > <img src="img/s_banner2.jpg" width="500" > <img src="img/s_banner3.jpg" width="500" > <img src="img/s_banner1.jpg" width="500" > </div>
//轮播的3张图片,最后一张图伪装成第一张图,达到“好像回到开头”的感觉
<div class="nu"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div>
//li标签里是切换的按钮(功能未实装)
<div class="ltr"></div> <div class="rtl"></div> </div> <script type="text/javascript"> var clo=setTimeout(function(){clo2=setInterval(ds, 1)},2000); i=i+2; var time=0; getTag(div)[1].style.marginLeft="0px"; var i=0; test(); getTag("li")[0].style.background="white"; getTag("li")[0].style.color="black"; function ds(){ if (i<=500) { i=i+1; time=time-1; test(); getTag("li")[1].style.background="white"; getTag("li")[1].style.color="black"; getTag(div)[1].style.marginLeft=time+"px"; }else if(i>=501&&i<=502){ clearTimeout(clo); clearInterval(clo2); setTimeout(function(){clo2=setInterval(ds, 1)},2000); i=i+1; }else if(i>=501&&i<=1000){ i=i+1; time=time-1; test(); getTag("li")[2].style.background="white"; getTag("li")[2].style.color="black"; getTag(div)[1].style.marginLeft=time+"px"; }else if (i>=1001&&i<=1002) { clearTimeout(clo); clearInterval(clo2); setTimeout(function(){clo2=setInterval(ds, 1)},2000); i=i+1; }else if (i>=1002&&i<=1500){ i=i+1; time=time-1; test(); getTag("li")[0].style.background="white"; getTag("li")[0].style.color="black"; getTag(div)[1].style.marginLeft=time+"px";} else if (i>=1501&&i<=1502) { i=i+1; clearTimeout(clo); clearInterval(clo2); setTimeout(function(){clo2=setInterval(ds, 1)}); }else if (i>=1502&&i<=1503){ clearTimeout(clo); clearInterval(clo2); getTag("li")[0].style.background="white"; getTag("li")[0].style.color="black"; setTimeout(function(){clo2=setInterval(ds, 1)},2000); i=0; time=0; } } function test(){ for (var i = 0; i < 3; i++) { getTag("li")[i].style.background="blue"; getTag("li")[i].style.color="white"; } }
//在js中操控定时器来达到滚动的效果,用延时定时器达到停止一会
//test函数配合数字初始化背景颜色和字体颜色
</script> </body> </html>

 

纯js轮播测试版

标签:body   black   time   test   rgba   pre   head   颜色   text   

原文地址:https://www.cnblogs.com/LastFire/p/8352923.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!