`

jQuery sudoSlider插件

 
阅读更多
<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>

效果图:

 

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

效果图:

 

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

效果图:

 

<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插件

 

 

  • 大小: 372.8 KB
  • 大小: 367.3 KB
  • 大小: 216.1 KB
  • 大小: 364.9 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics