banner

作者: Jadon7 | 来源:发表于2018-10-09 07:24 被阅读0次

Banner轮播图，OK直接展示网络数据
android-banner项目的使用
在数据库获取某经纬度周边的商铺
js轮播实现
An_banner实现
自定义Banner
springboot管理banner
【Day13】I3小小投作业——一个好的Banner长什么样？
Android 搜索
SpringBoot修改启动Log

<!DOCTYPE html>
<html>
<head>
    <title>banner</title>
</head>
<script type="text/javascript">
    window.onload=function()
    {
        var oDiv=document.getElementById('div1');
        var oUl=oDiv.getElementsByTagName('ul')[0];
        var aLi=oDiv.getElementsByTagName('li');
        var aA=document.getElementsByTagName('a');

        var spead=3;

        aA[0].onclick=function()
        {
            spead=3;
        }

        aA[1].onclick=function()
        {
            spead=-3;
        }

        oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
        oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

        function loop(){
            if (oUl.offsetLeft<-oUl.offsetWidth/2)
            {
                oUl.style.left='0';
            }
            if (oUl.offsetLeft>0)
            {
                oUl.style.left=-oUl.offsetWidth/2+'px';
            }
            oUl.style.left=oUl.offsetLeft+spead+'px';
        }

        var timer=setInterval(loop,30);

        oDiv.onmouseover=function()
        {
            clearInterval(timer);
        }
        oDiv.onmouseout=function()
        {
            timer=setInterval(loop,30);
        }

    }
</script>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #div1{
        overflow: hidden;
        width: 800px;
        height: 150px;
        background: #eee; 
        position: relative;
        margin: 300px auto;
    }
    #div1 ul{
        position: absolute;
        left: 0;
        top: 0;
    }
    #div1 ul li{
        width: 200px;
        height: 150px;
        float: left;
        list-style: none;
    }
</style>
<body>
    <a href="javascript:;">right</a>
    <a href="javascript:;">left</a>
    <div id="div1">
        <ul>
            <li><img src="img2/1.png"></li>
            <li><img src="img2/2.png"></li>
            <li><img src="img2/3.png"></li>
            <li><img src="img2/4.png"></li>
        </ul>
    </div>
</body>
</html>