将指定链接中随机选择的照片集成到网页中

时间：2017-06-27 14:15:39

标签： javascript html css

在为我的同事编写网站时，我遇到了一个问题。他转售由朋友送给他的T恤，并将其列在他当前的eBay页面上。他让我为他编写一个可以更多地宣传他的T恤的网站，并希望我允许客户点击他网站上的衬衫，重定向到相应的eBay页面。我希望能够从他的eBay页面随机生成图像，并将它们显示在网站上，从而能够将用户从网站重定向到他的eBay页面。

编辑：我已经在我的.html文件中添加了一个脚本，用于随机选择图像。我的主要问题是能够从eBay本身随机选择这样的图像。

以下是该页面的HTML：

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ADARA Enterprises</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />  
</head>
<script type="text/javascript">
  var imageURLs = [
       "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
     , "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
     , "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
  ];
  function getImageTag() {
    var img = '<img src=\"';
    var randomIndex = Math.floor(Math.random() * imageURLs.length);
    img += imageURLs[randomIndex];
    img += '\" alt=\"Some alt text\"/>';
    return img;
  }
</script>
</head>
<body>
    <div id="background">
        <div id="page">
            <div id="header">
                <span id="connect">
                    <a href="http://www.adaraenterprises.com" target="_blank" class="facebook"></a>
                    <a href="http://www.adaraenterprises.com" target="_blank" class="twitter"></a>
                    <a href="http://www.adaraenterprises.com" target="_blank" class="vimeo"></a>
                </span>
                <a href="index.html" id="logo"></a> <!-- /#logo -->
                <ul id="navigation">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <!-- <li><a href="blog.html">Blog</a></li> -->
                    <li><a href="shop.html">Shop</a></li>
                    <li class="selected"><a href="contact-us.html">Contact Us</a></li>
                </ul>
            </div> <!-- /#header -->
            <div id="contents">
                <div id="main">
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
                        quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
                        vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                    </p>
                    <address>
                        <span>Telephone numbers:</span>
                        555-5678901 to 555-5678902
                        <span>Email Address:</span>
                        adarasomething@whateverthehell.com
                        <span>Street Address:</span>
                        4th Lit Street, 73813 Yeet, CO
                    </address>
                </div>
                <div id="featured">
                    <ul>
                        <li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
                        <li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
                        <li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
                        <li class="last"><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
                    </ul>
                    <a href="shop.html" class="button">shop here!</a> 
                </div>
            </div> <!-- /#contents -->
            <div id="footer">
                <div id="description">
                    <div>
                        <a href="index.html" class="logo"></a>
                        <span>&copy; Copyright &copy; 2017. <a href="index.html">ADARA Enterprises</a> All rights reserved</span>
                    </div>
                    <p>
                        This is just filler text. <br>
                        <br>
                        Filler text.
                    </p>
                </div>
                <div class="navigation">
                    <a href="index.html">Home</a>|
                    <a href="about.html">About</a>|
                <!--    <a href="blog.html">Yeet</a>| -->
                    <a href="shop.html">Shop</a>|
                    <a href="contact-us.html">Contact Us</a>
                </div>
            </div> <!-- /#footer -->
        </div> <!-- /#page -->
    </div> <!-- /#background -->
</body>
</html>

以下是与之关联的CSS文件：

html {
    font-family: 'Trebuchet MS', sans-serif, Arial, Helvitica;
}
body {
    background-color: #ffffff;
    margin: 0;
    // padding-top: 19px;
    min-height: 100%;
}
#background {
    background: url(https://static.pexels.com/photos/29724/pexels-photo-29724.jpg) repeat;
    min-height: 100%;
    //border-top: 1px solid #000000;
    margin: 0;

}
#page {
    width: 960px;
    margin: 0 auto;
    min-height: 100%;
    height: 100%;
}
@font-face {
    font-family: 'Arial Bold';
    src: url('fonts/corben-bold-webfont.eot');
    src: local('?'), url('fonts/corben-bold-webfont.woff') format('woff'), 
        url('fonts/corben-bold-webfont.ttf') format('truetype'), 
        url('fonts/corben-bold-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*
img {
    border: 0;
}
*/
#connect .facebook, #connect .twitter, #connect .vimeo {
    background: url(../images/icons.png) no-repeat;
}

/*------------------------------ HEADER ------------------------------*/
#header {
    background: url(../images/bg-header.png) no-repeat center top;
    min-height: 340px;
    margin-bottom: 20px;
}

