C1任务04 计算机程序逻辑

最新推荐文章于 2024-07-24 11:09:48 发布

m0_46238032

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量77

点赞数

分类专栏： web基础与布局文章标签： c1 javascript html

本文链接：https://blog.csdn.net/m0_46238032/article/details/120269038

版权

web基础与布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

任务一：生成图片广告

第一步：能够用HTML+CSS+javaScript在页面正中生成一幅广告图片

（1）、在网上搜索图片后保存，多下载几张，方便后面用

（2）、代码展示图如下

（3）、效果图如下

第二步：用在页面上放置多张广告图片，同时动态计算不同告位之间的布局，实现水平等间距布局

(1)、代码图如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    img{
        width: 200px;
        height: 200px;
        padding: 30px;
        float: left;
        }


    </style>

</head>
<body>
    <div class="picture">
      <img src="C:\Users\Administrator\Desktop/1.jpg" height="200" width="200"/>
        <img src="C:\Users\Administrator\Desktop/8.jpg" height="200" width="200"/>
        <img src="C:\Users\Administrator\Desktop/2.jpg" height="200" width="200"/>
        <img src="C:\Users\Administrator\Desktop/3.jpg" height="200" width="200"/>
        <img src="C:\Users\Administrator\Desktop/4.jpg" height="200" width="200"/>
        <img src="C:\Users\Administrator\Desktop/5.jpg" height="200" width="200"/>
        <img src="C:\Users\Administrator\Desktop/6.jpg" height="200" width="200"/>
        <img src="C:\Users\Administrator\Desktop/7.jpg" height="200" width="200"/>
    </div>
</body>
</html>

（2）、效果图如下：

第三步：用JavaScript代码实现多张广告图片轮播效果：在页面正中每隔3秒切换不同的广告图片，多张图片轮番显示。

(1)、代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #show{
        width: 400px;
        height: 300px;
       margin: 0 auto;
            overflow: hidden;
        }
        #concent{
            width: 1600px;
        height: 300px;

        }
        #concent>div{
            float:left;
        }
    </style>
    </head>
<body>
   <div id="show">
       <div id="concent">
           <div>
               <img src="photos/1.jpg" alt="">
               </div>
           <div>
               <img src="photos/2.jpg" alt="">
               </div>
           <div>
               <img src="photos/3.jpg" alt="">
               </div>
           <div>
               <img src="photos/4.jpg" alt="">
               </div>
           <div>
               <img src="photos/5.jpg" alt="">
               </div>
           <div>
               <img src="photos/6.jpg" alt="">
               </div>
           <div>
               <img src="photos/7.jpg" alt="">
               </div>
           <div>
               <img src="photos/8.jpg" alt="">
               </div>
   </div>
   </div>
         <script>
             var speed=10;
             function movepicture() {
                 var concent = document.getElementById("concent");
                 var left = concent.style.marginLeft;
                 concent = left == "" ? 0 : parseInt(left - speed) + "px";
                 if (left - speed == -1600) {
                     concent.style.marginLeft = "0px"
                 }
                 var interid = setInterval(function () {
                     movepicture();
                 }, 100)
             }
            </script>
    </div>
</body>
</html>

m0_46238032

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
C1任务04 计算机程序逻辑

任务一：生成图片广告第一步：能够用HTML+CSS+javaScript在页面正中生成一幅广告图片（1）、在网上搜索图片后保存，多下载几张，方便后面用（2）、代码展示图如下（3）、效果图如下第二步：用JavaScript数组在页面上放置多张广告tu'p，同时动态计算不同告位之间的布局，实现水平等间距布局...
复制链接

扫一扫

专栏目录