软件工程第二次作业

一、作业内容

原网站网址：https://www.pinduoduo.com/index.html?utm_source=baidu&utm_medium=sem&utm_term=search

码云：https://gitee.com/shijiedegongmin/pinduoduo.git

 

二、截图

1. 原网页

 

 

2. 模仿网页

三、介绍

　　本次作业写在一个html文件，使用了 html 和css 本次作业根据拼多多网站仿写，自己根据原网页简单的改变了样式。

四、难点

1. 图片获取

通过使用谷歌浏览器可以直接下载图片

2.不同终端下的响应式布局效果

[class*="col-"] {
    float: left;
    padding: 15px;
}
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
 
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

3.实现动画效果

（1）鼠标放在图片上水平旋转

（2）  鼠标放在图片上立体转动

.e {
    
    margin-left:5%;
    width: 20%;
    height: 200px;

    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; 
    transition: width 2s, height 2s, transform 2s;
            
    float:left;

    height:190px;
    margin:20px;
    border:10px solid white;
    outline-style:solid;
    outline-color:white;
}

.e:hover {
    width:20%;
    height: 200px;
    -webkit-transform: rotate(180deg); 
    transform: rotate(360deg);
}    
        
    .f
    {
        width: 100%;
        align-content: center;
        margin-left: 13%;
    
    
    }    
        .ff
    {
        
        width: 100%;
        align-content:center;
        margin-left: 2.5%;
        
    }

 .h
{    
        width: 40%;
        float:left;
    height:500px;
    margin:5px;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; 
    transition: width 2s, height 2s, transform 2s;
    margin-left:4.3%;
   margin-top:5px;

 
}
.h:hover {
    width: 40%;
    height: 500px;
    -webkit-transform: rotateY(180deg); 
    transform: rotateY(360deg);
}    
    

（3）  下拉菜单

.dropdown {
  position: relative;
  display: inline-block;
     margin-left:70px;
}
.dropdown-content {
    
    
  display: none;
  position: absolute;
  background-color:lightskyblue;
  min-width: 35px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 20px;
  font-size: small;

}
.dropdown:hover .dropdown-content {
  display: block;
}

（4）  滚动页面:

 

* {
            margin: 0;
            padding: 0
        }
        .box {
            width: 1350px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 10px auto;
            padding: 5px;
 
        }
        .inner{
            width: 1350px;
            height: 300px;
            position: relative;
            overflow: hidden;
        }
        .inner img{
            width: 1350px;
            height: 300px;
            vertical-align: top
        }
        ul {
            width: 1000%;
            position: absolute;
            list-style: none;
            left:0;
            top: 0;
        }
        .inner li{
            float: left;
 
        }
 
        ol {
            position: absolute;
            height: 20px;
            right: 20px;
            bottom: 20px;
            text-align: center;
            padding: 5px;
        }
        ol li{
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: #fff;
            margin: 5px;
            cursor: pointer;
 
        }
        ol .current{
            background-color: red;
        }
        #arr{
            display: none;
        }
        #arr span{
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #fff;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #000;
            opacity: 0.5;
            border: 1px solid #fff;
        }
        #arr #right {
            right: 5px;
            left: auto;
        }
            
            



        
        <div class="box" id="box">
    <div class="inner">
       
        <ul>
            <li><a href="#"><img src="img/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/1001.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/1002.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/1003.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/1004.jpg" alt=""></a></li>
 
        </ul>
 
        <ol class="bar">
 
        </ol>
      
        <div id="arr">
                    <span id="left">
                        <
                    </span>
            <span id="right">
                        >
                    </span>
        </div>
 
    </div>
