jQuery焦点图百叶窗效果切换轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery焦点图百叶窗效果切换轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery焦点图百叶窗效果切换</title>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/osSlider.css" />

</head>
<body>
<div class="htmleaf-container">
	<div class="slider">
		<ul class="slider-main">
			<li>
				<img src="images/1.jpg" alt="">
			</li>
			<li>
				<img src="images/2.jpg" alt="">
			</li>
			<li>
				<img src="images/3.jpg" alt="">
			</li>
			<li>
				<img src="images/4.jpg" alt="">
			</li>
		</ul>
	</div>
</div>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/osSlider.js"></script>
<script type="text/javascript">
	var slider = new osSlider({ //开始创建效果
		pNode:'.slider', //容器的选择器 必填
		cNode:'.slider-main li', //轮播体的选择器 必填
		speed:3000, //速度 默认3000 可不填写
		autoPlay:true //是否自动播放 默认true 可不填写
	});
</script>
</body>
</html>

JS代码(osSlider.min.js):

/** * osSlider v1.0 by 橙色阳光 http://oss.so */
function osSlider(e){
	var o=this;
	o.objs=e,o.pNode=$(o.objs.pNode),o.cNodes=o.pNode.find(o.objs.cNode),o.cNodeNums=o.cNodes.length,o.nowNodeKey=0,o.width=o.cNodes.find("img").width(),o.height=o.cNodes.find("img").height(),o.moveFlag=!0,o.isPause=!1,o.speedNum=0,o.objs.speed||(o.objs.speed=3e3),o.objs.autoPlay||(o.objs.autoPlay=!0),o.init=function(){
	o.pNode.addClass("osSlider-main"),o.pNode.css({
	width:o.width,height:o.height,overflow:"hidden",position:"relative"}
);
	var e=$('<ul class="slider-btn"><li class="slider-btn-prev">prev</li><li class="slider-btn-next">next</li></ul>');
	e.appendTo(o.pNode),$(o.pNode).find(".slider-btn-prev").bind("click",function(){
	o.toggleMove("prev")}
),$(o.pNode).find(".slider-btn-next").bind("click",function(){
	o.toggleMove("next")}
);
	var i=$('<ul class="slider-nav"></ul>');
	i.appendTo(o.pNode),o.cNodes.each(function(e){
	if(0==e){
	var d=20;
	i.append('<li class="active">'+(e+1)+"</li>")}
else{
	var d=e;
	i.append("<li>"+(e+1)+"</li>")}
$(this).css({
	width:o.width+"px",height:o.height+"px",overflow:"hidden",position:"absolute",top:"0px",left:"0px","z-index":d}
)}
),$(o.pNode).find(".slider-nav li").each(function(e){
	$(this).bind("click",function(){
	o.toggleMove(!1,e)}
)}
),o.objs.autoPlay&&o.moveTime()}
,o.sliderNavToggle=function(e,o){
	$(".slider-nav li").each(function(i){
	(i==e||i==o)&&$(this).toggleClass("active")}
)}
,o.toggleMove=function(e,i){
	function d(e,o){
	return Math.floor(Math.random()*(o+1)-e)}
if(o.moveFlag){
	if(!e){
	if(o.nowNodeKey==i)return;
	e=0==o.nowNodeKey&&i==o.cNodeNums-1||i<o.nowNodeKey?"prev":"next"}
i||0==i||("prev"==e?(i=o.nowNodeKey-1,0==o.nowNodeKey&&(i=o.cNodeNums-1)):(i=o.nowNodeKey+1,o.nowNodeKey==o.cNodeNums-1&&(i=0))),o.moveSwitch(d(0,6),e,i)}
}
,o.moveSwitch=function(e,i,d){
	switch(nid=o.nowNodeKey,o.moveFlag=!1,o.speedNum=0,o.sliderNavToggle(nid,d),e){
	case 0:o.gridTop(d,0);
	break;
	case 1:o.gridTop(d,1);
	break;
	case 2:o.gridTop(d,2);
	break;
	case 3:o.gridLeft(d,0);
	break;
	case 4:o.gridLeft(d,1);
	break;
	case 5:o.gridLeft(d,2);
	break;
	case 6:o.cellToggle(d);
	break;
	default:o.gridTop(d)}
}
,o.gridTop=function(e,i){
	o.cNodes[e].style.zIndex=19;
	var d=o.cNodes[o.nowNodeKey].innerHTML;
	o.cNodes[o.nowNodeKey].innerHTML="";
	for(var t=0;
	12>t;
	t++){
	var n=$('<div class="cvNode"></div>');
	$(o.cNodes[o.nowNodeKey]).append(n),n.html(d),n.css({
	position:"absolute",width:o.width/12+"px",height:o.height+"px",zIndex:20,overflow:"hidden",left:o.width/12*t+"px",top:"0"}
),n.find("*").first().css({
	display:"block","margin-left":o.width/-12*t+"px"}
)}
switch(i){
	default:case 0:$(o.cNodes[o.nowNodeKey]).find(".cvNode").each(function(e){
	if(e%2==0)var i=o.height;
	else var i=-1*o.height;
	$(this).animate({
	top:i+"px"}
,1500)}
),setTimeout(function(){
	o.moveFlag=!0,o.cNodes[e].style.zIndex=20,o.cNodes[o.nowNodeKey].style.zIndex=o.nowNodeKey,$(o.cNodes[o.nowNodeKey]).html(d),o.nowNodeKey=e}
,1500);
	break;
	case 1:case 2:$(o.cNodes[o.nowNodeKey]).find(".cvNode").each(1==i?function(e){
	var o=80*e;
	$(this).animate({
	top:$(this).height()+"px"}
,500+o)}
:function(e){
	var o=80*e;
	$(this).animate({
	top:-1*$(this).height()+"px"}
,500+o)}
),setTimeout(function(){
	o.moveFlag=!0,o.cNodes[e].style.zIndex=20,o.cNodes[o.nowNodeKey].style.zIndex=o.nowNodeKey,$(o.cNodes[o.nowNodeKey]).html(d),o.nowNodeKey=e}
,1380)}
}
,o.gridLeft=function(e,i){
	o.cNodes[e].style.zIndex=19;
	var d=o.cNodes[o.nowNodeKey].innerHTML;
	o.cNodes[o.nowNodeKey].innerHTML="";
	for(var t=0;
	12>t;
	t++){
	var n=$('<div class="cvNode"></div>');
	$(o.cNodes[o.nowNodeKey]).append(n),n.html(d),n.css({
	position:"absolute",width:o.width+"px",height:o.height/12+"px",zIndex:20,overflow:"hidden",left:"0",top:o.height/12*t+"px"}
),n.find("*").first().css({
	display:"block","margin-top":o.height/-12*t+"px"}
)}
switch(i){
	default:case 0:$(o.cNodes[o.nowNodeKey]).find(".cvNode").each(function(e){
	if(e%2==0)var i=o.width;
	else var i=-1*o.width;
	$(this).animate({
	left:i+"px"}
,1500)}
);
	break;
	case 1:case 2:$(o.cNodes[o.nowNodeKey]).find(".cvNode").each(1==i?function(e){
	var i=80*e;
	$(this).animate({
	left:-1*o.width+"px"}
,620+i)}
:function(e){
	var i=80*e;
	$(this).animate({
	left:o.width+"px"}
,620+i)}
)}
setTimeout(function(){
	o.moveFlag=!0,o.cNodes[e].style.zIndex=20,o.cNodes[o.nowNodeKey].style.zIndex=o.nowNodeKey,$(o.cNodes[o.nowNodeKey]).html(d),o.nowNodeKey=e}
,1500)}
,o.cellToggle=function(e){
	o.cNodes[e].style.zIndex=19;
	var i=o.cNodes[o.nowNodeKey].innerHTML;
	o.cNodes[o.nowNodeKey].innerHTML="";
	for(var d=0;
	20>d;
	d++){
	if(5>d)var t=0;
	else if(10>d)var t=1;
	else if(15>d)var t=2;
	else var t=3;
	var n=$('<div class="cvNode"></div>');
	$(o.cNodes[o.nowNodeKey]).append(n),n.html(i),n.css({
	position:"absolute",width:o.width/5+"px",height:o.height/4+"px",zIndex:20,overflow:"hidden",left:o.width/5*(d%5)+"px",top:o.height/4*t+"px"}
),n.find("*").first().css({
	display:"block","margin-left":o.width/-5*(d%5)+"px","margin-top":o.height/-4*t+"px"}
)}
$(o.cNodes[o.nowNodeKey]).find(".cvNode").each(function(e){
	e%2==0&&$(this).find("*").first().animate({
	"margin-left":$(this).width()+"px"}
,500)}
),setTimeout(function(){
	$(o.cNodes[o.nowNodeKey]).find(".cvNode").each(function(e){
	e%1==0&&$(this).find("*").first().animate({
	"margin-left":$(this).width()+"px"}
,500)}
)}
,600),setTimeout(function(){
	o.moveFlag=!0,o.cNodes[e].style.zIndex=20,o.cNodes[o.nowNodeKey].style.zIndex=o.nowNodeKey,$(o.cNodes[o.nowNodeKey]).html(i),o.nowNodeKey=e}
,1100)}
,o.moveTime=function(){
	setTimeout(function(){
	o.moveFlag&&(o.speedNum++,o.speedNum>=o.objs.speed/100&&(o.speedNum=0,o.toggleMove("next"))),o.isPause||setTimeout(arguments.callee,100)}
,100)}
,o.init()}

CSS代码(base.css):

html,body{width:100%;height:100%;margin:0;padding:0;}
body{background:#fff;margin:0;padding:0;font-size:14px;line-height:25px;color:#555;}
body,input,button,textarea,h1,h2,h3,h4,h5,h6{font-family:Hiragino Sans GB,STHeiti,Microsoft Yahei,sans-serif;}
ul,li,ol{list-style:none;}
h1,h2,h3,h4,h5,h6,ul,li,ol,blockquote,pre,p,table,tbody,th,td,tr,span{margin:0;padding:0;}
input{outline:0;}
img{border:none;}
a:link,a:visited{text-decoration:none;-webkit-transition:background-color .15s linear,color .15s linear;-moz-transition:background-color .15s linear,color .15s linear;transition:background-color .15s linear,color .15s linear;}
a:hover{color:#f60;}
a{color:#369;-webkit-backface-visibility:hidden;}
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}
:focus{outline:none}
:hover{outline:none}

CSS代码(default.css):

@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#f9f7f6;color:#404d5b;font-weight:500;font-size:1.05em;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.htmleaf-container{margin:0 auto;text-align:center;overflow:hidden;}
.htmleaf-content{font-size:150%;padding:1em 0;}
.htmleaf-content h2{margin:0 0 2em;opacity:0.1;}
.htmleaf-content p{margin:1em 0;padding:5em 0 0 0;font-size:0.65em;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
/* Header */
.htmleaf-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;}
.htmleaf-header h1{font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.htmleaf-header h1 span{font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.htmleaf-demo a{color:#1d7db1;text-decoration:none;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #1d7db1;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.htmleaf-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.htmleaf-icon span{display:none;}
.htmleaf-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#333;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-htmleaf-home-outline:before{content:"\e5000";}
.icon-htmleaf-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:50em){.htmleaf-header{padding:3em 10% 4em;}
.htmleaf-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.htmleaf-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.htmleaf-header h1{font-size:1.2em;}
}

CSS代码(demo.css):

.slider{width:1024px;height:550px;margin:50px auto;overflow:hidden;}

附件:下载该文件资源,减少时间成本(增值服务)

.rar

229.56 KB

立即下载(CNY 2.9￥)

打赏收藏

分享到QQ

分享到微博

微信扫一扫

留言

该资源可下载

.rar

229.56 KB

立即下载

韦瑶岚琦

了解

打赏作者鼓励作者

Html 焦点滚动特效1