我正在尝试在我的网站上嵌入带有导航箭头的JQuery Slider

Question

我尝试使用Navigation构建一个JQuery Slider，但我无法弄清楚脚本中的一些错误。我是JQuery的新手并且正在努力寻找解决方案。以下是我的一些问题：1）我在牌组中有4张图片，但我的滑块在我的（幻灯片框）分页中显示9个点，2）如果我在第一张幻灯片加载时单击上一个箭头...它会转到空白图像，第三，我的幻灯片框无法正确呈现。我的测试版本运行在http://www.chscottenterprises.com/home/newsroom。

JQuery的：

    <script type="text/javascript">

$(document).ready(function() {        

    //Execute the slideShow, set 10 seconds for each images
    slideShow(10000);

});

function slideShow(speed) {
    $('ul.slideshow li').each(function() {
        $('.slideshowBox .dots').append('<div class="dot"></div>');
    });

    $('.slideshowBox .dots .dot').click(function() {
        gallery($(this).index());
    });

    //append a LI item to the UL list for displaying caption
    $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3><a></a></h3><p></p></div></li>');

    //Set the opacity of all images to 0
    $('ul.slideshow li').css({opacity: 0.0});

    //Get the first image and display it (set it to full opacity)
    $('ul.slideshow li:first').css({opacity: 1.0}).addClass('show');
    $('.slideshowBox .dots .dot:first').addClass('selected');

    //Get the caption of the first image from REL attribute and display it and add hyperlink
    $('#slideshow-caption a').html($('ul.slideshow li.show').find('img').attr('title'));
    $('#slideshow-caption a').attr('href', $('ul.slideshow li.show').find('a').attr('href'));
    $('#slideshow-caption p').html($('ul.slideshow li.show').find('img').attr('alt'));

    //Display the caption
    $('#slideshow-caption').css({opacity:1, bottom:0});

    //Call the gallery function to run the slideshow    
    var timer = setInterval('gallery("next")',speed);

    //pause the slideshow and show arrows on mouse over
    $('div.slideshowBox').hover(
        function () {
            clearInterval(timer);
            $('.arrow').css({visibility:'visible'}).animate({opacity: 1.0}, 200);;
        },     
        function () {
            timer = setInterval('gallery("next")',speed);    
            $('.arrow').css({visibility:'hidden', opacity: 0.0});
        }
    );
}

function gallery(direction) {

    //if no IMGs have the show class, grab the first image
    var current = ($('ul.slideshow li.show') ?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

    $(current).stop();
    $('#slideshow-caption').stop();

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    if (direction == 'next') // select next item
        var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
    else if (direction == 'prev') // select previous item
        var next = ((current.prev().length) ? (current.prev()) : $('ul.slideshow li:last').prev());
    else if (!isNaN(direction)) // if is a number
        var next = $('ul.slideshow li:eq(' + direction + ')');

    // change selected dot
    $('.slideshowBox .dots .dot:eq(' + next.index() + ')').addClass('selected').siblings().removeClass('selected');

    //Get next image caption
    var title = next.find('img').attr('title');    
    var link = next.find('a').attr('href');
    var desc = next.find('img').attr('alt');    

    //Set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

    //Hide the caption first, and then set and display the caption (and change link href)
    $('#slideshow-caption').slideUp(300, function () {
        $('#slideshow-caption a').html(title).attr('href', link);
        $('#slideshow-caption p').html(desc);
        $('#slideshow-caption').css({height: 52}).slideDown(500);
    });        

    //Hide the current image
    current.animate({opacity: 0}, 1000).removeClass('show');
}
</script>

CSS：

    <style type="text/css">


body {
     font-family:verdana,sans-serif;
     font-size:12px;
}

.slideshowBox {
     position: relative;
}

ul.slideshow {
     background: #ffffff;
     list-style: none;
     margin: 0;
     overflow: hidden;
     padding: 0;
     position: relative;
}

ul.slideshow li img {
     height: 235px;
}

.slideshowBox, ul.slideshow, ul.slideshow li {
     width: 950px;
     height: 235px;
}

#slideshow-caption {
     height: 60px;
}

ul.slideshow li {
     left: 0;
     position: absolute;
     right: 0;
     text-align: center;
}

ul.slideshow li.show {
     z-index: 500;
}

ul img {
     border: none;
}

