创想商务网站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" />
<title>创想商务网站jQuery焦点图</title> 
 <link href="css/style.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
<script type="text/javascript">
window.onerror=function(){return true;}
$(document).ready(function(){
	$.focus("#focus001");getBg68();
});	
</script>
</head>
<body>
 <div class="bg68comad">
 <div class="tmb"></div>
 <div class="focus" id="focus001">
		<ul>
        <li style=" background:url(images/ad20139230204442259.jpg) no-repeat 50% top;"><div class="banclj"><a href="#" onFocus="this.blur();" target="_blank">&nbsp;</a></div></li>
        <li style=" background:url(images/ad20139244876627288.jpg) no-repeat 50% top;"><div class="banclj"><a href="#" onFocus="this.blur();" target="_blank">&nbsp;</a></div></li>
        <li style=" background:url(images/ad2013729186963801.jpg) no-repeat 50% top;"><div class="banclj"><a href="#" onFocus="this.blur();" target="_blank">&nbsp;</a></div></li>
		</ul>
	</div>
 </div>
</body>
</html>

JS代码(zzsc.js):

$(function(){
	jQuery.focus = function(slid){
	var sWidth = $(window).width();
	// $(slid).width();
	//获取焦点图的宽度（显示面积） var len = $(slid).find("ul li").length;
	//获取焦点图个数 $(slid).find("ul li").css("width",sWidth);
	var index = 0;
	var picTimer;
	//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮 var btn = "<div class='btnBg'></div><div class='btn'>";
	for (var i = 0;
	i < len;
	i++){
	var ii = i + 1;
	btn += "<span>•</span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
	$(slid).append(btn);
	$(slid).find("div.btnBg").css("opacity",0.5);
	//为小按钮添加鼠标滑入事件，以显示相应的内容 $(slid + " div.btn span").css("opacity",0.4).mouseenter(function(){
	index = $(slid + " .btn span").index(this);
	showPics(index);
}
).eq(0).trigger("mouseenter");
	//上一页、下一页按钮透明度处理 $(slid + " .preNext").css("opacity",0.2).hover(function(){
	$(this).stop(true,false).animate({
	"opacity":"0.5"}
,300);
}
,function(){
	$(this).stop(true,false).animate({
	"opacity":"0.2"}
,300);
}
);
	//上一页按钮 $(slid + " .pre").click(function(){
	index -= 1;
	if (index == -1){
	index = len - 1;
}
showPics(index);
}
);
	//下一页按钮 $(slid + " .next").click(function(){
	index += 1;
	if (index == len){
	index = 0;
}
showPics(index);
}
);
	//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度 $(slid + " ul").css("width",sWidth * (len));
	//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放 $(slid).hover(function(){
	clearInterval(picTimer);
}
,function(){
	picTimer = setInterval(function(){
	showPics(index);
	index++;
	if (index == len){
	index = 0;
}
}
,5000);
	//此4000代表自动播放的间隔，单位：毫秒}
).trigger("mouseleave");
	//显示图片函数，根据接收的index值显示相应的内容 function showPics(index){
	//普通切换 var nowLeft = -index * sWidth;
	//根据index值计算ul元素的left值 $(slid + " ul").stop(true,false).animate({
	"left":nowLeft}
,300);
	//通过animate()调整ul元素滚动到计算出的position $(slid + " .btn span").removeClass("on").eq(index).addClass("on");
	//为当前的按钮切换到选中的效果 $(slid + " .btn span").stop(true,false).animate({
	"opacity":"0.4"}
,300).eq(index).stop(true,false).animate({
	"opacity":"1"}
,300);
	//为当前的按钮切换到选中的效果}
}
;
}
);

CSS代码(style.css):

@charset utf-8;*{margin:0 auto;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{font:12px/1.5em "Microsoft YaHei",Tahoma,Arial,STHeiti,sans-serif;color:#505050;}
html{width:100%;height:100%;}
img{border:none;}
ul,ol,li{list-style:none outside none;padding:0;margin:0;}
a{text-decoration:none;color:#4e555a;}
a:hover{text-decoration:none;}
/*广告*/
.bg68comad,.focus,.focus ul,.focus ul li,.banclj a{height:430px;overflow:hidden;}
.focus{width:100%;overflow:hidden;position:relative;}
.focus ul{position:absolute;list-style:none;margin:0px;padding:0px;}
.focus ul li{float:left;width:100%;overflow:hidden;position:relative;background:#000;list-style:none;margin:0px;padding:0px;}
/*.focus ul li div{position:absolute;overflow:hidden;}
*/
.banclj a{width:800px;display:block;}
.focus .btnBg{position:absolute;width:100%;height:20px;left:0;bottom:0;background:#000;display:none;}
.focus .btn{height:25px;position:absolute;right:10px;bottom:8px;text-align:right;width:550px;display:none;}
.focus .btn span{color:#FFFFFF;cursor:pointer;display:inline-block;font:28px/22px tahoma,Arial,Simsun;height:25px;margin-left:7px;text-align:center;}
.focus .btn span.on{color:#CC0000;cursor:default;}
.focus .preNext{width:45px;height:100px;position:absolute;top:150px;background:url(sprite.png) no-repeat 0 0;cursor:pointer;}
.focus .pre{left:200px;}
.focus .next{right:200px;background-position:right top;}

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