如何从jquery中的滑块中删除分页?

时间:2015-02-07 11:44:43

标签: javascript jquery html css pagination

以下是滑块的脚本:

<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/

一样进行幻灯片演示

任何人都可以帮助我实现这一目标。

提前致谢。

1 个答案:

答案 0 :(得分:1)

我尝试了分页设置并设置为false

 pagination: {
  active: false
    // [string] Can be either "slide" or "fade".
 },
 .......................

但它没有用,所以更好的解决方案是使用display none来包装它。

Demo

.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文件
  1. http://securedcommunications.com/Include/js/cross-slide.js
  2. http://securedcommunications.com/Include/js/jquery-easing.js