Question

在我的网站中我使用bellow函数浏览图像。（http://jsut4fun.site40.net/2.html）该函数将1添加到URL，以便它将转到下一页。正如您所看到的，我必须重命名每个网页和图像，然后我必须更改每个图像编号的网页代码。是否有任何简单的方法来存储图像的src中的URL的数字，以便我不必更改代码？一般来说你有什么想法可以帮助我做得更好吗？我还是一个javascript noob：）

<img src="Images/100.jpg">     
<script>
        var url = location.href;
        function nextImage() {
            return(url.replace(/(\d+)(\.html)$/, function(str, p1, p2) {
                return((Number(p1) + 1) + p2);
            }));
        }
        function prevImage() {
            return(url.replace(/(\d+)(\.html)$/, function(str, p1, p2) {
                return((Number(p1) - 1) + p2);
            }));
        }
        </script>
          <a href="javascript: window.location.href = prevImage();"> <img border="0" src="Assets/Left.png" /></a>
          <a href="javascript: window.location.href = nextImage();"> <img border="0" src="Assets/Right.png"/></a>

Answer 1

使用jquery
然后使用$("img")或$("#Id_OF_Img_Tag")选择图片然后只需更改$("img").attr("src")值。

可以很容易地递增或递减

Answer 2

Maan，我想我现在明白你想做什么。您希望能够在所有编号的页面上重置图像的src，而无需手动更改它。这是可以使用Javascript，但我不确定它是否严格可取，因为这意味着对于没有启用JS的浏览器，图像将是错误的。这是一个非常不寻常的案例，但它可能包括Googlebot - 因此，如果图像对于SEO目的而言很重要，那么您可能别无选择，只能更改所有图像文件名。

对于它的价值，这个JS应该做你想要的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>

    $(document).ready(function () {

        var currentPage = window.location.href.split('/');
        var currentNum = currentPage[3].split('.')[0];
        $('img').attr('src', 'Images/' + currentNum + '.jpg');

        $('#prev').click(function () {
            move(-1);
        });

        $('#next').click(function () {
            move(1);
        });

        function move(n) {
            window.location.href = Number(currentNum) + Number(n) + '.html';
        }

    });

</script>

此位包含页面中的JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

