我试图使用一些基本控件为wordpress创建一个图像滑块插件。
当我按下“下一步”按钮时，我在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))
})
的style.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;
}
我可以得到任何帮助。谢谢！
答案 0 :(得分：0)
忘了分号：
var sliders = []; // <-- here
$('.slider').each(function() {
sliders.push(new Slider(this))
})
答案 1 :(得分：0)
/* Enqueue Your Scripts! Always! */
add_action('wp_enqueue_scripts', 'se42031002_enqueue');
function se42031002_enqueue() {
wp_enqueue_script('lk_slider', plugins_url( 'lk-slider/js/slider.js', dirname(__FILE__) ));
wp_enqueue_script('lk_slider-buttons', plugins_url( 'lk-slider/js/buttons.js', dirname(__FILE__) ));
wp_enqueue_style('lk_slider-style', plugins_url( 'lk-slider/css/style.css', dirname(__FILE__) ));
}
/* Shortcode */
add_shortcode( 'lk_slider', 'lk_main_slider' );
/* Main function */
function lk_main_slider(){
$output = '<div class="lk-plugin-slider"><ul>
<li><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><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><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><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>
<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>';
return $output;
}