注册 登录
编程论坛 → JavaScript论坛

感谢版主大人，还有一问，拜托解答---jQuery缩略图广告效果添加链接的方法！！

baobaoxiaomu 发布于 2009-11-18 20:35， 1749 次点击
紧急求助，想在广告图片展示出来后，给广告图片加上链接，跪求大家给我个加链接的方法！

广告效果：http://www.

源代码如下：
<SCRIPT type=text/javascript>
<!--
var num = 0;
$("#nav").hide();
    $("li img").load(function(){
        num++;
        if (num==4)
        {
            $("#nav").show();
        }
    })
        .click(function(){
        
        //如果已经处于active状态，return
        if (this.className.indexOf("active")!=-1) return;
        
        //正文文字渐隐
        $("#frontText").fadeOut();
        $("#frontTextBack").fadeOut();
        $("#frontTextSub").fadeOut();

        //active状态的图片恢复原样
        $("li img.active").fadeTo(200,0.6)
        .removeClass("active")
        .animate({top:5,width:52,left:10},300)
        .parent().css({"color":"#aaa"});  //
        
        //获取数据
        var i = $(this).attr("pic");
        var t = $(this).attr("text").split("|");
        
        //当前
        $(this).animate({top:-5,width:70,height:40,left:1},100)
        .addClass("active")
        .fadeTo(200,1)
        .parent().css({"color":"white"});

        $("#back").children().addClass("gray").end()
                    .fadeTo(500,0.1,function(){
                                        //var IMG = new Image();
                                        //IMG.s
                                        $(this).children("img").attr("src","images/"+i+".jpg").removeClass("gray");     //更改图片
                                        $(this).fadeTo(500,1,function(){
                                                                $("#frontText").html(t[0]).fadeIn(200);    //更改正文文字
                                                                $("#frontTextBack").html(t[0]).fadeIn(200);    //阴影文字
                                                                $("#frontTextSub").html(t[1]).fadeIn(200)}    //副标题
                                                                );
                                        })
        })

    //初始第一张图片
   
    var i =0;

    show();

    function show(){
        if (i==$("li img").size()) i = 0
        $("li img").eq(i).click();
        i++;
        //setTimeout(show(),1000);
    }

    document.oncontextmenu  =  function(e){return false}
   
    if (self.location.search!=""){
        var V = self.location.search;
        V = V.substr(1,V.length);
        eval(V);
        var json ="{";
        if (option.skin==0)
            $("#mask").hide();
        if (option.animate == 0){
        $("#nav ul").hide();
        }
        $("#nav").width(option.width?option.width:760);
        $("#nav").height(option.height?option.height:240);
        $("#back img").width($("#nav").width());
        $("#back img").height($("#nav").height());
        $(self.parent.document.getElementById("splash")).children().height($("#nav").height()).width($("#nav").width());
    }
        
//-->
</SCRIPT>




DIV部分












<DIV id=nav>
<UL>
  <LI><IMG src="images/02.jpg" text="美景如画的海景|天蓝海蓝" pic="2">
  <DIV>一个海岛</DIV></LI>
  <LI><IMG src="images/01.jpg" text="Handy Code|春华秋实" pic="1">
  <DIV>一片麦穗</DIV></LI>
  <LI><IMG src="images/03.jpg" text="郁郁葱葱的生命|生生不息的生命" pic="3">
  <DIV>一树绿叶</DIV></LI>
  <LI><IMG src="images/04.jpg" text="孤独的一棵老树|等谁呢？" pic="4">
  <DIV>一棵大树</DIV></LI>
  <LI><IMG src="images/05.jpg" text="明媚的向日葵花|生生不息的生命" pic="5">
  <DIV>一地葵花</DIV></LI>
</UL>
<DIV id=frontTextBack></DIV>
<DIV id=frontText></DIV>
<DIV id=frontTextSub></DIV>
<DIV id=BG></DIV>
<DIV id=mask></DIV>
<DIV id=back><IMG height=240 src="" width=760></DIV>
</DIV>


