jQuery焦点图片广告特效代码

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

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

以下是 jQuery焦点图片广告特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="ie=5.0000" http-equiv="x-ua-compatible">
<meta content="text/html; charset=gb2312" http-equiv=content-type>
<link 
rel=stylesheet type=text/css href="images/index_black.css">
<script src="images/jquery.min.js"></script>
<script src="images/index2.js"></script>
<meta name=generator content="mshtml 8.00.6001.18702">
</head>
<body>
<div class=long_block_index>
  <div class=js_imgs_block>
    <div id=slideshow_wrapper>
      <div id=slideshow_photo><a style="z-index: 2" 
href="javascript:void(0)" index="1"><img border=0 
src="images/ad01.jpg"></a> <a style="z-index: 1" 
href="javascript:void(0)" index="2"><img border=0 
src="images/ad02.jpg"></a> <a style="z-index: 1" 
href="javascript:void(0)" target=_blank index="3"><img border=0 
imgsrc="images/ad03.jpg"></a> <a style="z-index: 1" 
href="javascript:void(0)" index="4"><img border=0 
imgsrc="images/ad04.jpg"></a> <a style="z-index: 1" 
href="javascript:void(0)" index="5"><img border=0 
imgsrc="images/ad05.jpg"></a> </div>
      <div id=slideshow_footbar></div>
    </div>
  </div>
</div>
<div class=survey_block_index>
  <div class=title_survey_block_index>
    <ul class=scrollul>
      <a id=m01 class=sd01 href="javascript:void(0)"></a>
      <a id=m02 class=sd02 href="javascript:void(0)"></a>
      <a style="background-image: none" id=m03 class=sd03 href="javascript:void(0)"></a>
    </ul>
  </div>
</div>
</body>
</html>

JS代码(index2.js):

$(function(){
	//生成下部小按钮var length = $('#slideshow_photo a').length;
	for(var i = 0;
	i < length;
	i++){
	$('<div class="slideshow-bt" index="'+(length-i)+'"></div>').appendTo('#slideshow_footbar');
}
$('#slideshow_footbar .slideshow-bt:last').addClass('bt-on');
	$('#slideshow_footbar .slideshow-bt').mouseenter(function(e){
	slideTo(this);
}
);
	var indexAllowAutoSlide = true;
	$('#slideshow_wrapper').mouseenter(function(){
	indexAllowAutoSlide = false;
}
).mouseleave(function(){
	indexAllowAutoSlide = true;
}
);
	//滚动 setInterval(function(){
	if (indexAllowAutoSlide) slideDown();
}
,3000);
}
);
	function slideDown(){
	var currentBt = $('#slideshow_footbar .slideshow-bt.bt-on');
	if (currentBt.length <= 0) return;
	var nxt = currentBt.get(0).previousSibling;
	slideTo(nxt?nxt:$('#slideshow_footbar .slideshow-bt:last').get(0));
}
function slideTo(o){
	if (!o) return;
	var currentIndex = $('#slideshow_footbar .slideshow-bt.bt-on').attr('index'),current = $('#slideshow_photo a[index='+currentIndex+']');
	var nxt = $('#slideshow_photo a[index='+$(o).attr('index')+']');
	if (currentIndex == $(o).attr('index')) return;
	if (nxt.find('img[imgsrc]').length > 0){
	var img =nxt.find('img[imgsrc]');
	img.attr('src',img.attr('imgsrc')).removeAttr('imgsrc');
}
$('#slideshow_footbar .slideshow-bt.bt-on').removeClass('bt-on');
	$(o).addClass('bt-on');
	nxt.css('z-index',2);
	current.css('z-index',3).fadeOut(500,function(){
	$(this).css('z-index','1').show();
	var img = nxt.next('a').find('img[imgsrc]');
	if (img.length > 0){
	img.attr('src',img.attr('imgsrc')).removeAttr('imgsrc');
}
}
);
}
//slideshow end//---------------------------------------------------------function get_live_status(){
	/* 首页直播设置 */
var d = new Date();
	//alert(d.getHours());
	if(d.getHours() <19) return;
	// 到19点才计时get_live_status_do();
	interval = window.setInterval(function(){
	get_live_status_do();
}
,60000);
	//window.clearInterval(interval);
}
function get_live_status_do(){
	$.post("/ajax/home_page.php?action=index_live",{
	key:'v'}
,function(data){
	//alert(data);
	if(data !="" ){
	var pos=data.indexOf('@');
	var program_id=data.substring(0,pos);
	var tmp=data.substr(pos+1);
	var ps=tmp.indexOf('@');
	var img_url=tmp.substring(0,ps);
	var title=tmp.substr(ps+1);
	$('#lmhd_live').show();
	//显示直播div$('#lmhd_default').hide();
	//隐藏在路上首图//$('#live_title').text(title);
	$('#lmhd_live_url_1').attr('href','/live/'+program_id);
	//直播链接$('#lmhd_live_url_2').attr('href','/live/'+program_id);
	$('#lmhd_live_url_3').attr('href','/live/'+program_id);
	$('#lmhd_live_src').attr('src','/'+img_url);
	//图片链接}
else{
	$('#lmhd_live').hide();
	$('#lmhd_default').show();
}
}
);
}
//--------------------------------------------------------------------

CSS代码(index_black.css):

#slideshow_wrapper{POSITION:relative;PADDING-BOTTOM:0px;BACKGROUND-COLOR:#121212;PADDING-LEFT:0px;WIDTH:978px;PADDING-RIGHT:0px;HEIGHT:286px;OVERFLOW:hidden;PADDING-TOP:0px}
#slideshow_footbar{Z-INDEX:5;POSITION:absolute;FILTER:progid:DXImageTransform.Microsoft.gradient(startColorstr=#32000000,endColorstr=#32000000);WIDTH:100%;BOTTOM:0px;HEIGHT:30px}
#slideshow_photo{POSITION:absolute;WIDTH:100%;HEIGHT:100%;CURSOR:pointer}
#slideshow_photo A{Z-INDEX:1;BORDER-BOTTOM:0px;POSITION:absolute;BORDER-LEFT:0px;MARGIN:0px;DISPLAY:block;BORDER-TOP:0px;TOP:0px;BORDER-RIGHT:0px;LEFT:0px}
#slideshow_footbar .slideshow-bt{BACKGROUND-COLOR:#d2d3d4;MARGIN:10px 10px 0px 0px;WIDTH:10px;DISPLAY:inline;FLOAT:right;HEIGHT:10px;FONT-SIZE:0px}
#slideshow_footbar .bt-on{BACKGROUND-COLOR:#30b1eb}

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