Question

我正在使用jquery横幅在我的网站上显示广告。当我包含其中一个横幅时，它运行良好，但是当我只包含第二个时，第一个有效，另一个只显示为静态图像。有谁知道为什么会这样？

使用JQuery标题在下面找到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=iso-8859-1" />
<title>Simple JavaScript Rotating Banner Using jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jqbanner/js/jqbanner1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqbanner/css/jqbanner1.css" />
</head>

<body>
<div class="sec sec3 ">
<right>
<div id="jqb_object">

    <div class="jqb_slides">

        <div class="jqb_slide" title=" "><a href="http://www.entebbejunior.ac.ug/"><img src="jqbanner/images/ads/entebeJuniorSchool.png" alt=" Entebbe Junior School Logo"/></a></div>

    <div class="jqb_slide" title="" ><span> <br> <br> <br> <a href="http://www.entebbejunior.ac.ug/">Achievers in the making </a></span>...</div>
    </div>

    <div class="jqb_bar2"> 
        <div class="jqb_info"></div>    
        <div id="btn_next" class="jqb_btn jqb_btn_next"></div>
        <div id="btn_pauseplay" class="jqb_btn jqb_btn_pause"></div>
        <div id="btn_prev" class="jqb_btn jqb_btn_prev"></div>
    </div>

</div>

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

附加找到jquery文件的代码（jqbanner1.js）：

// Simple JavaScript Rotating Banner Using jQuery
// www.mclelun.com
var jqb_vCurrent = 0;
var jqb_vTotal = 0;
var jqb_vDuration = 5000;
var jqb_intInterval = 0;
var jqb_vGo = 1;
var jqb_vIsPause = false;
var jqb_tmp = 20;
var jqb_title;
var jqb_imgW = 460;
var jqb_imgH = 250;

jQuery(document).ready(function() { 
    jqb_vTotal = $(".jqb_slides").children().size() -1;
    $(".jqb_info").text($(".jqb_slide").attr("title")); 
    jqb_intInterval = setInterval(jqb_fnLoop, jqb_vDuration);

    //Horizontal
    $("#jqb_object").find(".jqb_slide").each(function(i) { 
        jqb_tmp = ((i - 1)*jqb_imgW) - ((jqb_vCurrent -1)*jqb_imgW);
        $(this).animate({"left": jqb_tmp+"px"}, 500);
    });

    /*
    //Vertical
    $("#jqb_object").find(".jqb_slide").each(function(i) { 
        jqb_tmp = ((i - 1)*jqb_imgH) - ((jqb_vCurrent -1)*jqb_imgH);
        $(this).animate({"top": jqb_tmp+"px"}, 500);
    });
    */

    $("#btn_pauseplay").click(function() {
        if(jqb_vIsPause){
            jqb_fnChange();
            jqb_vIsPause = false;
            $("#btn_pauseplay").removeClass("jqb_btn_play");
            $("#btn_pauseplay").addClass("jqb_btn_pause");
        } else {
            clearInterval(jqb_intInterval);
            jqb_vIsPause = true;
            $("#btn_pauseplay").removeClass("jqb_btn_pause");
            $("#btn_pauseplay").addClass("jqb_btn_play");
        }
    });
    $("#btn_prev").click(function() {
        jqb_vGo = -1;
        jqb_fnChange();
    });

    $("#btn_next").click(function() {
        jqb_vGo = 1;
        jqb_fnChange();
    });
});

function jqb_fnChange(){
    clearInterval(jqb_intInterval);
    jqb_intInterval = setInterval(jqb_fnLoop, jqb_vDuration);
    jqb_fnLoop();
}