</div>
<script>
 
    function my$(id) {
        return document.getElementById(id);
    }
 
    
    var box=my$("box");
    var inner=box.children[0];
    var ulObj=inner.children[0];
    var list=ulObj.children;
    var olObj=inner.children[1];
    var arr=my$("arr");
    var imgWidth=inner.offsetWidth;
    var right=my$("right");
    var pic=0;
    
    for(var i=0;i<list.length;i++){
        var liObj=document.createElement("li");
 
        olObj.appendChild(liObj);
        liObj.innerText=(i+1);
        liObj.setAttribute("index",i);
 
        liObj.onmouseover=function () {
         
 
            for (var j=0;j<olObj.children.length;j++){
                olObj.children[j].removeAttribute("class");
            }
            this.className="current";
            pic=this.getAttribute("index");
            animate(ulObj,-pic*imgWidth);
        }
 
    }
 
 
    
    olObj.children[0].className = "current";
 
    ulObj.appendChild(ulObj.children[0].cloneNode(true));
 
    var timeId=setInterval(onmouseclickHandle,1000);
 
    box.onmouseover=function () {
        arr.style.display="block";
        clearInterval(timeId);
    };
    box.onmouseout=function () {
        arr.style.display="none";
        timeId=setInterval(onmouseclickHandle,1000);
    };
 
    right.onclick=onmouseclickHandle;
    function onmouseclickHandle() {
       
        if (pic == list.length - 1) {
         
            pic = 0;
            ulObj.style.left = 0 + "px";
        }
        pic++;
        animate(ulObj, -pic * imgWidth);
        if (pic == list.length - 1) {
           
            olObj.children[olObj.children.length - 1].className = "";
         
            olObj.children[0].className = "current";
        } else {
            
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            olObj.children[pic].className = "current";
        }
    }
    left.onclick=function () {
        if (pic==0){
            pic=list.length-1;
            ulObj.style.left=-pic*imgWidth+"px";
        }
        pic--;
        animate(ulObj,-pic*imgWidth);
        for (var i = 0; i < olObj.children.length; i++) {
            olObj.children[i].removeAttribute("class");
        }
      
        olObj.children[pic].className = "current";
    };
 
    function animate(element, target) {
        clearInterval(element.timeId);
     
        element.timeId = setInterval(function () {
           
            var current = element.offsetLeft;
         
            var step = 10;
            step = current < target ? step : -step;
         
            current += step;
            if (Math.abs(current - target) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                
                clearInterval(element.timeId);
                
                element.style.left = target + "px";
            }
        }, 10);
    }
    </script>
        

 

五、源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>作业2</title>
        <style type="text/css">
            
            
            
            
            
            body
            {
                
            margin:0 auto;
            background-color:beige;
            
            }
            .a{font: "微软雅黑"; font-size: larger; color: cornflowerblue; text-decoration:none;}
            .aa{font:"book antiqua"; font-size: larger; color: cornflowerblue; text-decoration:none;}
            
            .b{font-size: x-large;}
            
            .g
            {
                font: "微软雅黑";color:cadetblue; text-decoration:none;
            }
            
            .c
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}
.dropdown {
  position: relative;
  display: inline-block;
     margin-left:70px;
}
.dropdown-content {
    
    
  display: none;
  position: absolute;
  background-color:lightskyblue;
  min-width: 35px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 20px;
  font-size: small;

}
.dropdown:hover .dropdown-content {
  display: block;
}


.e {
    
    margin-left:5%;
    width: 20%;
    height: 200px;

    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; 
    transition: width 2s, height 2s, transform 2s;
            
    float:left;

    height:190px;
    margin:20px;
    border:10px solid white;
    outline-style:solid;
    outline-color:white;
}

.e:hover {
    width:20%;
    height: 200px;
    -webkit-transform: rotate(180deg); 
    transform: rotate(360deg);
}    
        
    .f
    {
        width: 100%;
        align-content: center;
        margin-left: 13%;
    
    
    }    
        .ff
    {
        
        width: 100%;
        align-content:center;
        margin-left: 2.5%;
        
    }

 .h
{    
        width: 40%;
        float:left;
    height:500px;
    margin:5px;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; 
    transition: width 2s, height 2s, transform 2s;
    margin-left:4.3%;
   margin-top:5px;

 
}
.h:hover {
    width: 40%;
    height: 500px;
    -webkit-transform: rotateY(180deg); 
    transform: rotateY(360deg);
}    
        
        
         
