基于js实现全屏焦点图切换特效



50 198 67



特效描述:基于js实现 全屏焦点图 切换特效,基于js实现全屏焦点图切换特效

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>

3. HTML代码

<div style="width:100%;overflow:hidden;margin:0 auto">
<div class="warp"> 
<div class="a_focus_pic"> 
 <ul class="ctr_btn" id="a_focuspic_tabs4304">
    <li class="on">1</li>
    <li class="">2</li>
    <li class="">3</li>
    <li class="">4</li>
    <li class="">5</li>
 </ul> 
<div class="ctrlbg"></div>
<div id="a_focuspic_con4304"> 
<div class="con" style="display: none; visibility: visible; zoom: 1; opacity: 1;"> 
<div class="sub_con"> 
<a style="width:980px;height:350px;top:0px;left:310px;" href="http://51qianduan.com/"><p style="_width:970px;_height:340px;_background:none">51前端</p></a>
<div class="pic"><img src="images/nike1129.jpg"/></div>
</div> 
</div>  
<div class="con" style="display: none; visibility: visible; zoom: 1; opacity: 1;"> 
<div class="sub_con">  
<a style="width:980px;height:350px;top:0px;left:310px;" href="http://51qianduan.com/"><p style="_width:970px;_height:340px;_background:none">51前端</p></a>
<div class="pic"><img src="images/lantivy-010.jpg"/></div>
</div>
</div>
<div class="con" style="display: none; visibility: visible; zoom: 1; opacity: 1;">
<div class="sub_con">
<a style="width:980px;height:350px;top:0px;left:310px;" href="http://51qianduan.com/"><p style="_width:970px;_height:340px;_background:none">51前端</p></a>
<div class="pic"><img src="images/miaosha1218.jpg"/></div>
</div>
</div>
<div class="con" style="display: none; visibility: visible; zoom: 1; opacity: 1;">
<div class="sub_con">
<a style="width:980px;height:350px;top:0px;left:310px;" href="http://51qianduan.com/"><p style="_width:970px;_height:340px;_background:none">51前端</p></a>
<div class="pic"><img src="images/yrf11.jpg"/></div>
</div>
</div>
<div class="con" style="display: block; visibility: visible; zoom: 1; opacity: 1;">
<div class="sub_con">
<a style="width:980px;height:350px;top:0px;left:310px;" href="http://51qianduan.com/"><p style="_width:970px;_height:340px;_background:none">51前端</p></a> 
<div class="pic"><img src="images/converse1.jpg"/></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align:center;clear:both"><br>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
小小的太阳
关注
TA的相关作品 >>更多
热搜关键词


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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