#slideshow-caption {
     position: absolute;
     bottom: 0;
     left: 0;
     color: #FFF;
     background: url("https://4310b1a9-a-fed18fe2-s-sites.googlegroups.com/a/chscottenterprises.com/home/black_85.png?attachauth=ANoY7cqw4Q_6-GBnddRVsy3FjGxQOwb2Kp4zz3n4jl2bMUCa_txTTfb9Xee0dEzadWq_ZmNyxM4TTdqH6GD081lJcbrsxQ16kI63oX90Fwc4DSP2jSI_81raNgZ_a4D7jXd04PMsoSW13vhosrGFEKZaDXuYXhd7-2KRSPQc0q-nIdHV4JyF8zVZueOn2FfpIu4nVk_UDNXTa2IU7LxlN4Eq3H_ZZID3bw%3D%3D&attredirects=0");
     z-index: 500;     
     text-align: left;

}

#slideshow-caption .slideshow-caption-container {
     padding: 5px 15px;
     z-index: 1000;
}

#slideshow-caption a {
     color: #dd8d00;
     text-decoration: none;
}

#slideshow-caption a:hover {
     color: #ffffff;
}

#slideshow-caption h3 {
     margin: 0;
     padding: 0;
     font-size: 18px;
}

#slideshow-caption p {
     margin: 0px 0 0;
     padding: 0;
}

.arrow
{
     position: absolute;
     top: 100px;
     z-index: 1500;
     visibility: hidden;
     opacity: 0;
     height: 40px;
     width: 40px;
     border: none;
     outline: none;     
}

.arrow a
{
     display: block;
     height: 100%;
}

.arrow.next
{
     right: 20px;
     background: url("https://4310b1a9-a-fed18fe2-s-sites.googlegroups.com/a/chscottenterprises.com/home/arrow_next_sprite.png?attachauth=ANoY7cqVwJpVF-JAc2BC-Y81nH9gbtra8np5ed2djxRyqt863b4PuZ_CTDAF17qXmzwMFxvaFYLVdGZxApwwDI66j8BZ4_JDjS1059VkriiCYxKnSqYhbdEchGQA6a_gpcxgk_g-UJCdhd9Tn41X3SHqqOfgp_GahHTbg9NhlB4Ln2TrjOsYqzdIOHwY1TizMNv--1gopQPotVoC3qDbSWuEHUxYKdSLnirJcrQRu7xFP0pWEi4hGYQ%3D&attredirects=0") 0 0;
}

.arrow.next:hover
{
     background: url("https://4310b1a9-a-fed18fe2-s-sites.googlegroups.com/a/chscottenterprises.com/home/arrow_next_sprite.png?attachauth=ANoY7cqVwJpVF-JAc2BC-Y81nH9gbtra8np5ed2djxRyqt863b4PuZ_CTDAF17qXmzwMFxvaFYLVdGZxApwwDI66j8BZ4_JDjS1059VkriiCYxKnSqYhbdEchGQA6a_gpcxgk_g-UJCdhd9Tn41X3SHqqOfgp_GahHTbg9NhlB4Ln2TrjOsYqzdIOHwY1TizMNv--1gopQPotVoC3qDbSWuEHUxYKdSLnirJcrQRu7xFP0pWEi4hGYQ%3D&attredirects=0") 0 -40px;
}

.arrow.prev
{
     left: 20px;
     background: url("https://4310b1a9-a-fed18fe2-s-sites.googlegroups.com/a/chscottenterprises.com/home/arrow_prev_sprite.png?attachauth=ANoY7cor_Anhk7JAtmtiGJSbDSFbnvRYOG6h8Zi4bzjE4vhGK5O3gmSPMLEOBgNvzpCKNLVfEdmBS9uMTmNTpdIQS1JwzuBjPfOPoPpbh6awGGGHI1tRwTp8QPiAvbj3ykaEZnWlCscEBLrlQafj83XVeWyxW8Sf85FP0Jyu0L7oYv8A1lKqPJc0hdRhyO-CVKcb_qQCbSobzasORbnZaj_mfvqpwljeExsSVzZWWsP5WunHRIAqn_M%3D&attredirects=0") 0 0;     
}

.arrow.prev:hover
{
     background: url("https://4310b1a9-a-fed18fe2-s-sites.googlegroups.com/a/chscottenterprises.com/home/arrow_prev_sprite.png?attachauth=ANoY7cor_Anhk7JAtmtiGJSbDSFbnvRYOG6h8Zi4bzjE4vhGK5O3gmSPMLEOBgNvzpCKNLVfEdmBS9uMTmNTpdIQS1JwzuBjPfOPoPpbh6awGGGHI1tRwTp8QPiAvbj3ykaEZnWlCscEBLrlQafj83XVeWyxW8Sf85FP0Jyu0L7oYv8A1lKqPJc0hdRhyO-CVKcb_qQCbSobzasORbnZaj_mfvqpwljeExsSVzZWWsP5WunHRIAqn_M%3D&attredirects=0") 0 -40px;
}