function jqb_fnLoop(){
    if(jqb_vGo == 1){
        jqb_vCurrent == jqb_vTotal ? jqb_vCurrent = 0 : jqb_vCurrent++;
    } else {
        jqb_vCurrent == 0 ? jqb_vCurrent = jqb_vTotal : jqb_vCurrent--;
    }


    $("#jqb_object").find(".jqb_slide").each(function(i) { 
        if(i == jqb_vCurrent){
            jqb_title = $(this).attr("title");
            $(".jqb_info").animate({ opacity: 'hide', "left": "-50px"}, 250,function(){
                $(".jqb_info").text(jqb_title).animate({ opacity: 'show', "left": "0px"}, 500);
            });
        } 


        //Horizontal Scrolling
        jqb_tmp = ((i - 1)*jqb_imgW) - ((jqb_vCurrent -1)*jqb_imgW);
        $(this).animate({"left": jqb_tmp+"px"}, 500);


        /*
        //Vertical Scrolling
        jqb_tmp = ((i - 1)*jqb_imgH) - ((jqb_vCurrent -1)*jqb_imgH);
        $(this).animate({"top": jqb_tmp+"px"}, 500);
        */

        /*
        //Fade In & Fade Out
        if(i == jqb_vCurrent){
            $(".jqb_info").text($(this).attr("title"));
            $(this).animate({ opacity: 'show', height: 'show' }, 500);
        } else {
            $(this).animate({ opacity: 'hide', height: 'hide' }, 500);
        }
        */

    });


}

使用嵌入的html文件查找附加的php文件：专注于：<div class="col4"> <?php include("jqbanner/EntebbeJuniorAd.html");?> </br> </br> <?php include("jqbanner/EntebbeJuniorAd.html");?> </div>

<?php
include("config/functions.inc.php");
include("config/function.php");
$detail=Get_Contents(16);
?>
<!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" />
<title><?php echo ms_stripslashes($detail['meta_title'])?></title>
<meta name="description" content="<?php echo ms_stripslashes($detail['page_keyword'])?>" />
<meta name="keywords" content="<?php echo ms_stripslashes($detail['page_metadesc'])?>" />
<!-- Stylesheets -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="css/contentslider.css" />
<link href="css/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
<!-- Javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/featuredcontentglider.js"></script>
<script type="text/javascript" src="js/jquery.min14.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/contentslider.js"></script>
<script type="text/javascript" src="js/ddaccordion.js"></script>
<script type="text/javascript" src="js/acordin.js"></script>
<script type="text/javascript" src="js/paging.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/Trebuchet_MS_400-Trebuchet_MS_700-Trebuchet_MS_italic_700-Trebuchet_MS_italic_400.font.js"></script>
</head>


<body>
<!-- Wrapper -->
<div id="wrapper_sec">
    <!-- Header -->
    <div id="masthead">
        <div class="inner">
            <?php include("include/logo.php");?>
            <div class="right_head">
                <?php include("include/search.php");?>
                    <!-- Navigation -->
                <?php include("include/nav_top.php");?>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <!-- Bread Crumb -->
        <?php include("include/breadcrumb.php");?>

    <!-- Content -->
    <div id="content_sec">
        <div class="inner2">            
            <div class="col3">
                <h3 class="heading colr">About Jigsaw</h3>

                <div class="">
                    <p><?php echo ms_stripslashes($detail['page_desc'])?></p>
                    <br />
                </div>

                <div class="clear"></div>

            </div>
            <div class="col4"> <?php include("jqbanner/EntebbeJuniorAd.html");?> </br> </br> <?php include("jqbanner/EntebbeJuniorAd.html");?> </div>

            <div class="clear"></div>
        </div>
        <div class="clear"></div>
        <div class="content_botm">&nbsp;</div>
    </div>
    <div class="clear"></div>
    <!-- Footer -->
    <div id="footer">
        <div class="inner">
            <?php include("include/footer/left.php");?>
            <?php include("include/footer/share.php");?>            
            <?php include("include/footer/connect.php");?>
            <?php include("include/footer/resource.php");?>            
        </div>
    </div>
</div>
</body>
</html>

Answer 1

由于您是通过ID $（“＃jqb_object”）初始化横幅广告，因此它只匹配您的第一个横幅，其他所有横幅广告都不会初始化。

要解决此问题，请为您当前通过ID解决的所有元素提供一个非常独特的ID（例如，使用php附加一个唯一的字符串）。或者你可以使用类，但最喜欢打破你的暂停/下一个/上一个按钮。

为什么我的JQuery Sliders只有一个工作

1 个答案: