基于jQuery实现门户网站焦点图切换



65 259 87



特效描述:基于jQuery实现 门户网站 焦点图切换,基于jQuery实现门户网站焦点图切换

代码结构

1. 引入CSS

<link href="css/zzsc.css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>

3. HTML代码

<div class="focusBox" style="margin:30px auto">
<ul class="pic" style="position: relative; width: 320px; height: 240px;">
<li style="position: absolute; width: 320px; left: 0px; top: 0px; display: none;"><a href="http://51qianduan.com/" target="_blank"><img src="images/1.jpg"></a></li>
<li style="position: absolute; width: 320px; left: 0px; top: 0px; display: none;"><a href="http://51qianduan.com/" target="_blank"><img src="images/2.jpg"></a></li>
<li style="position: absolute; width: 320px; left: 0px; top: 0px; display: list-item;"><a href="http://51qianduan.com/" target="_blank"><img src="images/3.jpg"></a></li>
<li style="position: absolute; width: 320px; left: 0px; top: 0px; display: none;"><a href="http://51qianduan.com/" target="_blank"><img src="images/4.jpg"></a></li>
</ul>
<div class="txt-bg"></div>
<div class="txt">
<ul>
<li style="bottom: -36px;"><a href="http://51qianduan.com/">美女福利图Quiet</a></li>
<li style="bottom: -36px;"><a href="http://51qianduan.com/">美女福利图DoubleLi</a></li>
<li style="bottom: 0px;"><a href="http://51qianduan.com/">美女福利图Quiet</a></li>
<li style="bottom: -36px;"><a href="http://51qianduan.com/">美女福利图Quiet</a></li>
</ul></div>
<ul class="num">
<li class=" "><a>1</a><span></span></li>
<li class=" "><a>2</a><span></span></li>
<li class="  on"><a>3</a><span></span></li>
<li class=" "><a>4</a><span></span></li>
</ul>
</div>
<script type="text/javascript">
jQuery(".focusBox").slide({ titCell:".num li", mainCell:".pic",effect:"fold", autoPlay:true,trigger:"click",startFun:function(i){jQuery(".focusBox .txt li").eq(i).animate({"bottom":0}).siblings().animate({"bottom":-36});}});
</script>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 导航切换 图片淡出淡进 带标题的焦点图 文字淡出淡进 带缩略图的幻灯片 带简介的焦点图 图片切换 图片轮播 文字切换 自动滚动图片轮播 背景切换 马赛克幻灯片 手风琴 全屏焦点图 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 渐隐切换 淡出淡入淡进 焦点图幻灯片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到