编辑:张贴在 jsfiddle 上以便更容易提供帮助:http: //jsfiddle.net/GXf45/
我已经能够创建幻灯片(通过使用教程和堆栈溢出),现在我正在努力添加一些功能;节目中每张幻灯片的按钮。
上一个和下一个按钮可以完美地工作(尤其是在第一张和最后一张幻灯片上),但我遇到了中间按钮的问题。后来我想象jquery根据幻灯片的数量添加按钮。
下面的代码只是我正在进行的修订之一。我认为有很多机会可以改善我所拥有的。让我知道我的错误在哪里以及你可以做些什么来清理它。谢谢。
html 开头有一些红宝石,它根据一些部分填充一个 div。
html:
<div class='slider'>
<ul>
<% Dir["app/views/main/show/*"].each do |file| %>
<li><%= render :file => Rails.root.join(file).to_s %></li>
<% end %>
</ul>
</div>
<div id='slider-nav'>
<button data-dir='prev'>Prvious</button>
<button data-dir='next'>Next</button>
<button data-dir='1'>1</button>
<button data-dir='2'>2</button>
<button data-dir='3'>3</button>
<button data-dir='4'>4</button>
</div>
js:
$(document).ready(function(){
var sliderUL = $('div.slider').css('overflow', 'hidden').children('ul'),
imgs = $('.showScene'),
imgWidth = $('.showScene').width(),
imgsLen = imgs.length,
current = 1,
totalImgsWidth = imgsLen * imgWidth;
$('#slider-nav').show().find('button').on('click', function(){
var direction = $(this).data('dir'),
loc = imgWidth;
//update current value
//(direction == 'next' ) ? ++current : --current;
if (direction == 'next')
{
current += 1; //2
}
else if (direction == 'prev')
{
current -= 1;//0
}
else
{
current = direction;
}
//if first image
if ( current == 0 ) {
current = imgsLen;
loc = totalImgsWidth - imgWidth;
direction ='next';
} else if ( current - 1 == imgsLen){
current = 1;
loc = 0;
}
transition(sliderUL, loc, direction);
});
function transition( container, loc, direction ){
var unit; //-= or +=
if ( direction && loc !== 0) {
unit = ( direction == 'next') ? '-=' : '+=';
}
container.animate({
'margin-left': unit ? (unit + loc) : loc
});
};
});
CSS:
*{margin:0px;padding: 0px;}
.showScene{
width: 800px;
height: 300px;
}
#slider-nav{
margin-top: 1em;
display: none;
}
#slider-nav button{
padding: 1em;
margin-right: 1em;
border-radius: 10px;
cursor: pointer;
}
.slider{
width: 800px;
height: 300px;
border: 2px solid grey;
overflow: scroll;
}
.slider ul {
width: 10000px;
list-style: none;
}
.slider ul li{
float:left;
list-style-type: none;
}