jQuery多样式按钮平滑轮播滚动切换特效代码焦点图

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

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

以下是 jQuery多样式按钮平滑轮播滚动切换特效代码焦点图的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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>
<script language="javascript" src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/tFocus.css">
<script language="javascript">
$(function(){
//图片滚动宽度
var wVal=420;
var Timer=null;
$(".keImgs").width($(".keImgs").find("li").size()*wVal)
var keCutNum=0;
var relNum=$(".keImgBtn li").size();
//滚动动画
function srcMove(){
    $(".keImgs").animate({"left":-keCutNum*wVal},100);
	$(".keImgBtn li").removeClass("keImgCutLi");$(".keImgBtn li").eq(keCutNum).addClass("keImgCutLi");
	$(".keImgTxt li").hide();$(".keImgTxt li").eq(keCutNum).show();	
}
function keChgImg(){
 	keCutNum++;
	if(keCutNum==relNum){
		keCutNum=0;
	}
	srcMove();
}
var Timer=setInterval(keChgImg,3000)
$(".keChgImg").hover(function(){clearInterval(Timer)},function(){Timer=setInterval(keChgImg,3000)});
$(".keChgBtnR").click(function(){
	keCutNum++;
	if(keCutNum==relNum){
		keCutNum=0;
	}
	srcMove();
});
$(".keChgBtnL").click(function(){
	keCutNum--;
	if(keCutNum<0){
		keCutNum=relNum-1;
	}
	srcMove();
});
$(".keImgBtn li").hover(function(){
	keCutNum=$(".keImgBtn li").index(this);
	srcMove();
});
//End
})
</script>
<!--[if IE 6]>
<script src="js/ie6PNG.js" type="text/javascript"></script>
<script type="text/javascript">DD_belatedPNG.fix('*');</script>
<![endif]-->
</head>
<body>
<div style="padding:50px;">
<!--焦点图开始-->
<div class="keChgImg">
<ul class="keImgs">
<li><a href="#"><img src="images/chgImg1.jpg" width="420" height="272" alt="#网页特效" /></a></li>
<li><a href="#"><img src="images/chgImg3.jpg" width="420" height="272" alt="#网页特效" /></a></li>
<li><a href="#"><img src="images/chgImg2.jpg" width="420" height="272" alt="#网页特效" /></a></li>
<li><a href="#"><img src="images/chgImg4.jpg" width="420" height="272" alt="#网页特效" /></a></li>
<li><a href="#"><img src="images/chgImg5.jpg" width="420" height="272" alt="#网页特效" /></a></li>
</ul>
<div class="keImgTitleBg"></div>
<div class="keImgBtn">
 <ul>
  <li class="keCor1 keImgCutLi">1<img src="images/chgSq.gif" width="11" height="6" /></li>
  <li class="keCor2">2<img src="images/chgSq.gif" width="11" height="6" /></li>
  <li class="keCor3">3<img src="images/chgSq.gif" width="11" height="6" /></li>
  <li class="keCor4">4<img src="images/chgSq.gif" width="11" height="6" /></li>
  <li class="keCor5">5<img src="images/chgSq.gif" width="11" height="6" /></li>
 </ul>
</div>
<div class="keImgTxt">
 <ul>
  <li><a class="cor_blue" href="#/m7_js_mode2_57.html" title="">jQuery鼠标滑过实现多区块图片切换</a></li>
  <li class="hidden"><a class="cor_blue" href="#/m7_js_mode2_55.html">Js/jQuery上下箭头渐变图文切换（多张）相册特效</a></li>
  <li class="hidden"><a class="cor_blue" href="#/m7_js_mode2_54.html">纯Js/jQuery多图片左右渐变轮播展示相册</a></li>
  <li class="hidden"><a class="cor_blue" href="#/m7_js_mode2_53.html">Js/jQuery带左右箭头+按钮弹性滑动焦点图</a></li>
  <li class="hidden"><a class="cor_blue" href="#/m7_js_mode2_52.html">js/jQuery仿腾讯/新浪图片展示网页特效</a></li>
 </ul>
</div>
<img class="keChgBtnL" src="images/chgBtnL.png" width="40" height="40" />
<img class="keChgBtnR" src="images/chgBtnR.png" width="40" height="40" />
</div>
<!--End-->
<div class="clear"></div>
</div>
</body>
</html>

JS代码(ie6PNG.js):