$(document).ready(function () { ... }内的位在页面准备好显示时运行，通常在页面加载之前。

var currentPage = window.location.href.split('/');获取页面的当前URL并将其拆分为每个/字符。该行生成一个包含URL部分的数组。如果您的网址为http://jsut4fun.site40.net/5.html，则“5.html”将是第四部分，位于数组的索引位置[3]。

var currentNum = currentPage[3].split('.')[0];抓取网址的第四部分并将其拆分为“。”这为我们提供了页码。

$('center img').attr('src', 'Images/' + currentNum + '.jpg');将主图片的src属性重置为该页面的右侧URL。 'center img'选择任何一个中心元素的子图像。

你可以保持你现有的链接和prevImage（）和nextImage（）函数在页面之间移动，但是如果你想用JQuery做这个，你也可以用

这个位来做。

$('#prev').click(function () {
    move(-1);
});

$('#next').click(function () {
    move(1);
});

function move(n) {
    window.location.href = Number(currentNum) + Number(n) + '.htm';
}

此示例假定链接具有“prev”和“next”的ID。通过全局搜索和替换，可以很容易地将ID添加到每个页面上的当前链接。

希望这有帮助！

Answer 3

你会使用PHP这样的东西。我不确定你到底想要做什么。

编辑：

我为你写了一个简单的php页面。将其保存为“index.php”并将其放在public_html中。我很想知道它是否有效：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="just 4 fun, funny, comics, image, photo, humor, joke, pics, picture, fail, epic, fun" />
<title>Just 4 Fun</title>
<style type="text/css">
#Thewholewebsite {
    left:357px;
    top:77px;
    width:1080px;
    height:2000px;
    z-index:1;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    background-color: #DDD;
    background-image: url(Assets/ContentBC.png);
}
.Bottomad {
    height: 60px;
    width: 468px;
    margin-right: auto;
    margin-left: auto;
}
.share {
    height: 60px;
    width: 714px;
    margin-right: auto;
    margin-left: auto;
}
.Content {
    float: left;
    height: 1850px;
    width: 714px;
    margin-top: 20px;
    margin-left: 15px;
}
.Facebookcomments {
    height: 1000px;
    width: 714px;
}
.Sidead {
    float: right;
    height: 280px;
    width: 336px;
    margin-top: 20px;
    margin-right: 15px;
}
.Facebooklikebox {
    float: right;
    height: 600px;
    width: 336px;
    margin-top: 20px;
    margin-right: 15px;
}
.Header {
    background-image: url(Assets/HeaderLogo.png);
    height: 90px;
    width: 335px;
    margin-top: 5px;
    margin-left: 10px;
    float: left;
}
.Headerad {
    background-color: #000;
    height: 90px;
    width: 728px;
    margin-right: 6px;
    float: right;
    margin-top: 5px;
}
.Facebookcomments {
    height: 1000px;
    width: 714px;
}
</style>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28177073-1']);
  _gaq.push(['_setDomainName', '.site40.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>

<body background="Assets/MainBC.png">
<div id="Thewholewebsite">
<div class="Header"></div>
<div class="Headerad"></div>
<div class="Content">
<center>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=324524777119";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<br/>
<br/>
    <br/>
    <br/>
    <?PHP 
    $prev=$next=true;
    if(isset($_GET['image'])){
        $imgnum = $_GET['image'];
        if($imgnum==1){
            $prev=false;
        }
    }
    else{
        $imgnum=1;
        $prev=false;
    }
    echo "Root: ".$_SERVER['DOCUMENT_ROOT'];
    if(!file_exists($_SERVER['DOCUMENT_ROOT'].'/public_html/Images/'.$imgnum.'.jpg')){
        $imgnum=1;
        $prev=false;
    }
    if(!file_exists($_SERVER['DOCUMENT_ROOT'].'/Images/'.$imgnum+1 .'.jpg')){
        $next=false;
    }


    ?>
<img src=<?PHP echo "\"Images/".$imgnum.".jpg\"" ?>/>
<br/>
<script>
var url = location.href;
function nextImage() {
    window.location.href = 
}
function prevImage() {
    return(url.replace(/(\d+)(\.html)$/, function(str, p1, p2) {
        return((Number(p1) - 1) + p2);
    }));
}
</script>
<?PHP if($prev){?>
        <a href=<?PHP echo "\"".$_SERVER['DOCUMENT_ROOT'].'/Images/'.$imgnum-1 .'.jpg"' ?>> <img border="0" src="Assets/Left.png" /></a>
    <?PHP } if($next){?>
        <a href=<?PHP echo "\"".$_SERVER['DOCUMENT_ROOT'].'/Images/'.$imgnum+1 .'.jpg"' ?>> <img border="0" src="Assets/Right.png"/></a>
    <?PHP }?>
<br/>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-6477782079941355";
/* Just 4 fun */
google_ad_slot = "0518220826";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<br/>

<a name="fb_share"></a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
        type="text/javascript">
</script>
<g:plusone></g:plusone>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<br/>
<div class="fb-comments" data-href="http://jsut4fun.site40.net/9.html" data-num-posts="10" data-width="714"></div>
</center>
</div>



<div class="Sidead"><script type="text/javascript"><!--
google_ad_client = "ca-pub-6477782079941355";
/* dam this is funny ads */
google_ad_slot = "7487699411";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="Facebooklikebox">
<div class="fb-like-box" data-href="http://www.facebook.com/pages/Just-For-Fun/301627143220739" data-width="336" data-height="600" data-show-faces="true" data-stream="true" data-header="true"></div></div>
</div>

</div>
</body>
</html>

来自网址的图片src？

3 个答案: