个人中心
gpt4 book ai didi

javascript - 向 jquery Nivo Slider 添加说明(不是默认标题)

转载 作者：行者123 更新时间：2023-11-28 11:43:34 26 4
gpt4 key购买 nike

我花了 4 个小时试图解决这个问题，但到目前为止我还找不到解决方案。基本上，我要做的是为幻灯片中的每张图片添加说明。所以，当图片切换时，描述也必须切换。到目前为止，我已经尝试了很多东西，但似乎没有什么能触发这些变化。这就是我现在所做的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="../themes/default/default.css" type="text/css"     media="screen" />
<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen"     />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
    <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>

    <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
            <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" id="foto1" />
            <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" id="foto2" /></a>
            <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" id="foto3" />
            <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" id="foto4" />
        </div>
                    <div id="htmlcaption" class="nivo-html-caption">
            <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
        </div>
    </div>


</div>
<!-- my Code -->

        <div class="descriptionOff" id="first">
        Description 1
        </div>
        <div class="descriptionOff" id="second">
        Description 2
        </div>
        <div class="descriptionOff" id="third">
        Description 3
        </div>
        <div class="descriptionOff" id="fourth">
        Description 4
        </div>

        <!-- :::::::::::::: -->
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
<script type="text/javascript" src="scripts/andri.js"></script>

所以，我放了一些带有描述的 div，并在图片上添加了一些 ID；

.Description{
  display:block;
}
.descriptionOff{
  display:none;
}

在 css 中，我添加了这两个类，描述必须使用它们来显示或不显示它们自己；

if($("#foto1").hasClass("nivo-main-image")){
  $("#first").toggleClass("Description");
}

这是我在 js(的不同文件)中添加的简单代码行:基本上，如果第一张照片具有类 nivo-main-image(这是在幻灯片中显示图片的类) ，它应该切换第一个描述的类以显示它(if 语句不完整，当然我会对其他描述做同样的事情)。但是没有任何反应，类(class)没有切换。所以，我向你寻求帮助，或者如果你有任何其他解决方案并分享，我将不胜感激。

最佳答案

我还没有真正测试过这个，但你有没有试过将你的 slider 图像包裹在 span 中并在其中添加你的标题(在 img 之后)？

像这样:

<div id="slider" class="nivoSlider">  
<span><img src="slide1.jpg" /><p>This is my non-default caption!</p></span>  
<img src="slide2.jpg" />  
<img src="slide3.jpg" />  
</div>

关于javascript - 向 jquery Nivo Slider 添加说明(不是默认标题)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20578471/

26 4 0
文章推荐： javascript - .show ('slide' 期间的 jQuery 动画高度)
文章推荐： ios - 启动屏幕中的 Gif
文章推荐： css - 为什么显示:block necessary when there is a image background?
文章推荐： ios - 如何在滚动另一个 UICollectionView 时自动滚动 UICollectionView？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com