京探网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=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为京探网jquery五屏焦点图" />
<title>京探网jquery五屏焦点图</title>
<LINK rel=stylesheet type=text/css href="css/css.css">
<SCRIPT src="js/png.js"></SCRIPT>
<SCRIPT src="js/jquery.js"></SCRIPT>
<SCRIPT src="js/loopedslider.min.js"></SCRIPT>
<SCRIPT src="js/focus.js"></SCRIPT>
</head>

<body>

<div class="lanrentukubox">
	<!--焦点图-->
	<DIV id=newsSlider>
	<DIV class=container>
	<UL class=slides>
	  <LI><A href="#" 
	  target=_blank><IMG src="images/01.jpg"></A> 
	  <LI><A href="#" 
	  target=_blank><IMG src="images/02.jpg"></A> 
	  <LI><A href="#" 
	  target=_blank><IMG src="images/03.jpg"></A> 
	  <LI><A href="#" 
	  target=_blank><IMG src="images/04.jpg"></A> 
	  <LI><A href="#" 
	  target=_blank><IMG src="images/05.jpg"></A> </LI></UL></DIV>
	<DIV class=validate_Slider></DIV>
	<UL class=pagination>
	  <LI><A href="#">1</A> </LI>
	  <LI><A href="#">2</A> </LI>
	  <LI><A href="#">3</A> </LI>
	  <LI><A href="#">4</A> </LI>
	  <LI><A href="#">5</A> </LI></UL></DIV>
	<!--焦点图-->
</div>
</body>
</html>

JS代码(focus.js):

$(function(){
	$('#newsSlider').loopedSlider({
	//4��autoStart:4000}
);
	$('.validate_Slider').loopedSlider({
	autoStart:4000}
);
}
);

JS代码(png.js):

function alphaBackgrounds(){
	var rslt = navigator.appVersion.match(/MSIE (d+.d+)/,'');
	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
	for (i=0;
	i<document.all.length;
	i++){
	var bg = document.all[i].currentStyle.backgroundImage;
	if (bg){
	if (bg.match(/.png/i) != null){
	var mypng = bg.substring(5,bg.length-2);
	//alert(mypng);
	document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"',sizingMethod='crop')";
	document.all[i].style.backgroundImage = "url('')";
	//alert(document.all[i].style.filter);
}
}
}
}
var arVersion = navigator.appVersion.split("MSIE")var version = parseFloat(arVersion[1]);
	if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent){
	if (version == 6){
	window.attachEvent("onload",alphaBackgrounds);
}
}
function correctPNG(){
	for(var i=0;
	i<document.images.length;
	i++){
	var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3,imgName.length) == "PNG"){
	var imgID = (img.id) ? "id='" + img.id + "' ":"" var imgClass = (img.className) ? "class='" + img.className + "' ":"" var imgTitle = (img.title) ? "title='" + img.title + "' ":"title='" + img.alt + "' " var imgStyle = "display:inline-block;
	" + img.style.cssText if (img.align == "left") imgStyle = "float:left;
	" + imgStyle if (img.align == "right") imgStyle = "float:right;
	" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;
	" + imgStyle var strNewHTML = "<span "+ imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px;
	height:" + img.height + "px;
	" + imgStyle + ";
	" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + img.src + "',sizingMethod='scale');
	\"></span>" img.outerHTML = strNewHTML i = i-1}
}
}
if (version == 6){
	window.attachEvent("onload",correctPNG);
}

CSS代码(css.css):

IMG{BORDER-RIGHT-WIDTH:0px;BORDER-TOP-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;BORDER-LEFT-WIDTH:0px}
.lanrentukubox{margin:0px auto;WIDTH:416px;HEIGHT:260px;}
#newsSlider{POSITION:absolute;WIDTH:416px;HEIGHT:243px;CLEAR:both;}
* HTML #newsSlider{POSITION:absolute;WIDTH:416px;HEIGHT:243px;CLEAR:both;}
#newsSlider .container{POSITION:relative;MARGIN-TOP:15px;WIDTH:416px;HEIGHT:243px;OVERFLOW:hidden}
#newsSlider .container IMG{WIDTH:416px;HEIGHT:243px}
#newsSlider DIV.slides{POSITION:absolute;TOP:0px;LEFT:0px}
#newsSlider UL.slides{POSITION:absolute;PADDING-BOTTOM:0px;LIST-STYLE-TYPE:none;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;TOP:0px;PADDING-TOP:0px;LEFT:0px}
#newsSlider UL.slides DL{WIDTH:584px;FLOAT:left;HEIGHT:43px;PADDING-TOP:3px}
#newsSlider UL.slides DT{LINE-HEIGHT:18px;WIDTH:400px;FLOAT:left;HEIGHT:39px;COLOR:#777777;MARGIN-LEFT:3px}
#newsSlider UL.slides DT A{COLOR:#777777;FONT-SIZE:12px}
#newsSlider UL.slides DD{TEXT-ALIGN:center;LINE-HEIGHT:18px;WIDTH:180px;FONT-FAMILY:"����";FLOAT:left;HEIGHT:39px;COLOR:#333333;FONT-SIZE:16px}
#newsSlider UL.slides DD A{FONT-FAMILY:"����";COLOR:#333;FONT-SIZE:16px;TEXT-DECORATION:none}
#newsSlider UL.slides DD .more{MARGIN-TOP:-22px;WIDTH:54px;FLOAT:right;HEIGHT:16px;COLOR:#2a609f;FONT-SIZE:12px;OVERFLOW:hidden}
#newsSlider UL.slides DD .more A{COLOR:#2a609f}
#newsSlider DIV.slides DIV{POSITION:absolute;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;WIDTH:584px;PADDING-RIGHT:0px;DISPLAY:none;TOP:0px;PADDING-TOP:0px}
#newsSlider #loopedSlider{POSITION:relative;MARGIN:0px auto;WIDTH:416px;CLEAR:both}
#newsSlider UL.pagination{POSITION:absolute;BOTTOM:-40px;RIGHT:-5px;_bottom:-25px}
#newsSlider UL.pagination LI{TEXT-ALIGN:center;WIDTH:34px;FLOAT:left;HEIGHT:60px;MARGIN-RIGHT:5px}
#newsSlider UL.pagination LI A{TEXT-ALIGN:center;LINE-HEIGHT:20px;WIDTH:34px;FONT-FAMILY:"����";BACKGROUND:url(../images/lanrentuku-blue.png) no-repeat right bottom;FLOAT:left;HEIGHT:22px;COLOR:#000000;FONT-SIZE:12px;FONT-WEIGHT:normal;MARGIN-RIGHT:2px;TEXT-DECORATION:none;PADDING-TOP:13px}
#newsSlider UL.pagination LI.active A{TEXT-ALIGN:center;LINE-HEIGHT:20px;WIDTH:34px;FONT-FAMILY:"����";BACKGROUND:url(../images/lanrentuku-green.png) no-repeat right bottom;FLOAT:left;HEIGHT:30px;COLOR:#ffffff;FONT-SIZE:12px;FONT-WEIGHT:normal;MARGIN-RIGHT:2px;TEXT-DECORATION:none;PADDING-TOP:5px}
UL.pagination LI A:hover{TEXT-ALIGN:left;LINE-HEIGHT:20px;WIDTH:34px;FONT-FAMILY:"����";BACKGROUND:url(../images/lanrentuku-green.png) no-repeat right bottom;FLOAT:left;HEIGHT:35px;COLOR:#ffffff;FONT-SIZE:12px;FONT-WEIGHT:normal;MARGIN-RIGHT:2px;TEXT-DECORATION:none}
* HTML #newsSlider UL.pagination LI A{TEXT-ALIGN:center;LINE-HEIGHT:20px;WIDTH:34px;FONT-FAMILY:"����";BACKGROUND:url(../images/lanrentuku-blue.gif) no-repeat right bottom;FLOAT:left;HEIGHT:22px;COLOR:#000000;FONT-SIZE:12px;FONT-WEIGHT:normal;MARGIN-RIGHT:2px;TEXT-DECORATION:none;PADDING-TOP:13px}
* HTML #newsSlider UL.pagination LI.active A{TEXT-ALIGN:center;LINE-HEIGHT:20px;WIDTH:34px;FONT-FAMILY:"����";BACKGROUND:url(../images/lanrentuku-green.gif) no-repeat right bottom;FLOAT:left;HEIGHT:30px;COLOR:#ffffff;FONT-SIZE:12px;FONT-WEIGHT:normal;MARGIN-RIGHT:2px;TEXT-DECORATION:none;PADDING-TOP:5px}
* HTML UL.pagination LI A:hover{TEXT-ALIGN:left;LINE-HEIGHT:20px;WIDTH:34px;FONT-FAMILY:"����";BACKGROUND:url(../images/lanrentuku-green.gif) no-repeat right bottom;FLOAT:left;HEIGHT:35px;COLOR:#ffffff;FONT-SIZE:12px;FONT-WEIGHT:normal;MARGIN-RIGHT:2px;TEXT-DECORATION:none}
/* ����������������ͼ�� www.lanrentuku.com */

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