以下是滑块的脚本:
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>
以上脚本中添加的脚本以及这些
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
包含在头标记中。
以下是jsfiddle链接:http://jsfiddle.net/j88u02o2/
在上面我添加了html和slides.min.jquery.js文件。
当我在所有代码上方运行时,显示分页。但我不需要..所以我试图删除它..但我不能。它仍然显示数字..
我的页面如下所示:http://s28.postimg.org/rs8wlvmwt/Untitled_1.png
我需要,像这个链接http://securedcommunications.com/
一样进行幻灯片演示任何人都可以帮助我实现这一目标。
提前致谢。
答案 0 :(得分:1)
我尝试了分页设置并设置为false
pagination: {
active: false
// [string] Can be either "slide" or "fade".
},
.......................
但它没有用,所以更好的解决方案是使用display none来包装它。
.pagination{
display:none;
}
<强>更新强>
根据新的更新和新的JS滑块,Here is DEMO
我做的是 - &gt;
$(function() {
$('#slides').crossSlide({
speed: 40,
fade: 1
}, [
{ src: 'http://securedcommunications.com/Include/Images/home/photo-2.jpg', dir: 'up', alt: 'Our Business is to Encrypt and Secure Your Communications', href: '#' },
{ src: 'http://securedcommunications.com/Include/Images/home/photo-2.jpg', dir: 'down', alt: 'The Solution for Secured Communications and Privacy.', href: '#' }
/* */
], function(idx, img, idxOut, imgOut) {
if (idxOut == undefined) {
if(idx == 0 || idx == 3 || idx == 6 || idx == 9){
document.getElementById('crossSlideCaption').style.marginTop = '-430px';
document.getElementById('crossSlideCaption').style.marginLeft = '-485px';
}else if(idx == 1 || idx == 4 || idx == 7 || idx == 10 || idx == 12){
document.getElementById('crossSlideCaption').style.marginTop = '-280px';
document.getElementById('crossSlideCaption').style.marginLeft = '-100px';
}else{
document.getElementById('crossSlideCaption').style.marginTop = '-52px';
document.getElementById('crossSlideCaption').style.marginLeft = '-485px';
};
$('div.caption').text(img.alt).animate({ opacity: 1.0 })
} else {
$('div.caption').animate({ opacity: 0 })
}});
$('div.caption').show().css({ opacity: 0 })
});
HTML
<div id="container">
<div id="example">
<div id="slides" style="width:970px;height:430px;"></div>
<div id="" class="" style="position:relative; width:970px; margin:auto;" align="">
<div id="crossSlideCaption" class="caption">
</div>
</div>
</div>
在
中添加2个JS文件