随图像旋转图像标题

Rotating image caption with the images

本文关键字：图像 标题 旋转      更新时间：2023-09-26

我有一个图片库，其中我有旋转图像与分页。我想在图像下面显示一个标题，标题也应该随着图像的变化而变化。

我写了以下html代码

<div class="slider_box">
    <div align="left" id="slider2" class="sliderwrapper">
        #IMG# 
    </div> 
    <div id="paginate-slider2" class="pagination"></div>   
</div>
<span class="slider_box">
    <span align="left" id="slider" class="sliderwrapper">
        #CAPTION#
    </span>
</span>

<script>
featuredcontentslider.init({
    id: "slider2",  
    //id of main slider DIV
    contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    //toc: "<img src=images/dot_white.jpg align=absmiddle border=0>",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
    toc: " &nbsp;&nbsp;",
    nextprev: ["", ""],  //labels for "prev" and "next" links. Set to "" to hide.
    revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    enablefade: [true, 0.1],  //[true/false, fadedegree]
    autorotate: [true, 6000],  //[true/false, pausetime]
    onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
        //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
        //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
})
featuredcontentslider.init({
    id: "slider",  
    //id of main slider DIV
    contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    //toc: "<img src=images/dot_white.jpg align=absmiddle border=0>",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
    toc: " &nbsp;&nbsp;",
    nextprev: ["", ""],  //labels for "prev" and "next" links. Set to "" to hide.
    revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    enablefade: [true, 0.1],  //[true/false, fadedegree]
    autorotate: [true, 6000],  //[true/false, pausetime]
    onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
        //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
        //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
})</script>

这样做的问题是所有图像的标题都显示在不旋转的图像下面。(

没有看到你的代码的其余部分，我认为你有一个滑块和这个

<span align="left" id="caption">
#CAPTION#
</span>

和

var captions["Caption for image1", "Caption for image2"]

并更改脚本的onChange部分

onChange: function(previndex, curindex){ 
//event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
 document.getElementById("caption").innerHTML=captions[curindex];
}
相关文章：