Question

我的主页上有一张幻灯片：

这是我的剧本：

    (function($) {

   var firstImage = $('#slider-content .slider-img:first').index();
   var lastImage = $('#slider-content .slider-img:last').index();

   var currentImage = firstImage
   var nextImage = firstImage + 1
   var prevImage = lastImage

   var sliderImages = $('#slider-content .slider-img');
   var sliderContent = $('#slider-content');

   var sliderImageWidth = parseFloat(sliderImages.eq(0).css('width'));

   $('#button-next').click(function(e) {
       nextImage = currentImage == lastImage ? firstImage : currentImage + 1;
       sliderContent.animate({ "left": -nextImage * sliderImageWidth });
       currentImage = nextImage;
       e.preventDefault();   
   });
   $('#button-prev').click(function(e) {
       prevImage = currentImage == firstImage ? lastImage : currentImage - 1;
       sliderContent.animate({ "left": -prevImage * sliderImageWidth });
       currentImage = prevImage;
       e.preventDefault();  
   });
})(jQuery);

当您按箭头时，不会更改图像...在本地工作中。

这是代码HTML：

<div id="slider">
        <img id="button-prev" src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/left.jpg">

        <div class="slider-mask">
        <div id="slider-content">
            <div class="slider-img">
                <img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/2.jpg" alt="Flamingo" />

            </div>
            <div class="slider-img">
                <img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/3.jpg" alt="Flamingo" />

            </div>


            </div>
        </div>

        <img id="button-next" src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/right.jpg">
    </div>

这是代码CSS：

#slider {
    width: 1003px;
    margin: 0 auto;
    position: relative; 
}

.slider-img {
    margin:0; 
    float: left;
    position: relative;
}

.caption  {
    color:#DC6804; 
    padding:5px 10px 10px 10px; 
    margin:0; 
    font-family:Verdana; 
    text-transform:uppercase; 
    font-size:12px;
}

.slider-mask {
    overflow:hidden;
    position: relative;
}   

#button-prev {
    position: absolute;
    top: 180px;
    cursor: pointer;
    left: -45px;
}

#button-next {
    position: absolute;
    top: 180px;
    cursor: pointer;
    right: -45px;
}

/* 
adjust #slider-content width as needed 
width = image width * image count
width = 600px * 3 = 1800px 
*/
#slider-content {
    width: 19800px;
    position: relative;
}

我不明白为什么我不工作......我在wordpress中使用了从0构建的主题

这是在Functions.php中声明脚本的代码

add_action('wp_enqueue_scripts','my_script_method');

function my_script_method()
{
    wp_enqueue_script('script', get_template_directory_uri().'/js/slider/js/jquery-slider.js', array('jquery'), null, true);
    wp_enqueue_style('script-style',  get_template_directory_uri().'/js/slider/css/style.css');

}

你能帮我解决这个问题吗？

提前致谢！

jQuery中的滑块无法正常工作

0 个答案: