注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

基于jquery的Sequence插件实例之现代切换主题

jQuery插件 fishcity 893浏览

这是一款现代,大气而又极其简约的基于jqeury库的sequence插件主题,具有相当美观的右下角按钮,同时也具有前后切换按钮方便切换,插件里的参数配置相当简单,但功能很齐全,可实现好多效果。整个插件需要html5CSS3技持,但可兼容主流浏览器。下面我们来快速使用它吧。

1、下载极简水平切换主题(Minimalist Horizontal Sliding Theme),当然也要包括了sequence插件。

2、解压后把modern-slide-in文件夹放到您的项目中,以便调用。

3、在您需要用使的页面调,本例子是index.html

4、在文档头部载入样式列表文件

<link rel="stylesheet" media="screen" href="css/sequencejs-theme.modern-slide-in.css" />

5、引库jquery库、jquery.sequence-min.js和sequencejs-options.modern-slide-in.js,这里的jquery要1.9.1以上版本

<script src="http://ajax. /ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.sequence-min.js"></script>
<script src="js/sequencejs-options.modern-slide-in.js"></script>

6、创建html标签,如果您想偷懒下可以直接复制过来使用(这叫快速)

<div class="sequence-theme">
    <div id="sequence">

	<img class="sequence-prev" src="images/bt-prev.png" alt="Previous Frame" />
	<img class="sequence-next" src="images/bt-next.png" alt="Next Frame" />

	<ul class="sequence-canvas">
	    <li class="animate-in">
		<h2 class="title">Built using Sequence.js</h2>
		<h3 class="subtitle">The Responsive Slider with Advanced CSS3 Transitions</h3>
		<img class="model" src="images/model1.png" alt="Model 1" />
	    </li>
	    <li>
		<h2 class="title">Creative Control</h2>
		<h3 class="subtitle">Create unique sliders using CSS3 transitions</h3>
		<img class="model" src="images/model2.png" alt="Model 2" />
	    </li>
	    <li>
		<h2 class="title">Cutting Edge</h2>
		<h3 class="subtitle">Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</h3>
		<img class="model" src="images/model3.png" alt="Model 3" />
	    </li>
	</ul>

	<ul class="sequence-pagination">
    	    <li><img src="images/tn-model1.png" alt="Model 1" /></li>
	    <li><img src="images/tn-model2.png" alt="Model 2" /></li>
	    <li><img src="images/tn-model3.png" alt="Model 3" /></li>
	</ul>

    </div>
</div>

整个结构比较清晰明了,开头两个图片为按钮,而ul标签中每一个li为一个画面,本例中就是三个画面的切换,最后面ul标签,是按钮标签。

7、js简要介绍,下面加了注释,简单吧

$(document).ready(function(){
    var options = {
        nextButton: true, //显示上一张按钮
        prevButton: true,  //显示下一张按钮
        pagination: true, //是否分页,即右下角的美女按钮
        animateStartingFrameIn: true, //载入后开始动画
        autoPlay: true, //自动播放
        autoPlayDelay: 3000, //自动播放隔间3000
        preloader: true, //是否使用预加载
        preloadTheseFrames: [1], //预加需到第一帧
        preloadTheseImages: [    //预加载图片
            "images/tn-model1.png",
            "images/tn-model2.png",
            "images/tn-model3.png"
        ]
    };
    
    //调用插件
    var mySequence = $("#sequence").sequence(options).data("sequence");
});

这样,完成以上工作,您就可以测试下效果了。

转载请注明:jQ酷 » 基于jquery的Sequence插件实例之现代切换主题

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。