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>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" language="javascript" type="text/javascript"></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 class="kePublic">
<!--效果html开始-->
<div class="mkeFocus">
 <div class="mkeUl">
  <ul>
   <li><a href="#" target="_blank"><img src="images/ban1.jpg" width="588" height="425" /><br />夏季风景摄影作品欣赏</a></li>
   <li><a href="#" target="_blank"><img src="images/ban2.jpg" width="588" height="425" /><br />优秀风景摄影作品</a></li>
   <li><a href="#" target="_blank"><img src="images/ban3.jpg" width="588" height="425" /><br />获奖风景摄影作品</a></li>
   <li><a href="#" target="_blank"><img src="images/ban4.jpg" width="588" height="425" /><br />旅游景点高清风景摄影</a></li>
  </ul>
  <div class="mkeNum"><span class="mke_ns1">1</span><span class="mke_ns2">1</span></div>
  <div class="mkeLbtn"></div>
  <div class="mkeRbtn"></div>
 </div>
</div>
<script language="javascript">
var rnum=$(".mkeUl ul li").size();
var cnum=0;
$(".mke_ns2").html(rnum);
$(".mkeUl ul").width(rnum*588);
$(".mkeRbtn").click(function(){
	cnum++;
	if(cnum>(rnum-1)){
	cnum=0	
	}
	$(".mkeUl ul").animate({"left":-cnum*588},300);
	$(".mke_ns1").html(cnum+1);
});
$(".mkeLbtn").click(function(){
	cnum--;
	if(cnum<0){
	cnum=rnum-1;	
	}
	$(".mkeUl ul").animate({"left":-cnum*588},300);
	$(".mke_ns1").html(cnum+1);
});

function autoPlay(){
  	cnum++;
	if(cnum>(rnum-1)){
	cnum=0	
	}
	$(".mkeUl ul").animate({"left":-cnum*588},300);
	$(".mke_ns1").html(cnum+1);
}
var Timer=setInterval(autoPlay,4000);
$(".mkeFocus").hover(function(){clearInterval(Timer)},function(){Timer=setInterval(autoPlay,4000);});

</script>
<!--效果html结束-->
</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代码(style.css):

@charset "utf-8";/*基本框架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{margin:0 auto}
div{text-align:left}
a img{border:0}
body{color:#333;text-align:center;font:12px "宋体";}
ul,ol,li{list-style-type:none;vertical-align:0}
a{outline-style:none;color:#535353;text-decoration:none}
a:hover{color:#D40000;text-decoration:none}
.button{display:inline-block;zoom:1;*display:inline;vertical-align:baseline;margin:0 2px;outline:none;cursor:pointer;text-align:center;text-decoration:none;font:14px/100% Arial,Helvetica,sans-serif;padding:0.25em 0.6em 0.3em;text-shadow:0 1px 1px rgba(0,0,0,.3);-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2);}
.red{color:#faddde;border:solid 1px #980c10;background:#d81b21;background:-webkit-gradient(linear,left top,left bottom,from(#ed1c24),to(#A51715));background:-moz-linear-gradient(top,#ed1c24,#A51715);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',endColorstr='#aa1317');}
.red:hover{background:#b61318;background:-webkit-gradient(linear,left top,left bottom,from(#c9151b),to(#a11115));background:-moz-linear-gradient(top,#c9151b,#a11115);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',endColorstr='#a11115');color:#fff;}
.red:active{color:#de898c;background:-webkit-gradient(linear,left top,left bottom,from(#aa1317),to(#ed1c24));background:-moz-linear-gradient(top,#aa1317,#ed1c24);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',endColorstr='#ed1c24');}
.cor_bs,.cor_bs:hover{color:#ffffff;}
.keBody{background:url(../images/bodyBg.jpg) repeat #333;}
.keTitle{height:100px;line-height:100px;font-size:30px;font-family:'微软雅黑';color:#FFF;text-align:center;background:url(../images/bodyBg3.jpg) repeat-x bottom left;font-weight:normal}
.kePublic{background:#FFF;padding:50px;}
.keBottom{color:#FFF;padding-top:25px;line-height:28px;text-align:center;font-family:'微软雅黑';background:url(../images/bodyBg2.jpg) repeat-x top left;padding-bottom:25px}
.keTxtP{font-size:16px;color:#ffffff;}
.keUrl{color:#FFF;font-size:30px;}
.keUrl:hover{text-decoration:underline;color:#FFF;}
.mKeBanner,.mKeBanner div{text-align:center;}
/*基本框架CSS结束，应用特效时，以上样式可删除*/
/* 效果CSS开始 */
.mkeFocus{height:494px;width:603px;border:1px solid #C9CACB;border-radius:8px;padding-top:7px;margin:0 auto}
.mkeUl{margin:0px auto;height:486px;width:588px;overflow:hidden;position:relative;}
.mkeUl ul{position:absolute;left:0px;top:0px;height:486px;}
.mkeUl ul li{float:left;text-align:center;font:20px "微软雅黑";}
.mkeUl ul li img{margin-bottom:18px;}
.mkeNum{background:#FFF url(../images/banNum.jpg);height:35px;width:37px;position:absolute;z-index:1;left:13px;bottom:4px;font:14px Arial;}
.mke_ns1{line-height:16px;text-align:center;height:16px;width:16px;position:absolute;left:0px;top:0px;}
.mke_ns2{line-height:16px;color:#9FA0A0;text-align:center;display:block;height:16px;width:16px;position:absolute;right:0px;bottom:0px;}
.mkeLbtn{background:url(../images/kelBtn.png) no-repeat;height:98px;width:36px;position:absolute;left:6px;top:165px;cursor:pointer;z-index:10;}
.mkeRbtn{position:absolute;top:165px;right:6px;background:url(../images/kerBtn.png) no-repeat;height:98px;width:36px;cursor:pointer;z-index:10;}
/* 效果CSS结束 */

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