#connect {
    float: left;
    display: inline-block;
    height: 30px;
    width: 300px;
    margin: 15px 0 15px 10px;
}
#connect a {
    display: inline-block;
    height: 30px;
    margin: 0 10px;
    padding: 0;
}
#connect .facebook {
    background-position: 0 2px;
    width: 27px;
}
#connect .twitter {
    background-position: 0 -36px;
    width: 36px;
}
/* #connect .vimeo {
    background-position: 0 -74px;                // Removed Vimeo Logo. Can implement any other logo here with matching dimensions
    width: 32px; */
}

#infos {
    float: right;
    color: #ffe680  ;
    display: inline-block;
    height: 30px;
    width: 200px;
    margin: 15px 0;
}
#infos  a {
    color: #ffe680;
    font-family: Arial;
    font-size: 14px;
    line-height: 30px;
    margin: 0 5px;
    text-decoration: none;
}

/** Logo **/
#logo {
    clear: both;
    display: block;
    height: 217px;
    width: 950px;
    margin: 0 auto;
}

/** Navigation **/
#navigation {
    height: 40px;
    list-style-type: none;
    margin: 0;
    display: inline-block;
    padding: 8px 20px 12px 84px;
}
#navigation li {
    float: left;
    font-family: 'Arial Black';
    font-size: 22px;
    font-weight: bold;
    line-height: 40px;
    width: 186px;
    text-align: center;
}
#navigation a {
    color: #ffe680;
    text-decoration: none;
    text-shadow: 1px 1px #C3A33B;
}
#navigation a:hover, #navigation li.selected a {
    color: #FFFFAC;
    text-shadow: 1px 1px 0 #C3A33B;
}

/*------------------------------ CONTENTS ------------------------------*/
#contents {
    margin: 0 0 40px;
    padding: 0 5px;
}

#main {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    margin: 0 0 30px;
    padding: 0 0 30px;
}
#main p {
    color: #ffe680;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    padding: 0 0 20px;
    text-shadow: 1px 1px #C3A33B;
}
#main p a {
    color: #ffe680;
    text-shadow: 1px 1px #C3A33B;
}
#main address {
    color: #FFFFAC;
    font-style: normal;
    width: 350px;
    margin: 0 auto;
    text-align: center;
    text-shadow: 1px 1px #C3A33B;
}
#main address span {
    color: #ffe680;
    text-shadow: 1px 1px #C3A33B;
    display: block;
    font-family: 'Arial Black';
    font-size: 18px;
    line-height: 20px;
    margin: 20px 0;
    width: 350px;
}

/* #adbox {
    background: #FFFFAC url(../images/bottom-shadow-headliner.jpg) no-repeat center bottom;
    height: 371px;
    width: 935px;
    margin: 0 auto;
    padding: 7px 7px 22px;
    position: relative;
}
#adbox img {
    height: 371px;
    width: 935px;
    margin: auto; 
}
*/
#featured {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    padding: 0 0 42px;
    position: relative;
}
#featured ul {
    display: inline-block;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
}
#featured ul li {
    float: left;
    background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
    height: 253px;
    width: 204px;
    margin-right: 28px;
    padding: 6px 6px 15px;
}
#featured ul li.last {
    margin-right: 0;
}
#featured ul li img {
    border: 1px solid #e4e0d1;
}
#featured a.button {
    background: url(../images/bg-button.jpg) no-repeat;
    color: #C3A33B;
    display: block;
    font-family: 'Arial Black';
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    width: 144px;
    padding: 4px 0 6px;
    text-align: center;
    text-decoration: none;
    position: absolute;
    bottom: -20px;
    left: 403px;
}

/*------------------------------ Blog Page ------------------------------*/
#blogs {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    padding: 0 0 20px;
    position: relative;
}
#blogs div {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    display: inline-block;
    margin: 0 0 20px;
    padding: 0 0 20px;
}
#blogs div.last {
    background: none;
    margin: 0;
}
#blogs span {
    float: left;
    background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
    display: block;
    height: 253px;
    width: 204px;
    margin-bottom: 6px;
    margin-right: 40px;
    padding: 6px 6px 15px;
}
#blogs span img {
    border: 1px solid #e4e0d1;
}
#blogs h3 {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    line-height: 30px;
    margin: 0 0 20px 258px;
    padding: 0 0 10px;
}
#blogs p {
    color: #ffe680;
    max-height: 160px;
    line-height: 20px;
    margin: 0 0 20px 258px;
    padding: 0 0 20px;
    overflow: hidden;
    text-shadow: 2px 2px #C3A33B;
}
#blogs p a {
    color: #ffe680;
    text-shadow: 2px 2px #C3A33B;
}
#blogs a.more {
    color: #C3A33B;
    font-style: italic;
    text-decoration: none;
}
#blogs div.buttons, #blogs div.blog-entry-buttons {
    background: none;
    display: inline-block;
    width: 328px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -20px;
    left: 311px;
}
#blogs div.buttons a, #blogs div.blog-entry-buttons a {
    float: left;
    background: url(../images/bg-button.jpg) no-repeat;
    color: #C3A33B;
    display: block;
    font-family: 'Arial Black';
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    width: 144px;
    margin-right: 20px;
    padding: 4px 0 6px; 
    text-align: center;
    text-decoration: none;
}
#blogs div.blog-entry-buttons {
    width: 690px;
    left: 258px;
}
#blogs div.blog-entry-buttons a.back {
    float: right;
    font-size: 16px;
    margin-right: 0;
}

