千城hh 2019-10-20 11:33 采纳率: 33.3%
浏览 218

如果要把这个轮播图改成300*400的应该改哪些参数?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
    #box{
        width:100px;
        height:100px;
        border:1px solid black;
        position:relative;
        overflow:hidden;
    }
    #red{
        background-color:red;
        width:100px;
    }
    #green{
        background-color:green;
        width:100px;
    }
    #blue{
        background-color:blue;
        width:100px;
    }
    .slide{
        width:100px;
        height:100px;
        position:absolute;
    }
</style>
<script type="text/javascript">
    onload=function(){
        var arr = document.getElementsByClassName("slide");
        for(var i=0;i<arr.length;i++){
            arr[i].style.left = i*100+"px";
        }
    }
    function LeftMove(){
        var arr = document.getElementsByClassName("slide");//获取三个子div
        for(var i=0;i<arr.length;i++){
            var left = parseFloat(arr[i].style.left);
            left-=2;
            var width = 100;//图片的宽度
            if(left<=-width){
                left=(arr.length-1)*width;//当图片完全走出显示框,拼接到末尾
                clearInterval(moveId);
            }
            arr[i].style.left = left+"px";
        }
    }
    function divInterval(){
        moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器
    }


    timeId=setInterval(divInterval,2000);//设置一个3秒的定时器。

    function stop(){
        clearInterval(timeId);
    }
    function start(){
        clearInterval(timeId);
        timeId=setInterval(divInterval,2000);
    }

    //页面失去焦点停止
    onblur = function(){
        stop();
    }
    //页面获取焦点时开始
    onfocus = function(){
        start();
    }
</script>
</head>
<body>
    <div id="box" onmouseover="stop()" onmouseout="start()">
        <div id="red" class="slide"></div>
        <div id="green" class="slide"></div>
        <div id="blue" class="slide"></div>
    </div>
</body>
</html>

  • 写回答

2条回答 默认 最新

  • threenewbee 2019-10-20 12:16
    关注
    width:100px;
    全部修改为
    width:300px;
    
    height:100px;
    修改为
    height:400px;
    
    arr[i].style.left = i*100+"px";
    ->
    arr[i].style.left = i*300+"px";
    
    var width = 100;//图片的宽度
    ->
    var width = 300;//图片的宽度
    
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题