var DD_belatedPNG ={
	ns:'DD_belatedPNG',imgSize:{
}
,delay:10,nodesFixed:0,createVmlNameSpace:function (){
	if (document.namespaces && !document.namespaces[this.ns]){
	document.namespaces.add(this.ns,'urn:schemas-microsoft-com:vml');
}
}
,createVmlStyleSheet:function (){
	var screenStyleSheet,printStyleSheet;
	screenStyleSheet = document.createElement('style');
	screenStyleSheet.setAttribute('media','screen');
	document.documentElement.firstChild.insertBefore(screenStyleSheet,document.documentElement.firstChild.firstChild);
	if (screenStyleSheet.styleSheet){
	screenStyleSheet = screenStyleSheet.styleSheet;
	screenStyleSheet.addRule(this.ns + '\\:*','{
	behavior:url(#default#VML)}
');
	screenStyleSheet.addRule(this.ns + '\\:shape','position:absolute;
	');
	screenStyleSheet.addRule('img.' + this.ns + '_sizeFinder','behavior:none;
	border:none;
	position:absolute;
	z-index:-1;
	top:-10000px;
	visibility:hidden;
	');
	this.screenStyleSheet = screenStyleSheet;
	printStyleSheet = document.createElement('style');
	printStyleSheet.setAttribute('media','print');
	document.documentElement.firstChild.insertBefore(printStyleSheet,document.documentElement.firstChild.firstChild);
	printStyleSheet = printStyleSheet.styleSheet;
	printStyleSheet.addRule(this.ns + '\\:*','{
	display:none !important;
}
');
	printStyleSheet.addRule('img.' + this.ns + '_sizeFinder','{
	display:none !important;
}
');
}
}
,readPropertyChange:function (){
	var el,display,v;
	el = event.srcElement;
	if (!el.vmlInitiated){
	return;
}
if (event.propertyName.search('background') != -1 || event.propertyName.search('border') != -1){
	DD_belatedPNG.applyVML(el);
}
if (event.propertyName == 'style.display'){
	display = (el.currentStyle.display == 'none') ? 'none':'block';
	for (v in el.vml){
	if (el.vml.hasOwnProperty(v)){
	el.vml[v].shape.style.display = display;
}
}
}
if (event.propertyName.search('filter') != -1){
	DD_belatedPNG.vmlOpacity(el);
}
}
,vmlOpacity:function (el){
	if (el.currentStyle.filter.search('lpha') != -1){
	var trans = el.currentStyle.filter;
	trans = parseInt(trans.substring(trans.lastIndexOf('=')+1,trans.lastIndexOf(')')),10)/100;
	el.vml.color.shape.style.filter = el.currentStyle.filter;
	/* complete guesswork */
el.vml.image.fill.opacity = trans;
	/* complete guesswork */
}
}
,handlePseudoHover:function (el){
	setTimeout(function (){
	DD_belatedPNG.applyVML(el);
}
,1);
}
,fix:function (selector){
	if (this.screenStyleSheet){
	var selectors,i;
	selectors = selector.split(',');
	for (i=0;
	i<selectors.length;
	i++){
	this.screenStyleSheet.addRule(selectors[i],'behavior:expression(DD_belatedPNG.fixPng(this))');
}
}
}
,applyVML:function (el){
	el.runtimeStyle.cssText = '';
	this.vmlFill(el);
	this.vmlOffsets(el);
	this.vmlOpacity(el);
	if (el.isImg){
	this.copyImageBorders(el);
}
}
,attachHandlers:function (el){
	var self,handlers,handler,moreForAs,a,h;
	self = this;
	handlers ={
	resize:'vmlOffsets',move:'vmlOffsets'}
;
	if (el.nodeName == 'A'){
	moreForAs ={
	mouseleave:'handlePseudoHover',mouseenter:'handlePseudoHover',focus:'handlePseudoHover',blur:'handlePseudoHover'}
;
	for (a in moreForAs){
	if (moreForAs.hasOwnProperty(a)){
	handlers[a] = moreForAs[a];
}
}
}
for (h in handlers){
	if (handlers.hasOwnProperty(h)){
	handler = function (){
	self[handlers[h]](el);
}
;
	el.attachEvent('on' + h,handler);
}
}
el.attachEvent('onpropertychange',this.readPropertyChange);
}
,giveLayout:function (el){
	el.style.zoom = 1;
	if (el.currentStyle.position == 'static'){
	el.style.position = 'relative';
}
}
,copyImageBorders:function (el){
	var styles,s;
	styles ={
	'borderStyle':true,'borderWidth':true,'borderColor':true}
;
	for (s in styles){
	if (styles.hasOwnProperty(s)){
	el.vml.color.shape.style[s] = el.currentStyle[s];
}
}
}
,vmlFill:function (el){
	if (!el.currentStyle){
	return;
}
else{
	var elStyle,noImg,lib,v,img,imgLoaded;
	elStyle = el.currentStyle;
}
for (v in el.vml){
	if (el.vml.hasOwnProperty(v)){
	el.vml[v].shape.style.zIndex = elStyle.zIndex;
}
}
el.runtimeStyle.backgroundColor = '';
	el.runtimeStyle.backgroundImage = '';
	noImg = true;
	if (elStyle.backgroundImage != 'none' || el.isImg){
	if (!el.isImg){
	el.vmlBg = elStyle.backgroundImage;
	el.vmlBg = el.vmlBg.substr(5,el.vmlBg.lastIndexOf('")')-5);
}
else{
	el.vmlBg = el.src;
}
lib = this;
	if (!lib.imgSize[el.vmlBg]){
	img = document.createElement('img');
	lib.imgSize[el.vmlBg] = img;
	img.className = lib.ns + '_sizeFinder';
	img.runtimeStyle.cssText = 'behavior:none;
	position:absolute;
	left:-10000px;
	top:-10000px;
	border:none;
	margin:0;
	padding:0;
	';
	imgLoaded = function (){
	this.width = this.offsetWidth;
	this.height = this.offsetHeight;
	lib.vmlOffsets(el);
}
;
	img.attachEvent('onload',imgLoaded);
	img.src = el.vmlBg;
	img.removeAttribute('width');
	img.removeAttribute('height');
	document.body.insertBefore(img,document.body.firstChild);
}
el.vml.image.fill.src = el.vmlBg;
	noImg = false;
}
el.vml.image.fill.on = !noImg;
	el.vml.image.fill.color = 'none';
	el.vml.color.shape.style.backgroundColor = elStyle.backgroundColor;
	el.runtimeStyle.backgroundImage = 'none';
	el.runtimeStyle.backgroundColor = 'transparent';
}
,vmlOffsets:function (el){
	var thisStyle,size,fudge,makeVisible,bg,bgR,dC,altC,b,c,v;
	thisStyle = el.currentStyle;
	size ={
	'W':el.clientWidth+1,'H':el.clientHeight+1,'w':this.imgSize[el.vmlBg].width,'h':this.imgSize[el.vmlBg].height,'L':el.offsetLeft,'T':el.offsetTop,'bLW':el.clientLeft,'bTW':el.clientTop}
;
	fudge = (size.L + size.bLW == 1) ? 1:0;
	makeVisible = function (vml,l,t,w,h,o){
	vml.coordsize = w+','+h;
	vml.coordorigin = o+','+o;
	vml.path = 'm0,0l'+w+',0l'+w+','+h+'l0,'+h+' xe';
	vml.style.width = w + 'px';
	vml.style.height = h + 'px';
	vml.style.left = l + 'px';
	vml.style.top = t + 'px';
}
;
	makeVisible(el.vml.color.shape,(size.L + (el.isImg ? 0:size.bLW)),(size.T + (el.isImg ? 0:size.bTW)),(size.W-1),(size.H-1),0);
	makeVisible(el.vml.image.shape,(size.L + size.bLW),(size.T + size.bTW),(size.W),(size.H),1 );
	bg ={
	'X':0,'Y':0}
;
	if (el.isImg){
	bg.X = parseInt(thisStyle.paddingLeft,10) + 1;
	bg.Y = parseInt(thisStyle.paddingTop,10) + 1;
}
else{
	for (b in bg){
	if (bg.hasOwnProperty(b)){
	this.figurePercentage(bg,size,b,thisStyle['backgroundPosition'+b]);
}
}
}
el.vml.image.fill.position = (bg.X/size.W) + ',' + (bg.Y/size.H);
	bgR = thisStyle.backgroundRepeat;
	dC ={
	'T':1,'R':size.W+fudge,'B':size.H,'L':1+fudge}
;
	altC ={
	'X':{
	'b1':'L','b2':'R','d':'W'}
,'Y':{
	'b1':'T','b2':'B','d':'H'}
}
;
	if (bgR != 'repeat' || el.isImg){
	c ={
	'T':(bg.Y),'R':(bg.X+size.w),'B':(bg.Y+size.h),'L':(bg.X)}
;
	if (bgR.search('repeat-') != -1){
	v = bgR.split('repeat-')[1].toUpperCase();
	c[altC[v].b1] = 1;
	c[altC[v].b2] = size[altC[v].d];
}
if (c.B > size.H){
	c.B = size.H;
}
el.vml.image.shape.style.clip = 'rect('+c.T+'px '+(c.R+fudge)+'px '+c.B+'px '+(c.L+fudge)+'px)';
}
else{
	el.vml.image.shape.style.clip = 'rect('+dC.T+'px '+dC.R+'px '+dC.B+'px '+dC.L+'px)';
}
}
,figurePercentage:function (bg,size,axis,position){
	var horizontal,fraction;
	fraction = true;
	horizontal = (axis == 'X');
	switch(position){
	case 'left':case 'top':bg[axis] = 0;
	break;
	case 'center':bg[axis] = 0.5;
	break;
	case 'right':case 'bottom':bg[axis] = 1;
	break;
	default:if (position.search('%') != -1){
	bg[axis] = parseInt(position,10) / 100;
}
else{
	fraction = false;
}
}
bg[axis] = Math.ceil( fraction ? ( (size[horizontal?'W':'H'] * bg[axis]) - (size[horizontal?'w':'h'] * bg[axis]) ):parseInt(position,10) );
	if (bg[axis] % 2 === 0){
	bg[axis]++;
}
return bg[axis];
}
,fixPng:function (el){
	el.style.behavior = 'none';
	var lib,els,nodeStr,v,e;
	if (el.nodeName == 'BODY' || el.nodeName == 'TD' || el.nodeName == 'TR'){
	/* elements not supported yet */
return;
}
el.isImg = false;
	if (el.nodeName == 'IMG'){
	if(el.src.toLowerCase().search(/\.png$/) != -1){
	el.isImg = true;
	el.style.visibility = 'hidden';
}
else{
	return;
}
}
else if (el.currentStyle.backgroundImage.toLowerCase().search('.png') == -1){
	return;
}
lib = DD_belatedPNG;
	el.vml ={
	color:{
}
,image:{
}
}
;
	els ={
	shape:{
}
,fill:{
}
}
;
	for (v in el.vml){
	if (el.vml.hasOwnProperty(v)){
	for (e in els){
	if (els.hasOwnProperty(e)){
	nodeStr = lib.ns + ':' + e;
	el.vml[v][e] = document.createElement(nodeStr);
}
}
el.vml[v].shape.stroked = false;
	el.vml[v].shape.appendChild(el.vml[v].fill);
	el.parentNode.insertBefore(el.vml[v].shape,el);
}
}
el.vml.image.shape.fillcolor = 'none';
	el.vml.image.fill.type = 'tile';
	el.vml.color.fill.on = false;
	lib.attachHandlers(el);
	lib.giveLayout(el);
	lib.giveLayout(el.offsetParent);
	el.vmlInitiated = true;
	lib.applyVML(el);
}
}
;
	try{
	document.execCommand("BackgroundImageCache",false,true);
}
catch(r){
}
DD_belatedPNG.createVmlNameSpace();
	DD_belatedPNG.createVmlStyleSheet();

CSS代码(tFocus.css):

/* 全局样式 */
body,ul,dl,dd,dt,ol,li,p,h1,h2,h3,h4,h5,h6,textarea,form,select,fieldset,table,td,div,input{margin:0;padding:0;-webkit-text-size-adjust:none}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal;}
body>div,form>div{margin:0 auto;}
div{text-align:left;}
a img{border:0;}
table{border-collapse:collapse;border-spacing:0;}
select,input,textarea{font:12px "宋体";outline:none;}
body{color:#666666;text-align:center;font:12px "宋体";background:#F4FCFF;}
ul,ol,li{list-style-type:none;vertical-align:0;}
a{outline-style:none;color:#666666;text-decoration:none;}
a:hover{text-decoration:underline;}
a,area{blr:expression(this.onFocus=this.blur())}
:focus{-moz-outline-style:none;}
.clear{clear:both;height:0;overflow:hidden;visibility:hidden}
.hidden{display:none;}
.block{display:block;}
.fl{float:left;}
.fr{float:right;}
.clearfix:after{clear:both;content:".";height:0;display:block;visibility:hidden;}
.keChgImg{height:272px;width:420px;border:5px solid #CCCCCC;background:#FFF;position:relative;overflow:hidden;margin:0px auto;}
.keImgs li{float:left;height:272px;width:420px;}
.keImgs{height:272px;overflow:hidden;position:absolute;left:0px;top:0px;}
.keImgTitleBg{line-height:28px;background:#FFF;height:28px;width:420px;position:absolute;left:0px;bottom:0px;opacity:0.9;filter:alpha(opacity=90)}
.keImgBtn{float:right;position:absolute;bottom:0px;right:0px;}
.keImgBtn ul li{float:right;height:22px;width:26px;text-align:center;padding-top:6px;position:relative;color:#FFF;cursor:pointer;font:14px "微软雅黑";}
.keCor1{background:#f72e07;}
.keCor2{background:#f75007;}
.keCor3{background:#f77807;}
.keCor4{background:#f7c107;}
.keCor5{background:#f7e907;}
.keImgBtn ul li img{display:none;position:absolute;left:7px;top:0px;}
.keImgBtn ul li.keImgCutLi img{display:block}
.keChgBtnL{position:absolute;left:0px;top:97px;cursor:pointer;z-index:10}
.keChgBtnR{position:absolute;right:0px;top:97px;cursor:pointer;z-index:10}
.keImgTxt{line-height:28px;height:28px;width:290px;position:absolute;left:0px;bottom:0px;font-size:12px;color:#3797BD;text-align:center;overflow:hidden}
.keImgTxt a{color:#000;font-family:Arial;}

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