[ 本帖最后由 baobaoxiaomu 于 2009-11-19 18:44 编辑 ]
11 回复
#2
aspic2009-11-19 10:12
<img src="http://www. text="美景如画的海景|天蓝海蓝" pic="2" link="http://baidu.com" />
给每个img添加attr link设置链接url
程序代码：
//获取数据
var i = $(this).attr("pic");
var t = $(this).attr("text").split("|");
var l = $(this).attr("link");    //取链接地址
然后修改
$("#frontText").html(t[0]).fadeIn(200);    //更改正文文字
$("#frontTextBack").html(t[0]).fadeIn(200);    //阴影文字
$("#frontTextSub").html(t[1]).fadeIn(200)}    //副标题
为
$("#frontText").html('<a href="' + l + '" target="_blank">'+t[0]+'</a>').fadeIn(200); //更改正文文字
$("#frontTextBack").html(t[0]).fadeIn(200); //阴影文字
$("#frontTextSub").html('<a href="' + l + '" target="_blank">'+t[1]+'</a>').fadeIn(200)
#3
baobaoxiaomu2009-11-19 15:35
按照版主给的程序改动代码后，无法读图了，，版主大人给想想办法啊！！
这是我的所有程序的包，就一个页面
只有本站会员才能查看附件，请 登录

只有本站会员才能查看附件，请 登录
#4
baobaoxiaomu2009-11-19 15:48
回复 2楼 aspic
版主大人给的代码不行啊，错误，我把修改了的代码和效果都放三楼了，帮帮忙把！
#5
foktime2009-11-19 16:49
程序代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="炫浪素材 http://sc. />
<meta name="description" content="更多精美设计素材请访问炫浪网!" />
<meta content="炫浪素材" name="keywords" />
<title>sc. href="css/css.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
</head>
<body>

<div align="center">

<DIV id=nav>
<UL>
  <LI><IMG src="images/02.jpg" text="颠覆行规  361精品服务|服务更贴心" pic="2"  link="http://baidu.com" >
  <DIV>一个海岛</DIV></LI>
  <LI><IMG src="images/01.jpg" text="行业最全  完美解决方案数据库|选择更合理" pic="1"  link="http:// >
  <DIV>一片麦穗</DIV></LI>
  <LI><IMG src="images/03.jpg" text="样板小区解决方案-青岛|购买更方便" pic="3"   link="http:// >
  <DIV>一树绿叶</DIV></LI>
  <LI><IMG src="images/04.jpg" text="新品震撼上市  买赠连环升级|价格更实惠" pic="4"   link="http:// >
  <DIV>一棵大树</DIV></LI>

</UL>
<DIV id=frontTextBack></DIV>
<DIV id=frontText></DIV>
<DIV id=frontTextSub></DIV>
<DIV id=BG></DIV>
<DIV id=mask></DIV>
<DIV id=back><IMG height=454 src="" width=993></DIV>
</DIV>

<p>
  <SCRIPT type=text/javascript>
 <!--
 var num = 0;
 $("#nav").hide();
    $("li img").load(function(){
        num++;
        if (num==4)
        {
            $("#nav").show();
        }
    })
        .click(function(){
        
        //如果已经处于active状态，return
        if (this.className.indexOf("active")!=-1) return;
        
        //正文文字渐隐
        $("#frontText").fadeOut();
        $("#frontTextBack").fadeOut();
        $("#frontTextSub").fadeOut();

        //active状态的图片恢复原样
        $("li img.active").fadeTo(200,0.6)
        .removeClass("active")
        .animate({top:5,width:52,left:10},300)
        .parent().css({"color":"#aaa"});  //
        
        //获取数据
        var i = $(this).attr("pic");
        var t = $(this).attr("text").split("|");
        var l = $(this).attr("link");    //取链接地址

        //当前
        $(this).animate({top:-5,width:70,height:40,left:1},100)
        .addClass("active")
        .fadeTo(200,1)
        .parent().css({"color":"white"});

        $("#back").children().addClass("gray").end().fadeTo(500,0.1,function(){
                                        //var IMG = new Image();
                                        //IMG.s
                                        $(this).children("img").attr("src","images/"+i+".jpg").removeClass("gray");      //更改图片
                                       
                                        $(this).fadeTo(500,1,function(){
$("#frontText").html('<a href="' + l + '" target="_blank">'+t[0]+'</a>').fadeIn(200); //更改正文文字
$("#frontTextBack").html(t[0]).fadeIn(200); //阴影文字
$("#frontTextSub").html('<a href="' + l + '" target="_blank">'+t[1]+'</a>').fadeIn(200)
                                                                      });
                                        })
        })

    //初始第一张图片
   
    var i =0;

    show();

    function show(){
        if (i==$("li img").size()) i = 0
        $("li img").eq(i).click();
        i++;
        //setTimeout(show(),1000);
    }

    document.oncontextmenu   =  function(e){return false}
   
    if (self.location.search!=""){
        var V = self.location.search;
        V = V.substr(1,V.length);
        eval(V);
        var json ="{";
        if (option.skin==0)
            $("#mask").hide();
        if (option.animate == 0){
        $("#nav ul").hide();
        }
        $("#nav").width(option.width?option.width:993);
        $("#nav").height(option.height?option.height:454);
        $("#back img").width($("#nav").width());
        $("#back img").height($("#nav").height());
        $(self.parent.document.getElementById("splash")).children().height($("#nav").height()).width($("#nav").width());
    }
        
 //-->
 </SCRIPT>

