素材网 素材网

jquery制作双屏焦点图切换仿脸谱网焦点图效果

下载资源()次

阅读次数()次

发布时间:2014-02-13

jquery制作双屏焦点图切换仿脸谱网焦点图效果
分享到:

用法简介:

来源:xw素材网

jquery制作双屏焦点图切换仿脸谱网焦点图效果。这是一款及清爽有绚丽的焦点图切换特效,点击切换按钮左侧屏幕与右侧手机小屏同时切换对应内容。

css文件引用:

<link rel="stylesheet" href="css/index.css"/>
<link rel="stylesheet" href="css/main.css"/>

jquery文件引用:

<SCRIPT type=text/javascript src="js/jquery-1.4.2.min.js"></SCRIPT>
<script type=text/javascript src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/slide.js"></script>

页面结构:

<DIV id=home-slide class=slide-show>
	<div id="triggers">
	</div>
		<div class="focus-box">
			<div class="mobile-box">
				<ul class="mobile-img-list">
						<li><img src="images/1.png" alt="" /></li>	
						<li><img src="images/2.png" alt="" /></li>	
						<li><img src="images/3.png" alt="" /></li>	
						<li><img src="images/4.png" alt="" /></li>	
				</ul>
			</div>
			<div class="info-box">
				<ul class="info-img-list">
						<li><img src="images/1_1.png" alt="" /></li>
						<li><img src="images/2_2.png" alt="" /></li>
						<li><img src="images/3_3.png" alt="" /></li>
						<li><img src="images/4_4.png" alt="" /></li>
				</ul>
			</div>
			<ul class="controls">
				<li class="current"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
        </div>
</DIV>

调用代码:

  <SCRIPT type=text/javascript>
	$(document).ready(function(){
		if($(".weibo-list > li").size() >= 3)
		{
			$(".weibo-list").scroll();	
		}
		$("#nav_index").addClass("current");
	});
	$(function(){
		$('.focus-box').slide({
			loop: '.mobile-img-list,.info-img-list',
			loopBox: 'parent',
			conClass: 'current',
			speed: 500,
			gap: 5000,
			next: '.focus-img-next-btn',
			prev: '.focus-img-prev-btn',
			control: '.controls'
		});
	});
        </SCRIPT>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。