javascript - 为Wordpress制作一个图像 slider 插件

Question

我正在尝试为 WordPress 制作一个带有一些基本控件的图像 slider 插件。

<小时/>

当我按下“下一步”按钮时，我在 Chrome 上收到此错误:

Uncaught ReferenceError: sliders is not defined
    at <anonymous>:1:1
(anonymous) @ VM18633:1

我觉得我已经尝试了一切..

这是我的插件 (php) 文件。

/* Shortcode */
add_shortcode( 'lk_slider',     'lk_main_slider' );

/* Main function */
function lk_main_slider(){
    ?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<?php echo '<link rel="stylesheet" href="' . plugins_url( 'lk-slider/css/style.css', dirname(__FILE__) ) . '"> '; ?>
<?php echo '<script type="text/javascript"' . plugins_url( 'lk-slider/js/slider.js', dirname(__FILE__) ) . '"></script> '; ?>

<div class="lk-plugin-slider">
  <ul>
    <li><?php echo '<img class="lk-slider-photo" src="' . plugins_url( 'lk-slider/img/1.png', dirname(__FILE__) ) . '">'; ?>
        <div class="lk-slider-title">This is the title 1</div>
        <div class="lk-slider-text">This is the text 1</div>
    </li>
    <li><?php echo '<img class="lk-slider-photo" src="' . plugins_url( 'lk-slider/img/2.png', dirname(__FILE__) ) . '">'; ?>
        <div class="lk-slider-title">This is the title 2</div>
        <div class="lk-slider-text">This is the text 2</div>
        </li>
    <li><?php echo '<img class="lk-slider-photo" src="' . plugins_url( 'lk-slider/img/3.png', dirname(__FILE__) ) . '">'; ?>
        <div class="lk-slider-title">This is the title 3</div>
        <div class="lk-slider-text">This is the text 3</div>
    </li>
    <li><?php echo '<img class="lk-slider-photo" src="' . plugins_url( 'lk-slider/img/4.png', dirname(__FILE__) ) . '">'; ?>
        <div class="lk-slider-title">This is the title 4</div>
        <div class="lk-slider-text">This is the text 4</div>
        </li>
  </ul>
</div>

<?php echo '<script type="text/javascript"' . plugins_url( 'lk-slider/js/buttons.js', dirname(__FILE__) ) . '"></script> '; ?>

<div class="lk-slider-buttons">
    <ul>
        <li><a href="javascript:sliders[0].goToPrev()">Previous</a></li>
        <li><a href="javascript:sliders[0].goToNext()">Next</a></li>
    </ul>
    <ul>
        <li><a href="javascript:sliders[0].goTo(0)">1</a></li>
        <li><a href="javascript:sliders[0].goTo(1)">2</a></li>
        <li><a href="javascript:sliders[0].goTo(2)">3</a></li>
        <li><a href="javascript:sliders[0].goTo(3)">4</a></li>
    </ul>
</div>

<?php
    }
?>

slider.js

var Slider = function() { this.initialize.apply(this, arguments) }
    Slider.prototype = {

      initialize: function(slider) {
        this.ul = slider.children[0]
        this.li = this.ul.children

        // make <ul> as large as all <li>’s
        this.ul.style.width = (this.li[0].clientWidth * this.li.length) + 'px'

        this.currentIndex = 0
    },

    goTo: function(index) {
        // filter invalid indices
        if (index < 0 || index > this.li.length - 1)
          return

        // move <ul> left
        this.ul.style.left = '-' + (100 * index) + '%'

        this.currentIndex = index
    },

    goToPrev: function() {
        this.goTo(this.currentIndex - 1)
    },

    goToNext: function() {
        this.goTo(this.currentIndex + 1)
    }
}

buttons.js

var sliders = []
    $('.slider').each(function() {
    sliders.push(new Slider(this))
})

样式.css

.lk-plugin-slider {
  width: 400px; 
  height: 300px;
  overflow: hidden;
  position: relative; /* for overflow: hidden to work in IE7 */
}
/* styled by JS to match the added width and height of all <li>’s */
.lk-plugin-slider > ul {
  position: relative;
  left: 0;
  -webkit-transition: .5s left;
  -moz-transition: .5s left;
  -ms-transition: .5s left;
  -o-transition: .5s left;
  list-style: none;
  margin: 0; 
  padding: 0;
}
.lk-plugin-slider > ul > li {
  float: left;
  width: 400px; 
  height: 300px;
}

/* title */
.lk-slider-title {
  margin-top: -47%;
  margin-left: 5%;
  color: white;
}

/* text */
.lk-slider-text {
  margin-left: 5%;
  color: white;
}

我会接受任何我能得到的帮助。谢谢!

Answer 1

忘记分号:

var sliders = []; // <-- here
$('.slider').each(function() {
    sliders.push(new Slider(this))
})