`

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
分享到:
评论

相关推荐

    jQuery sudoSlider插件 jQuery sudoSlider插件网页特效.zip

    jQuery sudoSlider插件是一款强大的网页滑动特效工具,它基于流行的JavaScript库jQuery构建,旨在为网站增添富有吸引力的动态展示效果。sudoSlider适用于创建各种类型的滑块,如图片轮播、内容滑动面板或者产品展示...

    实现焦点图片切换html幻灯片展示效果的jQuery插件sudoSlider.zip

    实现焦点图片切换html幻灯片展示效果的jQuery插件sudoSlider.zip 实现焦点图片切换html幻灯片展示效果的jQuery插件sudoSlider.zip 实现焦点图片切换html幻灯片展示效果的jQuery插件sudoSlider.zip

    Sudo Slider jQuery Plugin 图片切换特效.zip

    首先,确保引入jQuery库,然后下载sudoSlider插件文件,包括js和css文件。在HTML文件中,创建一个包含所有幻灯片元素的容器,并为每个幻灯片分配唯一的ID或类。接着,在页面加载完成后,使用以下代码初始化...

    Sudo Slider jQuery Plugin 图片切换特效特效代码

    sudoSlider jQuery插件是一款强大的图片切换工具,专为创建引人入胜的图像滑动展示而设计。这个插件能够实现各种丰富的动态效果,包括图片幻灯展示、焦点图片切换以及HTML内容的幻灯片播放,极大地提升了网页的互动...

    jQuery焦点图效果

    在实际项目中,可以使用现成的jQuery焦点图插件,如jQuery.SudoSlider、jQuery.FocusPoint等,它们已经封装好了大部分功能,只需简单配置即可使用。然而,理解基本的实现原理和过程对于开发者来说是非常有益的,这样...

    超好用jquery图片滚动

    5. **插件化开发**:如果需要更复杂的功能,如无限循环、分页导航或预加载图片,可以考虑使用现成的jQuery图片滚动插件,如jQuery Cycle Plugin、SudoSlider等。这些插件已经封装了大部分逻辑,只需要简单的配置即可...

    jQuery横向图片焦点图滚动效果

    然后,我们选择一个合适的jQuery插件,如“bxSlider”或“SudoSlider”,将对应的CSS和JS文件引入到页面中。例如: ```html &lt;script src="js/slider.js"&gt;&lt;/script&gt; ``` 接下来,使用jQuery初始化插件,并设置所需的...

    最新的10款jQuery内容滑块插件分享

    由于文章中提到了10款具体的jQuery内容滑块插件,但是具体内容和详细信息并没有在这段描述中给出,所以我会根据插件的名称进行扩展,说明这些插件可能涉及的技术点和应用场景,从而提供相关的知识点。 首先,jQuery...

    jQuery宽屏焦点图代码制作带缩略图的焦点图代码

    5. **可选:使用jQuery插件**:如果你不希望从零开始编写代码,可以考虑使用已有的jQuery焦点图插件,如SudoSlider、Nivo Slider等。这些插件提供了丰富的配置选项和预设效果,可以快速实现所需功能。 6. **优化与...

Global site tag (gtag.js) - Google Analytics