欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery sudoSlider插件

程序员文章站 2024-03-05 14:34:43
...
<script>
$(document).ready(function(){	
    $("#slider").sudoSlider();
});
</script>
<div id="slider" class="slider" >
    <ul>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
    </ul>
</div>

效果图:
jQuery sudoSlider插件
 

<script>
$(document).ready(function(){	
    $("#slider2").sudoSlider({ 
        numeric:true,
        prevNext:false,
        startSlide: 2
    });
});
</script>
<div id="slider2" class="slider" >
    <ul>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
    </ul>
</div>

效果图:
jQuery sudoSlider插件
 

<script>
$(document).ready(function(){	
    $("#slider3").sudoSlider({ 
        numeric: true,
        fade: true,
        prevNext: true,
	    startSlide: 3,
    	updateBefore: true,
        numericText:['slide1', 'slide2', 'third slide', 'number 4', 'last slide']
   });
});
</script>
<div id="slider3" class="slider" >
    <ul>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
    </ul>
</div>

效果图:
jQuery sudoSlider插件
 

<script>
var ajaximages = [
    'images/01.jpg', 
    'images/04.jpg', 
    'images/02.jpg', 
    'images/03.jpg', 
    'images/05.jpg'
];
var imagestext = [
    'Just another beautiful sunset', 
    'Behind another beautiful sunset',
    'Mountains in the Alps', 
    'Road and mountains in the Alps',
    'A goat in norway',
];
$("#slider17").sudoSlider({ 
    fade:true,
    continuous:true,
    ajax: ajaximages,
    imgAjaxFunction: function(t){
        $(this)
            .css("position","relative")
            .append('<div class="caption" >' + imagestext[t-1] + '</div>');
    },
    beforeAniFunc: function(t){ 
        $(this).children('.caption').hide();	
    },
    afterAniFunc: function(t){ 
        $(this).children('.caption').slideDown(400);
    }
});
</script>
<div id="slider17" class="slider"></div>
<style>
.caption {
    position:absolute;
    bottom:0;
    left:0;
    width:700px;
    height:25px;
    text-align:center;
    color:black;
    background:white;
    background:transparent;
    background:rgba(255,255,255,0.7);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#a3ffffff,endColorstr=#a3ffffff);
    zoom: 1;
}
</style>

效果图:
jQuery sudoSlider插件
 

更多特效请下载:jQuery sudoSlider插件