.j
{
display:-moz-box; 
display:-webkit-box; 
display:box;
width:300px;
border:1px solid black;
}

#p1
{
-moz-box-flex:1.0; 
-webkit-box-flex:1.0;
box-flex:1.0;
border:1px solid red;
}

#p2
{
-moz-box-flex:2.0; 
-webkit-box-flex:2.0; 
box-flex:2.0;
border:1px solid blue;
}
    .m
    {
        background-color: white;
        width: 100%;
    }    
    .text_line
{
    clear:both;
    margin-bottom:2px;
}

[class*="col-"] {
    float: left;
    padding: 15px;
}
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
 
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

        </style>
    </head>
    <body>
        <div class="m col-12 col-m-12">
        <br />
        <table width="100%" height="65px" >
            <tr>
                <td width="5.5%"></td>
                <td background="img/1.jpg" width="13.5%"> </td>
                
                <td align="center" ><a href="index.html" class="a">首页&nbsp;|</a></td>
                <td align="center"><a href="index.html" class="a">商家入驻&nbsp;|</a></td>
                <td align="center" ><a href="index.html" class="a">热点资讯&nbsp;|</a></td>
                <td align="center" ><a href="index.html" class="a">爱心扶贫&nbsp;|</a></td>
                <td align="center" ><a href="index.html" class="a">社会招聘&nbsp;|</a></td>
                <td align="center"> <a href="index.html" class="a">校园招聘&nbsp;|</a></td>
                <td align="center" ><a href="index.html" class="a">下载APP&nbsp;|</a></td>
                <td align="center" ><a href="index.html" class="a">帮助中心&nbsp;|</a></td>
                <td align="center" ><a href="index.html" class="a">廉政举报&nbsp;|</a></td>
                <td align="center" ><a href="index.html" class="a">分享赚钱&nbsp;|</a></td>
            </tr>
            
            
        </table>
        
        <br />
    </div>
        <img src="img/2.jpg"/ width="100%" height="300px">
        <br />
        <br />
        
     <table width="100%">
         <tr>
             <td width="20%"  class="b">
                 
                 <div class="dropdown">
  <span><strong>精彩活动</strong></span>
  <div class="dropdown-content">
    <p ><a href="" class="g" >房地产</a></p>
    <p><a href="" class="g">私人飞机</a></p>
  </div>
 
  </div>

         </td>
    <td width="3%"> <a href="" class="g"><strong>更多></strong></a></td>
         </tr>
     </table>
   <br />
    <hr / width="90%" align="center" color="darkslateblue">

<div class="f col-12 col-m-12" >
    

<div class="e">
    
     <a href="https://www.pinduoduo.com/global.html?utm_source=baidu&utm_medium=sem&utm_term=search"><img src="img/3.jpg" width="100%" height="100%"/></a>


</div>
<div class="e">
    
     <a href="https://www.pinduoduo.com/super.html?utm_source=baidu&utm_medium=sem&utm_term=search"><img src="img/4.jpg" width="100%" height="100%"/></a>


</div>
<div class="e">
    
     <a href="https://www.pinduoduo.com/super.html?utm_source=baidu&utm_medium=sem&utm_term=search"><img src="img/5.jpg" width="100%" height="100%"/></a>


</div>
</div>

<div class="text_line">
    
</div>
<div class="f">
<div class="e">
    
     <a href="https://www.pinduoduo.com/super.html?utm_source=baidu&utm_medium=sem&utm_term=search"><img src="img/114.jpg"width="100%" height="100%" /></a>


</div>
<div class="e">
    
     <a href="https://www.pinduoduo.com/super.html?utm_source=baidu&utm_medium=sem&utm_term=search"><img src="img/6.jpg" width="100%" height="100%"/></a>


</div>
<div class="e">
    
     <a href="https://www.pinduoduo.com/super.html?utm_source=baidu&utm_medium=sem&utm_term=search"><img src="img/115.jpg" width="100%" height="100%"/></a>


</div>
</div>
<br />
        <hr / width="90%" align="center" color="darkslateblue">
    <br />

    <table width="100%">
         <tr>
             <td width="20%"  class="b">
                 
                 <div class="dropdown" >
  <span ><strong>精品专题</strong></span>
  <div class="dropdown-content">
    <p ><a href="" class="g" >房地产</a></p>
    <p><a href="" class="g">私人飞机</a></p>
  </div>
</div>
             </td>
     <td width="3%"> <a href="" class="g"><strong>更多></strong></a></td>
         </tr>
     </table>
        <hr / width="90%" align="center" color="cadetblue">
    
    
    <div class="ff col-12 col-m-12">
    <div class="h">
        <a href=""><img src="img/0.1.JPG"width="100%" height="100%"/></a>
    </div>
    <div class="h">
        <a href=""><img src="img/0.2.JPG"width="100%" height="100%"/></a>
    </div>
    <div class="h">
        <a href=""><img src="img/0.3.JPG"width="100%" height="100%"/></a>
    </div>
    <div class="h">
        <a href=""><img src="img/0.4.JPG"width="100%" height="100%"/></a>
    </div>
        <div class="h">
        <a href=""><img src="img/0.5.JPG"width="100%" height="100%"/></a>
    </div>
        <div class="h">
        <a href=""><img src="img/0.6.JPG"width="100%" height="100%"/></a>
    </div>
        <div class="h">
        <a href=""><img src="img/0.7.JPG" width="100%" height="100%"/></a>
    </div>
        <div class="h">
        <a href=""><img src="img/0.8.JPG"width="100%" height="100%"/></a>
    </div>
        <div class="h">
        <a href=""><img src="img/0.9.jpg"width="100%" height="100%"/></a>
    </div>
        <div class="h">
        <a href=""><img src="img/0.11.jpg"width="100%" height="100%"/></a>
    </div>
        
    </div>

    <hr / width="90%" align="center" color="darkslateblue">



<table width="100%" class=" col-12 col-m-12">
    
    <tr><td>
        
        <img src="img/000.JPG" width="100%"/>
        
    
    </td>
    
    
    </tr>
</table>

<div align="center" class=" col-12 col-m-12" >
    <a href="" class="g">商家入驻|&nbsp;</a>
    <a href="" class="g">校园招聘|&nbsp;</a>
    <a href="" class="g">关于我们|&nbsp;</a>
    <a href="" class="g">帮助中心|&nbsp;</a>
    <a href="" class="g">下载APP|&nbsp;</a>
    <a href="" class="g">消费者保障|&nbsp;</a>
    <a href="" class="g">维权投诉指引|&nbsp;</a>
    <a href="" class="g">廉政举报|&nbsp;</a>
    <a href="" class="g">服务协议|&nbsp;</a>
    <a href="" class="g">隐私政策|&nbsp;</a>
    <a href="" class="g">征求意见|&nbsp;</a>
</div>
<br />
<table  width="100%" height="100px" class="aa" align="center" class=" col-12 col-m-12">
    
    <tr><td align="center" width="100%">
        
        <img src="img/0.JPG" width="100%"/>
    </td></tr>
</table>



