javascript - 为什么图片不是链接？

Question

我有这个 JQuery 图像演示文稿，由于某种原因，我无法使用 ancor 标签来处理图像。这是我的页面： http: //orhsfoundation.com/Trial

我不知道这些是否需要，但你去

HTML：

<div id="allinone_bannerWithPlaylist_easy"  style="; ;  display: none;background-color: #03F;">
            <!-- IMAGES -->
        <a href="about.html"><img src="Assets/Images/01_easyPlaylist.jpg" alt=""  data-title="Lorem Ipsum Dolor1" data-text-id="#allinone_bannerWithPlaylist_photoText1" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit " border="0" /></a>


            <img src="Assets/Images/02_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText2" data-title="Fusce Suscipit Risus2" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus." />
            <img src="Assets/Images/03_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText3" data-title="Class Aptent Taciti " data-desc="Maecenas interdum interdum enim id laoreet. Curabitur semper fermentum leo pretium eleifend." />
            <img src="Assets/Images/04_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText4" data-title="Maecenas Lacus Ante" data-desc="Donec hendrerit magna sit amet eros lobortis non egestas diam scelerisque. Praesent molestie aliquet ipsum." /> 
            <img src="Assets/Images/05_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText5" data-title="Lorem Ipsum Dolor" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit" />
            <img src="Assets/Images/06_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText6" data-title="Suscipit Risus" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus." />



          <img src="Assets/Images/01_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText1" data-title="Lorem Ipsum Dolor1" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit " />
            <img src="Assets/Images/02_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText2" data-title="Fusce Suscipit Risus2" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus." />
            <img src="Assets/Images/03_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText3" data-title="Class Aptent Taciti " data-desc="Maecenas interdum interdum enim id laoreet. Curabitur semper fermentum leo pretium eleifend." />
            <img src="Assets/Images/04_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText4" data-title="Maecenas Lacus Ante" data-desc="Donec hendrerit magna sit amet eros lobortis non egestas diam scelerisque. Praesent molestie aliquet ipsum." /> 
            <img src="Assets/Images/05_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText5" data-title="Lorem Ipsum Dolor" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit" />
            <img src="Assets/Images/06_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText6" data-title="Suscipit Risus" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus." />                                 



            <!-- TEXTS -->
            <div id="allinone_bannerWithPlaylist_photoText1" class="allinone_bannerWithPlaylist_texts">
                <div class="allinone_bannerWithPlaylist_text_line textbg_easy" data-initial-left="0" data-initial-top="100" data-final-left="-50" data-final-top="320" data-duration="0.5" data-fade-start="0" data-delay="0">
                <div class="textElement11_easy">Up to 5 types of banners</div>
                <div class="textElement12_easy">Each with multiple SKINS</div></div>
           </div>  

           <div id="allinone_bannerWithPlaylist_photoText2" class="allinone_bannerWithPlaylist_texts">
                <div class="allinone_bannerWithPlaylist_text_line textElement21_easy" data-initial-left="80" data-initial-top="50" data-final-left="30" data-final-top="30" data-duration="0.5" data-fade-start="0" data-delay="0">16 transition effects for images</div>
                <div class="allinone_bannerWithPlaylist_text_line textElement22_easy" data-initial-left="280" data-initial-top="80" data-final-left="30" data-final-top="90" data-duration="0.5" data-fade-start="0" data-delay="0.3">optional can set the transition for each image</div>
           </div> 


           <div id="allinone_bannerWithPlaylist_photoText3" class="allinone_bannerWithPlaylist_texts">
                <div class="allinone_bannerWithPlaylist_text_line textElement31_easy" data-initial-left="0" data-initial-top="50" data-final-left="40" data-final-top="35" data-duration="0.5" data-fade-start="0" data-delay="0">Animated text from any direction</div>
                <div class="allinone_bannerWithPlaylist_text_line textElement32_easy" data-initial-left="0" data-initial-top="90" data-final-left="40" data-final-top="66" data-duration="0.5" data-fade-start="0" data-delay="0.3">top, bottom, left and right</div>
                <div class="allinone_bannerWithPlaylist_text_line textElement33_easy" data-initial-left="0" data-initial-top="200" data-final-left="40" data-final-top="101" data-duration="1" data-fade-start="0" data-delay="0.5">Any color, CSS and HTML formated</div>               
           </div>  


           <div id="allinone_bannerWithPlaylist_photoText4" class="allinone_bannerWithPlaylist_texts">
                <div class="allinone_bannerWithPlaylist_text_line textbg_easy" data-initial-left="0" data-initial-top="100" data-final-left="0" data-final-top="287" data-duration="0.5" data-fade-start="0" data-delay="0">
                <div class="textElement41_easy">Lorem <a href="http://codecanyon.net/user/LambertGroup" target="_blank">Ipsum</a> Dolor Sit Amet</div>
                <div class="textElement42_easy">Consectetur Adiscipit</div></div>
           </div> 

            <div id="allinone_bannerWithPlaylist_photoText5" class="allinone_bannerWithPlaylist_texts">
                <div class="allinone_bannerWithPlaylist_text_line textElement51_easy" data-initial-left="30" data-initial-top="0" data-final-left="30" data-final-top="270" data-duration="0.5" data-fade-start="0" data-delay="0">Line One is here</div>
                <div class="allinone_bannerWithPlaylist_text_line textElement52_easy" data-initial-left="30" data-initial-top="384" data-final-left="30" data-final-top="250" data-duration="0.5" data-fade-start="0" data-delay="0.3">Line Two over there</div>
           </div>

CSS（有一些被编辑）：

.allinone_bannerWithPlaylistBorder {
    position:relative;
}


/* the container */
.allinone_bannerWithPlaylist {
    position:relative;


}
.allinone_bannerWithPlaylist img {
    position:absolute;
    top:0px;
    left:0px;
    max-width:100%;
    max-height:100%;    
}
.allinone_bannerWithPlaylist .stripe {
    position:absolute;
    display:block;  
    height:100%;
    z-index:1;
}
.allinone_bannerWithPlaylist .block {
    position:absolute;
    display:block;  
    z-index:1;
        }


/***ELEGANT SKIN***/

.allinone_bannerWithPlaylist.elegant .bannerControls {
    position:absolute;
    left:0;
    top:0;
    z-index:2;
}

.allinone_bannerWithPlaylist.elegant .leftNav {
    position:absolute;
    left:0px;
    top:50%;
    margin-top:-35px; /* height/2 */
    width:31px;
    height:71px;
    background:url(leftNavOFF.png) 0 0 no-repeat;
    cursor: pointer;
}

.allinone_bannerWithPlaylist.elegant .leftNav:hover {
    background:url(leftNavON.png) 0 0 no-repeat;
}
.allinone_bannerWithPlaylist.elegant .rightNav {
    position:absolute;
    right:0px;
    top:50%;
    margin-top:-35px; /* height/2 */
    width:31px;
    height:71px;
    background:url(rightNavOFF.png) 0 0 no-repeat;
    cursor: pointer;
}
.allinone_bannerWithPlaylist.elegant .rightNav:hover {
    background:url(rightNavON.png) 0 0 no-repeat;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolderWrapper {
    position:absolute;
    background:#e9e9e9;
    /*height:121px;
    width:100%;*/
    height:100%;
    overflow:hidden;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolderVisibleWrapper {
    position:absolute;
    /*width:100%;
    height:121px;*/
    height:100%;
    overflow:hidden;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolder {
    position:absolute;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbOFF {
    display:block;
    height:110px;
    background:#cfcfcf;
    text-align:left;
    line-height:1.4em;
    cursor: pointer;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbOFF  .padding {
    padding:10px;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbOFF .title {
    font: bold 13px 'Droid Sans', sans-serif;
    color:#000;
    display:inline-block;
    padding-bottom:5px;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbOFF .reg {
    font: 11px Arial, sans-serif;
    color:#000;
    line-height:1.4em;
}

.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbOFF img {
    position:relative;
    float:left;
    margin-right:10px;
}

.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbON {
    background:#611731;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbON .title {
    color:#ff771c;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbON .reg {
    color:#FFF;
}


/*  scroller start */
.allinone_bannerWithPlaylist.elegant .slider-vertical {
    display:none;
    position:absolute;
    width:6px;
}

.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider { position: relative;}
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 6px; height: 25px; cursor: pointer; background:url(scrollerFaceOFF.png) 0 0 no-repeat; }
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider .ui-slider-handle:hover { background:url(scrollerFaceON.png) 0 0 no-repeat; }
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider .ui-slider-range { position: absolute; z-index: 1; display: block; border: 0; }


.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider-vertical { width: 6px; height: 100px; }
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider-vertical .ui-slider-handle { left: 0px; margin-left: 0px; margin-bottom: -25px;; border: 0; }
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider-vertical .ui-slider-range-max { top: 0; }


/* Component containers
----------------------------------*/
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-widget-content { xbackground: #FF0000; }
.allinone_bannerWithPlaylist.elegant .slider-vertical .ui-widget-header { xbackground: #0000cc; }


/* Corner radius */
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-corner-all {}

/* Interaction states
----------------------------------
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-state-default {background: #000000; }
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-state-hover { background: #FFF000;  }
*/
/*  scroller end */




/***EASY SKIN***/

.allinone_bannerWithPlaylist.easy .bannerControls {
    position:absolute;
    left:0;
    top:0;
    z-index:2;
}

.allinone_bannerWithPlaylist.easy .leftNav {
    position:absolute;
    left:5px;
    top:50%;
    margin-top:-35px; /* height/2 */
    width:41px;
    height:41px;
    background:url(Assets/Images/Banner/skins/easy/leftNavOFF.png) 0 0 no-repeat;
    cursor: pointer;

}

.allinone_bannerWithPlaylist.easy .leftNav:hover {
    background:url(Assets/Images/Banner/skins/easy/leftNavON.png) 0 0 no-repeat;
}
.allinone_bannerWithPlaylist.easy .rightNav {
    position:absolute;
    right:5px;
    top:50%;
    margin-top:-35px; /* height/2 */
    width:41px;
    height:41px;
    background:url(Assets/Images/Banner/skins/easy/rightNavOFF.png) 0 0 no-repeat;
    cursor: pointer;
}
.allinone_bannerWithPlaylist.easy .rightNav:hover {
    background:url(Assets/Images/Banner/skins/easy/rightNavON.png) 0 0 no-repeat;
}


.allinone_bannerWithPlaylist.easy .thumbsHolderWrapper {
    position:absolute;
    background:#e9e9e9;
    height:100%;
    overflow:hidden;
    width:100%;
}

.allinone_bannerWithPlaylist.easy .thumbsHolderVisibleWrapper {
    position:absolute;
    height:100%;
    overflow:hidden;

}

.allinone_bannerWithPlaylist.easy .thumbsHolder {
    position:absolute;

}

.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbOFF {
    display:block;
    height:96px;
    background:url(Assets/Images/Banner/skins/easy/bgPlaylistUnit.png) top left repeat-x;
    text-align:left;
    line-height:1.4em;
    cursor: pointer;
}
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbOFF  .padding {
    padding:10px;
}
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbOFF .title {
    font: bold 13px 'Droid Sans', sans-serif;
    color:#000;
    display:inline-block;
    padding-bottom:5px;
}
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbOFF .reg {
    font: 11px Arial, sans-serif;
    color:#000;
    line-height:1.4em;
}
/****
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbOFF img {
    position:relative;
    float:left;
    margin-right:10px;
}/****/

.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbON {
    /*background: #611731 url(skins/easy/thumbActiveArrow.png) -3px 0px no-repeat;*/
    background: #611731;
    z-index:4;
}

.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbON .title {
    color:#ff771c;
}
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbON .reg {
    color:#FFF;
}


/*  scroller start */
.allinone_bannerWithPlaylist.easy .slider-vertical {
    display:none;
    position:absolute;
    width:6px;
}

.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider { position: relative;}
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 6px; height: 25px; cursor: pointer; background:url(Assets/Images/Banner/skins/easy/scrollerFaceOFF.png) 0 0 no-repeat; }
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider .ui-slider-handle:hover { background:url(Assets/Images/Banner/skins/easy/scrollerFaceON.png) 0 0 no-repeat; }
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider .ui-slider-range { position: absolute; z-index: 1; display: block; border: 0; }


.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider-vertical { width: 6px; height: 100px; }
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider-vertical .ui-slider-handle { left: 0px; margin-left: 0px; margin-bottom: -25px;; border: 0; }
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider-vertical .ui-slider-range-max { top: 0; }


/* Component containers
----------------------------------*/
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-widget-content { xbackground: #FF0000; }
.allinone_bannerWithPlaylist.easy .slider-vertical .ui-widget-header { xbackground: #0000cc; }


/* Corner radius */
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-corner-all {}


/***EASY TEXTS***/

.textbg_easy {
    width:690px;
    background:url(Assets/Images/Banner/skins/easy/textBg_transparency.png);
    padding:5px 10px 5px 10px;

}

.textElement11_easy {
    font: bold 24px 'Droid Sans', Verdana, Helvetica, sans-serif;
    text-transform:uppercase;
    padding:0px 10px 3px 10px;
    color:#ffffff;
}
.textElement12_easy {
    font: bold 18px 'Droid Sans', Verdana, Helvetica, sans-serif;
    text-transform:uppercase;
    padding:0px 10px 3px 10px;
    color:#ffffff;
}


.textElement21_easy {
    width:265px;
    background:#512d5d;
    font: bold 22px 'Droid Sans', Verdana, Helvetica, sans-serif;
    text-transform:uppercase;
    padding:5px 10px 5px 10px;
    color:#ffffff;
}
.textElement22_easy {
    width:240px;
    background:#611731;
    font: bold 14px 'Droid Sans', Verdana, Helvetica, sans-serif;
    padding:7px 10px 7px 10px;
    color:#ffffff;
}


.textElement31_easy {
    background:#d61d1d;
    font: bold 18px 'Droid Sans', Verdana, Helvetica, sans-serif;
    text-transform:uppercase;
    padding:5px 10px 5px 10px;
    color:#ffffff;
}
.textElement32_easy {
    background:#ffffff;
    font: bold 18px 'Droid Sans', Verdana, Helvetica, sans-serif;
    padding:7px 10px 7px 10px;
    color:#000000;
}

.textElement33_easy {
    background:#000000;
    font: bold 18px 'Droid Sans', Verdana, Helvetica, sans-serif;
    padding:7px 10px 7px 10px;
    color:#ffffff;
}

.textElement41_easy {
    font: bold 24px 'Droid Sans', Verdana, Helvetica, sans-serif;
    text-transform:uppercase;
    padding:0px 10px 3px 10px;
    color:#ffffff;
}


.textElement41_easy a {
    text-decoration:none;
    color:#ff771c;
}

.textElement41_easy a:hover {
    color:#c1dd56;
}

.textElement42_easy {
    font: bold 18px 'Droid Sans', Verdana, Helvetica, sans-serif;
    text-transform:uppercase;
    padding:0px 10px 3px 10px;
    color:#ffffff;
}


.textElement51_easy {
    font: bold 38px 'Droid Sans', Verdana, Helvetica, sans-serif;
    text-transform:uppercase;
    padding:6px 15px 6px 15px;
    color:#000000;
}
.textElement52_easy {
    font: bold 20px 'Droid Sans', Verdana, Helvetica, sans-serif;
    text-transform:uppercase;
    padding:6px 15px 6px 15px;
    color:#000000;
}


.textElement_easy {
    background:#512d5d;
    padding:10px;
    color:#FFF;
}
.textElement2_easy {
    background:#FF0000;
    padding:10px;
    color:#FFF;
}

.allinone_bannerWithPlaylist_texts {
    position:absolute;
    z-index:3;
    display:none;
    width:100%;
    text-align:left;
}

.allinone_bannerWithPlaylist_text_line {
    position:absolute;
}



.hideElement {
    display:none;
}

Answer 1

简要查看您的 allinone_bannerWithPlaylist.js 文件。看起来它通过剥离图像标签的 src 属性并将其设置为它创建的一系列 div 的背景图像来生成幻灯片。因此，您的图像没有被链接，因为您的图像（您放入 HTML 中）不是实际显示的内容。这种行为是允许列在“百叶窗式”过渡中的原因。

这就是你的答案。我的修复建议是找到一个可能更适合您需求的不同 jquery 幻灯片插件。您可能会失去柱状过渡，但您会获得链接。