/*------------------------------ Shop Page ------------------------------*/
#shop {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    padding: 0 0 20px;
    position: relavive;
}
#shop ul.items {
    display: inline-block;
    list-style-type: none;
    margin: 0 auto 16px;
    padding: 0;
}
#shop ul.items li {
    float: left;
    color: #ffe680;
    height: 340px;
    width: 216px;
    margin-bottom: 20px;
    margin-right: 28px;
}
#shop ul.items li span {
    background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
    display: block;
    height: 253px;
    width: 204px;
    margin-bottom: 10px;
    padding: 6px 6px 14px;
}
#shop ul.items li span img {
    border: 1px solid #e4e0d1;
}
#shop ul.items li span.price {
    float: right;
    background: none;
    color: #FFFFAC;
    display: inine-block;
    font-size: 17px;
    height: 20px;
    line-height: 20px;
    width: 80px;
    margin: 0;
    padding: 0;
    text-align: right;
}
#shop ul.items li a.buy {
    background-color: #ffe680;
    color: #C3A33B;
    display: block;
    font-family: 'Arial Black';
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    width: 80px;
    border-radius: 3px;
    margin: 13px auto 0;
    padding: 1px 0 4px;
    text-align: center;
    text-decoration: none;
}
#shop ul.items li.last {
    margin-right: 0;
}

/*------------------------------ FOOTER ------------------------------*/
#footer {
    padding: 0 5px;
}
#description {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    margin: 0 0 30px;
    padding: 0 0 30px;
}
#description div {
    float: left;
    width: 180px;
    margin-right: 50px;
}
/*#description div a.logo {
    background: url(../images/logo-footer.gif) no-repeat;
    display: block;
    height: 30px;
    width: 175px;
    margin: 0 0 10px;
}
*/
#description div span {
    padding-bottom: 5px;
    color:#ffe680;
    display: block;
    font-size: 11px;
    line-height: 20px;
    text-shadow: 1px 1px #C3A33B;
}
#description div span a {
    color: #ffe680;
    text-decoration: none;
    text-shadow: 1px 1px #C3A33B;
}
#description p {
    color: #ffe680;
    font-size: 13px;
    line-height: 20px;
    margin: 20px 0;
    text-align: justify;
    text-shadow: 1px 1px #C3A33B;
}
#description p a {
    color: #ffe680;
    text-shadow: 1px 1px #C3A33B;
}

#footer div.navigation {
    color: #ffe680;
    font-size: 14px;
    line-height: 20px;
    width: 338px;
    margin: 0 auto 20px;
    text-shadow: 0 1px 0 #C3A33B;
}
#footer div.navigation a {
    color: #ffe680;
    padding: 0 15px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #C3A33B;
}
#footer div.navigation a:hover {
    color: #FFFFAC;
}

/*------------------------------ For IE6 ------------------------------*/
#background {
    _height: 1440px;
    min-height: 100%;
}

#featured a.button {
    _top: 299px;
}

#blogs {
    _height: 620px;
}
#blogs div.buttons, #blogs div.blog-entry-buttons {
    _top: 620px;
}

我知道这很多，而且我不是要求任何人查看整个代码并向我提供完全改进的代码，我可以立即使用。我真的可以使用一些帮助来确定算法，以便在页面上创建这些随机生成的图像。

非常感谢任何可以提供的帮助！谢谢大家！

1 个答案:

答案 0 :(得分：0)

我最终创建了一个iframe并从E-bay的网站上提取照片。由于内置安全性，无法创建实时图像拉动，因此我必须继续在数据库中手动使用图像。

还创建了href重定向到所有者的易趣销售页面，该页面在衬衫/产品的整体销售等方面得到了解决。

相关问题
最新问题