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>
效果图:
<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插件
上一篇: 函数的练习题答案--python
下一篇: JQuery入门