</div>

</body>
</html>
index.htm页。
#6
aspic2009-11-19 16:58
程序代码：
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="css/css.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
</head>

<body style="text-align:center">
<div id="nav">
    <ul>
        <li><img src="images/02.jpg" text="美景如画的海景|天蓝海蓝" pic="2" link="http://www. /><div>一个海岛</div></li>
        <li><img src="images/01.jpg" text="Handy Code|春华秋实" pic="1" link="http://baidu.com" /><div>一片麦穗</div></li>
        <li><img src="images/03.jpg" text="郁郁葱葱的生命|生生不息的生命" pic="3" link="http:// /><div>一树绿叶</div></li>
        <li><img src="images/04.jpg" text="孤独的一棵老树|等谁呢？" pic="4" link="http:// /><div>一棵大树</div></li>
        <li><img src="images/05.jpg" text="明媚的向日葵花|生生不息的生命" pic="5" link="http://www. /><div>一地葵花</div></li>
    </ul>
    <div id="frontTextBack"></div>
    <div id="frontText"></div>
    <div id="frontTextSub"></div>
    <div id="BG"></div>
    <div id="mask"></div>
    <div id="back"><img height=240 src="" width=760></div>
</div>
<script>
var num = 0;
$("#nav").hide();
$("li img").load(function() {
    num++;
    if (num == 4) {
        $("#nav").show();
    }
}).click(function() {
    //如果已经处于active状态，return
    if (this.className.indexOf("active") != -1) return;
    //正文文字渐隐
    $("#frontText").fadeOut();
    $("#frontTextBack").fadeOut();
    $("#frontTextSub").fadeOut();
    //active状态的图片恢复原样
    $("li img.active").fadeTo(200, 0.6).removeClass("active").animate({top: 5,width: 52,left: 10},300).parent().css({"color": "#aaa"});
    //获取数据
    var i = $(this).attr("pic");
    var t = $(this).attr("text").split("|");
    var l = $(this).attr('link');
    //当前
    $(this).animate({
        top: -5,
        width: 70,
        height: 40,
        left: 1
    },
    100).addClass("active").fadeTo(200, 1).parent().css({
        "color": "white"
    });
    $("#back").children().addClass("gray").end().fadeTo(500, 0.1,
    function() {
        $(this).children("img").attr("src", "images/" + i + ".jpg").removeClass("gray"); //更改图片
        $(this).fadeTo(500, 1, function() {
            $("#frontText").html('<a href="'+ l +'" target="_blank">' + t[0] + '</a>').fadeIn(200); //更改正文文字
            $("#frontTextBack").html(t[0]).fadeIn(200); //阴影文字
            $("#frontTextSub").html(t[1]).fadeIn(200)
        });
    })
})
//初始第一张图片
var i = 0;
show();
function show() {
    if (i == $("li img").size()) i = 0; $("li img").eq(i).click();
    i++;
}
if (self.location.search != "") {
    var V = self.location.search;
    V = V.substr(1, V.length);
    eval(V);
    var json = "{";
    if (option.skin == 0) $("#mask").hide();
    if (option.animate == 0) {
        $("#nav ul").hide();
    }
    $("#nav").width(option.width ? option.width: 760);
    $("#nav").height(option.height ? option.height: 240);
    $("#back img").width($("#nav").width());
    $("#back img").height($("#nav").height());
    $(self.parent.document.getElementById("splash")).children().height($("#nav").height()).width($("#nav").width());
}
</script>
</body>
</html>
#7
baobaoxiaomu2009-11-19 17:46
是我弄的不对哦！

十分感谢诶！两位版主大人！

不在主题上加链接，在图片上加链接能做到吗？

