经验分享程序开发文档资料数据资源其它资源

脸谱换换jquery焦点图轮播滚动切换特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 脸谱换换jquery焦点图轮播滚动切换特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

脸谱换换jquery焦点图轮播滚动切换特效代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>脸谱网jquery焦点图</title>
<link rel="stylesheet" href="css/index.css"/>
<link rel="stylesheet" href="css/main.css"/>
<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>
</head>
<body>
<div class="banner">

    <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>
</body>
</html>

JS代码(slide.js):

(function($){
	$.fn.extend({
	slide:function(options){
	var o ={
	loop:'',conClass:'',speed:500,gap:5000,next:'',prev:'',control:''}
;
	$.extend(o,options);
	var loop = $(o.loop),control = $(o.control),maxLen = control.children().length - 1,timer = null,conClass = o.conClass,isLoop = true,loopsSize = [],tSize = [],cell = [],currentPage = 0,star = function(){
	clearTimeout(timer);
	timer = setTimeout(autoPlay,o.gap);
}
,autoPlay = function(){
	setCell();
	move();
}
,move = function(){
	$('.' + conClass,control).removeClass(conClass);
	control.children().eq(currentPage).addClass(conClass);
	loop.each(function(i,n){
	$(n).animate({
	left:'-'+cell[i]+'px'}
,o.speed,'easeOutCirc',function(){
	if(isLoop) star();
}
);
}
);
}
,setCell = function(){
	if(currentPage < 0){
	currentPage = maxLen;
}
else if(currentPage < maxLen){
	currentPage += 1;
}
else{
	currentPage = 0;
}
$.each(cell,function(i){
	cell[i] = currentPage * tSize[i];
}
);
}
,stop = function(){
	clearTimeout(timer);
}
,jump = function(idx){
	currentPage = idx;
	if(idx < 0){
	currentPage = maxLen;
}
else if(idx > maxLen){
	currentPage = 0;
}
$.each(cell,function(i){
	cell[i] = currentPage * tSize[i];
}
);
	move();
}
;
	loop.each(function(i,n){
	var tt = $(this);
	tSize[i] = tt.parent().width();
	loopsSize[i] = tSize[i] * (maxLen + 1);
	cell[i] = 0;
	tt.width(loopsSize[i]);
}
);
	star();
	this.hover(stop,star);
	control.delegate('li','mouseenter',function(){
	clearTimeout(timer);
	var that = $(this);
	if(that.is('.' + conClass)) return;
	var index = that.index();
	loop.stop();
	isLoop = false;
	jump(index);
}
) .delegate('li','mouseleave',function(){
	isLoop = true;
	star();
}
);
	if(o.prev){
	$(o.prev).live('click',function(){
	clearTimeout(timer);
	var idx = control.children('.'+conClass).index();
	loop.stop();
	jump(idx - 1);
	return false;
}
);
}
if(o.next){
	$(o.next).live('click',function(){
	clearTimeout(timer);
	var idx = control.children('.'+conClass).index();
	loop.stop();
	jump(idx + 1);
	return false;
}
);
}
}
}
)}
)(jQuery);

CSS代码(index.css):

