<!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全屏广告图片焦点图DEMO演示</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="banner-box">
<div class="bd">
<ul>
<li style="background:#F3E5D8;">
<div class="m-width">
<a href="javascript:void(0);"><img src="images/img1.jpg" /></a>
</div>
</li>
<li style="background:#B01415">
<div class="m-width">
<a href="javascript:void(0);"><img src="images/img2.jpg" /></a>
</div>
</li>
<li style="background:#C49803;">
<div class="m-width">
<a href="javascript:void(0);"><img src="images/img3.jpg" /></a>
</div>
</li>
<li style="background:#FDFDF5">
<div class="m-width">
<a href="javascript:void(0);"><img src="images/img4.jpg" /></a>
</div>
</li>
</ul>
</div>
<div class="banner-btn">
<a class="prev" href="javascript:void(0);"></a>
<a class="next" href="javascript:void(0);"></a>
<div class="hd"><ul></ul></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".prev,.next").hover(function(){
$(this).stop(true,false).fadeTo("show",0.9);
},function(){
$(this).stop(true,false).fadeTo("show",0.4);
});
$(".banner-box").slide({
titCell:".hd ul",
mainCell:".bd ul",
effect:"fold",
interTime:3500,
delayTime:500,
autoPlay:true,
autoPage:true,
trigger:"click"
});
});
</script>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div><br />
</body>
</html>
基于jQuery实现的带左右按钮切换的全屏广告图片焦点图特效源码.zip
版权申诉
44 浏览量
2022-11-10
00:28:27
上传
评论
收藏 304KB ZIP 举报
毕业_设计
- 粉丝: 1936
- 资源: 1万+