网赚妈妈

 找回密码
 立即注册
搜索
查看: 359|回复: 0

[网赚吧] H5+Css+Js制作banner轮播图

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-9-26 21:22:32 | 显示全部楼层 |阅读模式

    直接上代码:

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta charset="utf-8" />

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style id="css">

    body,ul,ol{

    margin: 0;padding: 0;list-style: none;

    }

    .box{width: 800px;margin: 50px auto;}

    .pickList{width:800px;height:360px;overflow: hidden;position: relative;cursor: pointer;}

    #btn{padding: 50px;height: 30px;position: relative;}

    #btn li{width: 30px;height: 30px;background: #000;color: #fff;text-align: center;float: left;margin: 0 10px;border-radius: 50%;}

    #btn li:hover:not(.active){cursor: pointer;}

    #btn .active{background: #f60;cursor: pointer;}

    </style>

    <script type="text/javascript">

    //首先我们要获取到他们,便于接下来操作

    window.onload=init;

    var index=1;

    var Lis=document.getElementsByTagName("li");

    var Img;

    //定时器(需要定义的函数,它的毫秒数)

    var timer;

    function init(){

    timer=setInterval("lunbo()",1800);

    //点击小圆点切换图片到指定位置

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

    Lis.onclick = function(){

    clearInterval(timer);

    index = this.innerHTML;

    //var Img=document.getElementById("img");

    Img.src="Image/"+index+".jpg";

    resetColor();

    Lis[index-1].style.background = "#f60";

    timer = setInterval("lunbo()",1800);

    }

    }

    }

    //利用定时器使图片达到轮播效果

    function lunbo(){

    index++;

    resetColor();

    if(index == 5){

    index=1;

    }

    Img=document.getElementById("img");

    Img.src="Image/"+index+".jpg";

    //var Lis=document.getElementsByTagName("li");

    Lis[index-1].style.background="#f60";

    }

    //小原点初始值颜色(定义函数,在定时器去调用它)

    function resetColor(){

    //var Lis=document.getElementsByTagName("li");

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

    Lis.style.background="rgba(0,0,0,1)";

    }

    }

    //鼠标移入和移出

    function stop(){

    clearInterval(timer);

    }

    function start(){

    //变量作用域,因为这边已经给它清除了,所以必须重新声明它.

    timer=setInterval("lunbo()",1800);

    }

    </script>

    </head>

    <body">

    <div class="box">

    <div id="banner" class="pickList" onmouseover="stop()" onmouseout="start()">

    <img id="img" src="Image/1.jpg" alt="" >

    </div>

    <ol id="btn">

    <li id="li1" class="active" >1</li>

    <li id="li2">2</li>

    <li id="li3">3</li>

    <li id="li4">4</li>

    </ol>

    </div>

    </body>

    </html>

    回复

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-17 20:59 , Processed in 0.167107 second(s), 14 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表