/* CSS Document */
body{font-size:12px;margin:0px;}
#top{width:100%;height:45px;background:url(huanhuandhbj.png) left repeat-x;}
#top .alliconshow{width:100%;height:45px;margin:0 auto;background:url(logo2.png) no-repeat 37px top;}
#top .alliconshow .homeicon{width:140px;height:45px;margin:0 auto;}
.banner{width:100%;height:507px;margin:0 auto;background:url(hh_bannerbj.png) repeat-x center center;}
.logo{width:109px;height:45px;position:relative;left:37px;float:left;}
/************************************************************************banner图片切换效果CSS开始**********************************************************************************************/
.slide-show{Z-INDEX:10;POSITION:relative;WIDTH:1003px;height:507px;margin:0 auto;display:block;background:url(bannerbj1.png);}
.slide-show .current-slide{VISIBILITY:visible;}
.slide-image{Z-INDEX:11;POSITION:absolute;VISIBILITY:hidden;margin-top:0px;margin-left:500px;}
/*.slide-show UL{Z-INDEX:20;POSITION:absolute;DISPLAY:block;TOP:460px;LEFT:350px;width:604px;height:26px;background:url(banner_tabbj2.png) no-repeat left;padding-left:15px;}
.slide-show UL LI{LIST-STYLE-TYPE:none;WIDTH:auto;FLOAT:left;HEIGHT:26px;margin-right:10px;margin-left:10px;CURSOR:pointer;line-height:30px;color:#949494;white-space:nowrap;_overflow:hidden;_padding-top:10px;}
.chinaz-zzsc UL background:url(banner_tabbj2.png) no-repeat left;.slide-show UL LI img{margin-left:15px;vertical-align:middle\9;*margin-bottom:3px;display:inline;overflow:hidden;}
.slide-show UL .current{BACKGROUND:url(smalldhbj.jpg) no-repeat center center;color:#FFF;_BACKGROUND:url(smalldhbj.jpg) no-repeat -7px 5px;}
.slide-show UL .hover{BACKGROUND:url(smalldhbj.jpg) no-repeat center center;_BACKGROUND:url(smalldhbj.jpg) no-repeat -7px 5px;}
*/
/************************************************************************banner图片切换效果CSS结束**********************************************************************************************/

CSS代码(main.css):

html,body,div,p,span,a,strong,form,table,th,td,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,fieldset,iframe,object,pre,img,b,i{border:0 none;margin:0;outline:0 none;padding:0;}
ul,ol,li{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0 none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
body,table,input,textarea,button,select{font-family:Tahoma,sans-serif;font-size:12px;}
.clr{clear:both;height:0;font-size:0;}
a{text-decoration:none;color:#2297ea;}
a:hover{text-decoration:underline;}
body{repeat-x;width:100%;}
.index,.down,.down-info{background:url(index-bg.jpg) center top no-repeat;min-height:760px;width:100%;}
.header{width:1120px;margin:auto;height:164px;position:relative;background:url(header-bg.jpg) no-repeat;}
.logo{position:absolute;top:45px;left:55px;width:260px;height:90px;}
.nav{position:absolute;top:76px;left:440px;}
.nav a{float:left;padding:0 16px;height:88px;line-height:48px;margin-right:30px;color:#233d5e;font-family:微软雅黑;font-size:22px;}
.nav a:hover{color:#3399ff;text-decoration:none;}
.nav a.current{background:url(nav-bg.png) right top no-repeat;color:#fff;line-height:88px;}
.nav a.current:hover{color:#fff;}
.content{width:1120px;margin:auto;position:relative;}
.index .content{background:url(index-content-bg.jpg) no-repeat;}
.down .content{background:url(down-content-bg.jpg) no-repeat;min-height:309px;}
.index-focus{height:598px;}
.focus-box{height:450px;width:882px;position:absolute;left:124px;top:35px;}
.mobile-box{position:absolute;left:498px;top:71px;width:194px;height:291px;overflow:hidden;}
.mobile-img-list{height:427px;position:absolute;}
.mobile-img-list li{float:left;width:194px;height:291px;}
.info-box{position:absolute;left:-170px;top:0;width:540px;height:426px;overflow:hidden;}
.info-img-list{height:450px;position:absolute;}
.info-img-list li{float:left;width:540px;height:426px;}
.info-img-list li img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')}
.controls{position:absolute;left:11%;top:435px;height:14px;}
.controls li{position:relative;left:-50%;width:13px;height:14px;background:url(focus-point.png) -13px 0 no-repeat;margin-right:20px;cursor:pointer;overflow:hidden;float:left;}
.controls li.current{background-position:0 0;}
.mobile{position:absolute;left:95px;top:-19px;background:url(mobile.jpg) no-repeat;width:340px;height:560px;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
649.96 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
649.96 KB
立即下载
宁香婕璐
了解
打赏作者 鼓励作者
Html 焦点滚动特效3
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章