jquery百叶窗图片切换轮播滚动切换特效代码

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

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

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

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery百叶窗图片切换</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/script.js" type="text/javascript"></script>
</head>
<body>
<div id="show1">
    <ul>
        <li class="active">
            <span class="bg0">这是第一个</span>
            <img src="images/1.jpg" />
        </li>
        <li>
            <span class="bg1">这是第二个</span>
            <img src="images/2.jpg" />
        </li>
        <li>
            <span class="bg2">这是第三个</span>
            <img src="images/3.png" />
        </li>
        <li>
            <span class="bg3">这是第四个</span>
            <img src="images/4.png" />
        </li>
        <li>
            <span class="bg2">这是第五个</span>
            <img src="images/2.jpg" />
        </li>
        <li>
            <span class="bg3">这是第六个</span>
            <img src="images/3.png" />
        </li>
    </ul>
</div>
</body>
</html>

JS代码(script.js):

window.onload=function (){
	createAccordion('show1');
	(function (){
	var oS=document.createElement('script');
	oS.type='text/javascript';
	oS.src='http://www.zhinengshe.com/zpi/zns_demo.php?id=3534';
	document.body.appendChild(oS);
}
)();
}
;
	function createAccordion(id){
	var oDiv=document.getElementById(id);
	var iMinWidth=9999999;
	var aLi=oDiv.getElementsByTagName('li');
	var aSpan=oDiv.getElementsByTagName('span');
	var i=0;
	oDiv.timer=null;
	for(i=0;
	i<aSpan.length;
	i++){
	aSpan[i].index=i;
	aSpan[i].onmouseover=function (){
	gotoImg(oDiv,this.index,iMinWidth);
}
;
	iMinWidth=Math.min(iMinWidth,aLi[i].offsetWidth);
}
}
;
	function gotoImg(oDiv,iIndex,iMinWidth){
	if(oDiv.timer){
	clearInterval(oDiv.timer);
}
oDiv.timer=setInterval(function (){
	changeWidthInner(oDiv,iIndex,iMinWidth);
}
,30);
}
function changeWidthInner(oDiv,iIndex,iMinWidth){
	var aLi=oDiv.getElementsByTagName('li');
	var aSpan=oDiv.getElementsByTagName('span');
	var iWidth=oDiv.offsetWidth;
	var w=0;
	var bEnd=true;
	var i=0;
	for(i=0;
	i<aLi.length;
	i++){
	if(i==iIndex){
	continue;
}
if(iMinWidth==aLi[i].offsetWidth){
	iWidth-=iMinWidth;
	continue;
}
bEnd=false;
	speed=Math.ceil((aLi[i].offsetWidth-iMinWidth)/10);
	w=aLi[i].offsetWidth-speed;
	if(w<=iMinWidth){
	w=iMinWidth;
}
aLi[i].style.width=w+'px';
	iWidth-=w;
}
aLi[iIndex].style.width=iWidth+'px';
	if(bEnd){
	clearInterval(oDiv.timer);
	oDiv.timer=null;
}
}

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
*{padding:0;margin:0;}
li{list-style:none;}
body{background:#f6f9fc;}
div{width:660px;height:254px;border:1px solid #ccc;margin:50px auto 0;overflow:hidden;}
ul{width:3300px;height:254px;}
ul li{width:22px;height:254px;float:left;position:relative;overflow:hidden;}
.active{width:550px;}
ul span{width:21px;height:244px;padding-top:10px;border-right:1px solid #fff;position:absolute;top:0;right:0;color:#fff;font-size:12px;text-align:center;cursor:pointer;}
ul img{width:550px;height:254px;}
.bg0{background:#00FFCC;}
.bg1{background:#636363;}
.bg2{background:#3d7fbb;}
.bg3{background:#5ca716;}
.bg4{background:#f28b24;}
.bg5{background:#7c0070;}

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