.dots
{
     position: absolute;
     z-index: 1500;
     bottom: 10px;
     right: 10px;
}

.dot
{
     width: 12px;
     height: 12px;
     background: url("https://4310b1a9-a-fed18fe2-s-sites.googlegroups.com/a/chscottenterprises.com/home/dots.png?attachauth=ANoY7cqjjr-zhpVAtDE6Y7h3rxYQ-UnHo6Cs2mQ0w_VzKJs91jS3fRPdTlheIHunXUFtR5WXv7j6JuvWvGLn5301pFyWHL-bVFMmsryMhcn9yfWmNE5Z1VysCAtpeGwmBgSqYxY1kQLuOqe_nxabgOwAEdyJwCgNts2boUVk0NNuFYYXYbAVqxUUKNQED7f8mTLU7vQgsMdC6wjLIa-hnHOgQG_Wqb3zMw%3D%3D&attredirects=0") 0 0;
     margin-left: 5px;
     float: left;
     cursor: hand;
     cursor: pointer;

}

.dot:hover, .dot.selected
{
     background: url("https://4310b1a9-a-fed18fe2-s-sites.googlegroups.com/a/chscottenterprises.com/home/dots.png?attachauth=ANoY7cqjjr-zhpVAtDE6Y7h3rxYQ-UnHo6Cs2mQ0w_VzKJs91jS3fRPdTlheIHunXUFtR5WXv7j6JuvWvGLn5301pFyWHL-bVFMmsryMhcn9yfWmNE5Z1VysCAtpeGwmBgSqYxY1kQLuOqe_nxabgOwAEdyJwCgNts2boUVk0NNuFYYXYbAVqxUUKNQED7f8mTLU7vQgsMdC6wjLIa-hnHOgQG_Wqb3zMw%3D%3D&attredirects=0") 0 -12px;
}

</style>

HTML：

<body>
<div class="slideshowBox">
<div class="dots">
<div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot selected"></div></div>

<div style="visibility: hidden; opacity: 0;" class="arrow next"><a href="javascript:void(0)" onclick="gallery('next')"></a></div>
<div style="visibility: hidden; opacity: 0;" class="arrow prev"><a href="javascript:void(0)"onclick="gallery('prev')"></a></div>

<ul class="slideshow">
           <li style="opacity: 0;" class="show"><a href="#"><img src="https://lh3.googleusercontent.com/-xrC8F_tS8B4/T6E3ywGKtUI/AAAAAAAABys/ChojzK1RRCE/s800/HomePageBanner_A.png" onclick="window.open('http://www.chscottenterprises.com/services/business-strategy-services')" width="950" height="235" title ="Business Strategy - Experienced" alt="Implementing Strategies that Assure Success."/></a></li>
           <li class="" style="opacity: 0;"><a href="#"><img src="https://lh3.googleusercontent.com/-syD-w41UPIA/T6E30F7NSRI/AAAAAAAABy8/LvWvGHU6fKE/s950/HomePageBanner_B.png" onclick="window.open('http://www.chscottenterprises.com/services/management-advisory-services')" width="950" height="235" title="Management Advisory - Knowledgeable" alt="Our Management Advisory Teams Deliver Valuable Insights."/></a></li>
           <li class="" style="opacity: 0;"><a href="#"><img src="https://lh5.googleusercontent.com/-I4azNiYBkZg/T6E3zPM7FAI/AAAAAAAABy0/PrkodduH6cc/s950/HomePageBanner_C.png" onclick="window.open('http://www.chscottenterprises.com/services/technology-consulting')" width="950" height="235" title="Technology Consulting - Results Oriented" alt="Our Technology Consulting Teams Quickly Deliver Transformation."/></a></li>
           <li class="" style="opacity: 0;"><a href="#"><img src="https://lh3.googleusercontent.com/-fF-IVr01AJo/T6E33apEhBI/AAAAAAAABzE/wkefINaptGw/s950/HomePageBanner_D.png" onclick="window.open('http://www.chscottenterprises.com/home/success-stories')" width="950" height="235" title="CHScottEnterprises" alt="Business Strategy | Management Advisory | Technology Consulting"/></a></li>

<li style="opacity: 1; bottom: 0px; display: list-item; height: 60px;" id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3><a href="#">""</a></h3><p>""</p></div></li></ul>
</div>
</body>