</body>
</html>

 修改后加入图片自动翻页:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>作业2</title>
        <style type="text/css">
            
            
            * {
            margin: 0;
            padding: 0
        }
        .box {
            width: 1350px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 10px auto;
            padding: 5px;
 
        }
        .inner{
            width: 1350px;
            height: 300px;
            position: relative;
            overflow: hidden;
        }
        .inner img{
            width: 1350px;
            height: 300px;
            vertical-align: top
        }
        ul {
            width: 1000%;
            position: absolute;
            list-style: none;
            left:0;
            top: 0;
        }
        .inner li{
            float: left;
 
        }
 
        ol {
            position: absolute;
            height: 20px;
            right: 20px;
            bottom: 20px;
            text-align: center;
            padding: 5px;
        }
        ol li{
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: #fff;
            margin: 5px;
            cursor: pointer;
 
        }
        ol .current{
            background-color: red;
        }
        #arr{
            display: none;
        }
        #arr span{
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #fff;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #000;
            opacity: 0.5;
            border: 1px solid #fff;
        }
        #arr #right {
            right: 5px;
            left: auto;
        }
            
            
            body
            {
                
            margin:0 auto;
            background-color:beige;
            
            }
            .a{font: "微软雅黑"; font-size: larger; color: cornflowerblue; text-decoration:none;}
            .aa{font:"book antiqua"; font-size: larger; color: cornflowerblue; text-decoration:none;}
            
            .b{font-size: x-large;}
            
            .g
            {
                font: "微软雅黑";color:cadetblue; text-decoration:none;
            }
            
            .c
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}
.dropdown {
  position: relative;
  display: inline-block;
     margin-left:70px;
}
.dropdown-content {
    
    
  display: none;
  position: absolute;
  background-color:lightskyblue;
  min-width: 35px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 20px;
  font-size: small;

}
.dropdown:hover .dropdown-content {
  display: block;
}


.e {
    
    margin-left:5%;
    width: 20%;
    height: 200px;

    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; 
    transition: width 2s, height 2s, transform 2s;
            
    float:left;

    height:190px;
    margin:20px;
    border:10px solid white;
    outline-style:solid;
    outline-color:white;
}

.e:hover {
    width:20%;
    height: 200px;
    -webkit-transform: rotate(180deg); 
    transform: rotate(360deg);
}    
        
    .f
    {
        width: 100%;
        align-content: center;
        margin-left: 13%;
    
    
    }    
        .ff
    {
        
        width: 100%;
        align-content:center;
        margin-left: 2.5%;
        
    }

 .h
{    
        width: 40%;
        float:left;
    height:500px;
    margin:5px;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; 
    transition: width 2s, height 2s, transform 2s;
    margin-left:4.3%;
   margin-top:5px;

 
}
.h:hover {
    width: 40%;
    height: 500px;
    -webkit-transform: rotateY(180deg); 
    transform: rotateY(360deg);
}    
        
        
         
.j
{
display:-moz-box; 
display:-webkit-box; 
display:box;
width:300px;
border:1px solid black;
}

#p1
{
-moz-box-flex:1.0; 
-webkit-box-flex:1.0;
box-flex:1.0;
border:1px solid red;
}

#p2
{
-moz-box-flex:2.0; 
-webkit-box-flex:2.0; 
box-flex:2.0;
border:1px solid blue;
}
    .m
    {
        background-color: white;
        width: 100%;
    }    
    .text_line
{
    clear:both;
    margin-bottom:2px;
}

[class*="col-"] {
    float: left;
    padding: 15px;
}
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
 
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

        </style>
    </head>
    <body>
        <div class="m col-12 col-m-12">
        <br />
        <table width="100%" height="65px" >
            <tr>
                <td width="2%"></td>
                <td background="img/1.jpg" width="13.5%"> </td>
                
                <td align="center" ><a href="index.html" class="a">首页&nbsp;|</a></td>
                <td align="center"><a href="index.html" class="a">商家入驻&nbsp;|</a></td>
                <td align="center" ><a href="index.html" class="a">热点资讯&nbsp;|</a></td>
                <td align="center" ><a href="index.html" class="a">爱心扶贫&nbsp;|</a></td>
                <td align="center" ><a href="index.html" class="a">社会招聘&nbsp;|</a></td>
                <td align="center"> <a href="index.html" class="a">校园招聘&nbsp;|</a></td>
                <td align="center" ><a href="index.html" class="a">下载APP&nbsp;|</a></td>
                <td align="center" ><a href="index.html" class="a">帮助中心&nbsp;|</a></td>
                <td align="center" ><a href="index.html" class="a">廉政举报&nbsp;|</a></td>
                <td align="center" ><a href="index.html" class="a">分享赚钱&nbsp;</a></td>
            </tr>
            
            
        </table>
        
        <br />
    </div>
    
    

        
        <div class="box" id="box">
    <div class="inner">
       
        <ul>
            <li><a href="#"><img src="img/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/1001.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/1002.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/1003.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/1004.jpg" alt=""></a></li>
 
        </ul>
 
        <ol class="bar">
 
        </ol>
      
        <div id="arr">
                    <span id="left">
                        <
                    </span>
            <span id="right">
                        >
                    </span>
        </div>
 
    </div>
</div>
<script>
 
    function my$(id) {
        return document.getElementById(id);
    }
 
    
    var box=my$("box");
    var inner=box.children[0];
    var ulObj=inner.children[0];
    var list=ulObj.children;
    var olObj=inner.children[1];
    var arr=my$("arr");
    var imgWidth=inner.offsetWidth;
    var right=my$("right");
    var pic=0;
    
    for(var i=0;i<list.length;i++){
        var liObj=document.createElement("li");
 
        olObj.appendChild(liObj);
        liObj.innerText=(i+1);
        liObj.setAttribute("index",i);
 
        liObj.onmouseover=function () {
         
 
            for (var j=0;j<olObj.children.length;j++){
                olObj.children[j].removeAttribute("class");
            }
            this.className="current";
            pic=this.getAttribute("index");
            animate(ulObj,-pic*imgWidth);
        }
 
    }
 
 
    
    olObj.children[0].className = "current";
 
    ulObj.appendChild(ulObj.children[0].cloneNode(true));
 
    var timeId=setInterval(onmouseclickHandle,1000);
 
    box.onmouseover=function () {
        arr.style.display="block";
        clearInterval(timeId);
    };
    box.onmouseout=function () {
        arr.style.display="none";
        timeId=setInterval(onmouseclickHandle,1000);
    };
 
    right.onclick=onmouseclickHandle;
    function onmouseclickHandle() {
       
        if (pic == list.length - 1) {
         
            pic = 0;
            ulObj.style.left = 0 + "px";
        }
        pic++;
        animate(ulObj, -pic * imgWidth);
        if (pic == list.length - 1) {
           
            olObj.children[olObj.children.length - 1].className = "";
         
            olObj.children[0].className = "current";
        } else {
            
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            olObj.children[pic].className = "current";
        }
    }
    left.onclick=function () {
        if (pic==0){
            pic=list.length-1;
            ulObj.style.left=-pic*imgWidth+"px";
        }
        pic--;
        animate(ulObj,-pic*imgWidth);
        for (var i = 0; i < olObj.children.length; i++) {
            olObj.children[i].removeAttribute("class");
        }
      
        olObj.children[pic].className = "current";
    };
 
    function animate(element, target) {
        clearInterval(element.timeId);
     
        element.timeId = setInterval(function () {
           
            var current = element.offsetLeft;
         
            var step = 10;
            step = current < target ? step : -step;
         
            current += step;
            if (Math.abs(current - target) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                
                clearInterval(element.timeId);
                
                element.style.left = target + "px";
            }
        }, 10);
    }
    </script>
        
            <br />
        <br />    <br />
        <br />    <br />
        <br />    <br />

        
     <table width="100%">
         <tr>
             <td width="20%"  class="b">
                 
                 <div class="dropdown">
  <span><strong>精彩活动</strong></span>
  <div class="dropdown-content">
    <p ><a href="" class="g" >房地产</a></p>
    <p><a href="" class="g">私人飞机</a></p>
  </div>
 
  </div>

         </td>
    <td width="3%"> <a href="" class="g"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多></strong></a></td>
         </tr>
     </table>
   <br />
    <hr / width="10000px" align="center" color="darkslateblue">

<div class="f col-12 col-m-12" >
    

<div class="e">
    
     <a href="https://www.pinduoduo.com/global.html?utm_source=baidu&utm_medium=sem&utm_term=search"><img src="img/3.jpg" width="100%" height="100%"/></a>


</div>
<div class="e">
    
     <a href="https://www.pinduoduo.com/super.html?utm_source=baidu&utm_medium=sem&utm_term=search"><img src="img/4.jpg" width="100%" height="100%"/></a>


</div>
<div class="e">
    
     <a href="https://www.pinduoduo.com/super.html?utm_source=baidu&utm_medium=sem&utm_term=search"><img src="img/5.jpg" width="100%" height="100%"/></a>


</div>
</div>

<div class="text_line">
    
</div>
<div class="f">
<div class="e">
    
     <a href="https://www.pinduoduo.com/super.html?utm_source=baidu&utm_medium=sem&utm_term=search"><img src="img/114.jpg"width="100%" height="100%" /></a>


</div>
<div class="e">
    
     <a href="https://www.pinduoduo.com/super.html?utm_source=baidu&utm_medium=sem&utm_term=search"><img src="img/6.jpg" width="100%" height="100%"/></a>


</div>
<div class="e">
    
     <a href="https://www.pinduoduo.com/super.html?utm_source=baidu&utm_medium=sem&utm_term=search"><img src="img/115.jpg" width="100%" height="100%"/></a>


</div>
</div>
<br />
        <hr / width="10000px" align="center" color="darkslateblue">
    <br />

    <table width="100%">
         <tr>
             <td width="20%"  class="b">
                 
                 <div class="dropdown" >
  <span ><strong>精品专题</strong></span>
  <div class="dropdown-content">
    <p ><a href="" class="g" >房地产</a></p>
    <p><a href="" class="g">私人飞机</a></p>
  </div>
</div>
             </td>
     <td width="3%"> <a href="" class="g"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多></strong></a></td>
         </tr>
     </table>
        <hr / width="10000px" align="center" color="cadetblue">
    
    
    <div class="ff col-12 col-m-12">
    <div class="h">
        <a href=""><img src="img/0.1.JPG"width="100%" height="100%"/></a>
    </div>
    <div class="h">
        <a href=""><img src="img/0.2.JPG"width="100%" height="100%"/></a>
    </div>
    <div class="h">
        <a href=""><img src="img/0.3.JPG"width="100%" height="100%"/></a>
    </div>
    <div class="h">
        <a href=""><img src="img/0.4.JPG"width="100%" height="100%"/></a>
    </div>
        <div class="h">
        <a href=""><img src="img/0.5.JPG"width="100%" height="100%"/></a>
    </div>
        <div class="h">
        <a href=""><img src="img/0.6.JPG"width="100%" height="100%"/></a>
    </div>
        <div class="h">
        <a href=""><img src="img/0.7.JPG" width="100%" height="100%"/></a>
    </div>
        <div class="h">
        <a href=""><img src="img/0.8.JPG"width="100%" height="100%"/></a>
    </div>
        <div class="h">
        <a href=""><img src="img/0.9.jpg"width="100%" height="100%"/></a>
    </div>
        <div class="h">
        <a href=""><img src="img/0.11.jpg"width="100%" height="100%"/></a>
    </div>
        
    </div>

    <hr / width="10000px" align="center" color="darkslateblue">



<table width="100%" class=" col-12 col-m-12">
    
    <tr><td>
        
        <img src="img/000.JPG" width="100%"/>
        
    
    </td>
    
    
    </tr>
</table>

<div align="center" class=" col-12 col-m-12" >
    <a href="" class="g">商家入驻|&nbsp;</a>
    <a href="" class="g">校园招聘|&nbsp;</a>
    <a href="" class="g">关于我们|&nbsp;</a>
    <a href="" class="g">帮助中心|&nbsp;</a>
    <a href="" class="g">下载APP|&nbsp;</a>
    <a href="" class="g">消费者保障|&nbsp;</a>
    <a href="" class="g">维权投诉指引|&nbsp;</a>
    <a href="" class="g">廉政举报|&nbsp;</a>
    <a href="" class="g">服务协议|&nbsp;</a>
    <a href="" class="g">隐私政策|&nbsp;</a>
    <a href="" class="g">征求意见|&nbsp;</a>
</div>
<br />
<table  width="100%" height="100px" class="aa" align="center" class=" col-12 col-m-12">
    
    <tr><td align="center" width="100%">
        
        <img src="img/0.JPG" width="100%"/>
    </td></tr>
</table>



</body>
</html>