简单带标题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>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/omHDP.js" language="javascript"></script>
<script>
$(function(){
	$(".hdp_container").OM_HDP({delay:300,time:5000,title:1,type:2});
	/*引用时，.hdp_container容器的宽度和高度即为幻灯片图片的宽和高，参数【delay:动画效果持续时间,time:图片切换时间,title:显示文字介绍--1不显示--0，type;0为淡入淡出，1为左右滑动】*/
})</script>
<style>
.hdp_container{width:720px;height:210px;margin:0px auto;position:relative;font-size:12px;overflow:hidden;}
</style>
</head>
<body>
<div class="hdp_container">
	<a title="标题一" href="#"><img src="images/1.jpg"></a>
    <a title="标题二" href="#"><img src="images/2.jpg"></a>
    <a title="标题三" href="#"><img src="images/3.jpg"></a>
</div>
</body>
</html>

JS代码(omHDP.js):

/* * ˵����$(".hdp_container").OM_HDP({
	delay:300,time:5000,title:1,type:2}
);
	����ʱ��.hdp_container�����Ŀ�Ⱥ͸߶ȼ�Ϊ�õ�ƬͼƬ�Ŀ�͸ߣ�������delay:����Ч������ʱ��(����),time:ͼƬ�л�ʱ��(����),title:��ʾ���ֽ���--1����ʾ--0��type;
	0Ϊ���뵭����1Ϊ���һ����� * ���ֽ���ֱ�Ӷ�ȡ����ͼƬ���ӵ�titleֵ�� */
(function(e){
	e.fn.OM_HDP=function(t){
	function v(){
	u==e("li",s).length-1?e("li:eq(0)",s).mouseover():e("li",s).eq(u).next("li").mouseover()}
var n={
	delay:0,time:0,title:0,type:0}
,r=e.extend({
}
,n,t),s=e(this),o="",u=0,a=s.css("width"),f=s.css("height");
	r.type==0&&(l=e("img",s).length,e("img",s).css({
	width:a,height:f,left:"0px",top:"0px",border:"none",display:"none",position:"absolute"}
));
	if(r.type==1){
	e("img",s).css({
	width:a,height:f,"float":"left",display:"block",border:"none"}
),_content=s.html(),s.html("<div class='pic_scroll'><div class='cont con0'>"+_content+"</div><div class='cont'>"+_content+"</div></div>");
	var l=e("img",s).length/2,c=parseInt(a)*l,p=0;
	e(".pic_scroll").css({
	width:c*2+"px",height:f,position:"relative"}
),e(".cont").css({
	width:c+"px",height:f,"float":"left"}
)}
if(r.type==2){
	e("img",s).css({
	width:a,height:f,display:"block",border:"none"}
),_content=s.html(),s.html("<div class='pic_scroll'><div class='cont con0'>"+_content+"</div><div class='cont'>"+_content+"</div></div>");
	var l=e("img",s).length/2,d=parseInt(f)*l,p=0;
	e(".pic_scroll").css({
	width:a,height:d*2+"px",position:"relative"}
),e(".cont").css({
	width:a,height:d+"px"}
)}
s.append("<ul></ul>");
	for(i=1;
	i<l+1;
	i++)o+="<li>"+i+"</li>";
	e("ul",s).html(o),e("ul",s).css({
	position:"absolute",padding:"0px",margin:"0px",bottom:"7px",right:"15px","z-index":999}
),e("li",s).css({
	"float":"left",listStyleType:"none",color:"#FCD998",display:"inline",textAlign:"center",width:"16px",height:"16px",marginTop:"0px",marginRight:"3px",marginBottom:"0px",marginLeft:"3px",lineHeight:"16px",backgroundColor:"#333333",cursor:"pointer"}
),r.title==1&&(s.append("<div class='hdp_bg'></div>"),s.append("<div class='hdp_title'></div>"),e(".hdp_bg").css({
	position:"absolute",width:s.css("width"),height:"30px",bottom:"0px",left:"0px",backgroundColor:"#000000",opacity:.5,"z-index":50}
),e(".hdp_title").css({
	position:"absolute",width:parseInt(s.css("width"))-e("ul",s).width()-80+"px",height:"30px",bottom:"0px",left:"0px",lineHeight:"30px",paddingLeft:"20px",overflow:"hidden",color:"#FCD998","z-index":50}
)),e("li",s).live("mouseover",function(){
	u=e("li",s).index(this),a_curr=e(".con0").find("a").eq(u),r.type==0&&(a_curr=e("a",s).eq(u),e("img",s).is(":animated")&&e("img",s).stop(),a_curr.find("img").fadeIn(r.delay),a_curr.siblings("a").find("img").fadeOut(r.delay)),r.type==1&&(e(".pic_scroll").is(":animated")&&(abs(parseInt(e(".pic_scroll").css("left"))%parseInt(a))>=parseInt(a)/2?e(".pic_scroll").animate({
	left:"-="+parseInt(a)-abs(parseInt(e(".pic_scroll").css("left"))%parseInt(a))}
,r.delay):e(".pic_scroll").animate({
	left:"-="+parseInt(a)+abs(parseInt(e(".pic_scroll").css("left"))%parseInt(a))}
,r.delay),e(".pic_scroll").stop()),e(".pic_scroll").css("left")=="-"+c+"px"&&e(".pic_scroll").css("left","0px"),e(".pic_scroll").animate({
	left:"-="+parseInt(a)*(u-p)}
,r.delay),p=u),r.type==2&&(e(".pic_scroll").is(":animated")&&(abs(parseInt(e(".pic_scroll").css("top"))%parseInt(f))>=parseInt(f)/2?e(".pic_scroll").animate({
	top:"-="+parseInt(f)-abs(parseInt(e(".pic_scroll").css("top"))%parseInt(f))}
,r.delay):e(".pic_scroll").animate({
	top:"-="+parseInt(f)+abs(parseInt(e(".pic_scroll").css("top"))%parseInt(f))}
,r.delay),e(".pic_scroll").stop()),e(".pic_scroll").css("top")=="-"+d+"px"&&e(".pic_scroll").css("top","0px"),e(".pic_scroll").animate({
	top:"-="+parseInt(f)*(u-p)}
,r.delay),p=u),e(this).addClass("icon_hover").css({
	color:"#666666",backgroundColor:"#FCD998",fontWeight:"bold"}
).siblings().removeClass("icon_hover").css({
	color:"#FCD998",backgroundColor:"#333333",fontWeight:"bold"}
),r.title==1&&(atitle=a_curr.attr("title")=="undefined"?"":a_curr.attr("title"),e(".hdp_title").text(atitle)),clearInterval(h),h=setInterval(v,r.time)}
),e("img",s).hover(function(){
	clearInterval(h)}
,function(){
	h=setInterval(v,r.time)}
),h=setInterval(v,r.time),e("li:eq(0)",s).mouseover()}
}
)(jQuery)

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