从今天开始我要好好学习JavaScript，还望各位大哥大姐多多关照，不出30天必将能够更上一层楼
#8
aspic2009-11-22 08:58
图片上加不了你这个 因为图片上还有一个层改住图片
#9
foktime2009-11-24 10:05
去层 加链接
程序代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="炫浪素材 http://sc. />
<meta name="description" content="更多精美设计素材请访问炫浪网!" />
<meta content="炫浪素材" name="keywords" />
<title>sc. href="css/css.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
</head>
<body>

<div align="center">

<DIV id=nav>
<UL>
  <LI><IMG src="images/02.jpg" text="颠覆行规  361精品服务|服务更贴心" pic="2"  link="http://baidu.com" >
  <DIV>一个海岛</DIV></LI>
  <LI><IMG src="images/01.jpg" text="行业最全  完美解决方案数据库|选择更合理" pic="1"  link="http:// >
  <DIV>一片麦穗</DIV></LI>
  <LI><IMG src="images/03.jpg" text="样板小区解决方案-青岛|购买更方便" pic="3"   link="http:// >
  <DIV>一树绿叶</DIV></LI>
  <LI><IMG src="images/04.jpg" text="新品震撼上市  买赠连环升级|价格更实惠" pic="4"   link="http:// >
  <DIV>一棵大树</DIV></LI>

</UL>
<DIV id=frontTextBack></DIV>
<DIV id=frontText></DIV>
<DIV id=frontTextSub></DIV>
<DIV id=BG></DIV>
<DIV id=back><a href="#"><IMG height=454 src="" width=993></a></DIV>
</DIV>

<p>
  <SCRIPT type=text/javascript>
 <!--
 var num = 0;
 $("#nav").hide();
    $("li img").load(function(){
        num++;
        if (num==4)
        {
            $("#nav").show();
        }
    })
        .click(function(){
        
        //如果已经处于active状态，return
        if (this.className.indexOf("active")!=-1) return;
        
        //正文文字渐隐
        $("#frontText").fadeOut();
        $("#frontTextBack").fadeOut();
        $("#frontTextSub").fadeOut();

        //active状态的图片恢复原样
        $("li img.active").fadeTo(200,0.6)
        .removeClass("active")
        .animate({top:5,width:52,left:10},300)
        .parent().css({"color":"#aaa"});  //
        
        //获取数据
        var i = $(this).attr("pic");
        var t = $(this).attr("text").split("|");
        var l = $(this).attr("link");    //取链接地址
        //当前
        $(this).animate({top:-5,width:70,height:40,left:1},100)
        .addClass("active")
        .fadeTo(200,1)
        .parent().css({"color":"white"});

        $("#back").children().addClass("gray").end().fadeTo(500,0.1,function(){
                                        //var IMG = new Image();
                                        //IMG.s
                                        $(this).children("a").children("img").attr("src","images/"+i+".jpg").removeClass("gray");      //更改图片
                                        $(this).children("a").attr("href",l);
                                        $(this).fadeTo(500,1,function(){
$("#frontText").html('<a href="' + l + '" target="_blank">'+t[0]+'</a>').fadeIn(200); //更改正文文字
$("#frontTextBack").html(t[0]).fadeIn(200); //阴影文字
$("#frontTextSub").html('<a href="' + l + '" target="_blank">'+t[1]+'</a>').fadeIn(200)
                                                                      });
                                        })
        })

    //初始第一张图片
   
    var i =0;

    show();

    function show(){
        if (i==$("li img").size()) i = 0
        $("li img").eq(i).click();
        i++;
        //setTimeout(show(),1000);
    }

    document.oncontextmenu   =  function(e){return false}
   
    if (self.location.search!=""){
        var V = self.location.search;
        V = V.substr(1,V.length);
        eval(V);
        var json ="{";
/*        if (option.skin==0)
            $("#mask").hide();
*/        if (option.animate == 0){
        $("#nav ul").hide();
        }
        $("#nav").width(option.width?option.width:993);
        $("#nav").height(option.height?option.height:454);
        $("#back img").width($("#nav").width());
        $("#back img").height($("#nav").height());
        $(self.parent.document.getElementById("splash")).children().height($("#nav").height()).width($("#nav").width());
    }
        
 //-->
 </SCRIPT>

</div>
</body>
</html>
#10
aspic2009-11-24 11:02
去层效果就不太好了~
#11
foktime2009-11-24 13:00
勉勉强强吧 呵呵 想要链接就牺牲一下效果  不去是肯定不好加啊
#12
ht1312010-08-18 11:26
想问一下版主，这个JS代码，如何修改成自动播放的那种呢？
1
©2025, BC-CN.NET
电脑版