利用jQuery实现书签风格焦点图切换



65 258 87



特效描述:利用jQuery实现 书签风格 焦点图切换,利用jQuery实现书签风格焦点图切换

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.pack.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>

3. HTML代码

<div class="msn-focus" style="margin:30px auto">
  <div class="hd">
    <ul>
      <li class=" "><a target="_blank" href="http://51qianduan.com/">资讯</a></li>
      <li class=" "><a target="_blank" href="http://51qianduan.com/">环球</a></li>
      <li class=" "><a target="_blank" href="http://51qianduan.com/">汽车</a></li>
      <li class=" "><a target="_blank" href="http://51qianduan.com/">娱乐</a></li>
      <li class="on"><a target="_blank" href="http://51qianduan.com/">奢品</a></li>
      <li><a target="_blank" href="http://51qianduan.com/">历史</a></li>
    </ul>
  </div>
  <div class="bd">
    <ul>
      <li style="display: none;"><a href="http://51qianduan.com/" target="_blank"><img src="photo/1.jpg"></a>
        <p> <i> </i> <a href="http://51qianduan.com/"> 莫言造访瑞典一中学展示书法技艺 </a> </p>
      </li>
      <li style="display: none;"><a href="http://51qianduan.com/" target="_blank"><img src="photo/2.jpg"></a>
        <p> <i> </i> <a href="http://51qianduan.com/"> 美高中跳“江南style”被称最烂 </a> </p>
      </li>
      <li style="display: none;"><a href="http://51qianduan.com/" target="_blank"><img src="photo/3.jpg"></a>
        <p> <i> </i> <a href="http://51qianduan.com/"> 本周上市新车一览 雪铁龙C4 L领衔 </a> </p>
      </li>
      <li style="display: none;"><a href="http://51qianduan.com/" target="_blank"><img src="photo/4.jpg"></a>
        <p> <i> </i> <a href="http://51qianduan.com/"> 盘点2012年电影激情戏 杨幂半裸舒淇尺度大 </a> </p>
      </li>
      <li style="display: list-item;"><a href="http://51qianduan.com/" target="_blank"><img src="photo/5.jpg"></a>
        <p> <i> </i> <a href="http://51qianduan.com/"> 百年品牌记:中国老字号如何重生? </a> </p>
      </li>
      <li style="display: none;"><a href="http://51qianduan.com/" target="_blank"><img src="photo/6.jpg"></a>
        <p> <i> </i> <a href="http://51qianduan.com/"> 我从哪里来?图解史上各国性教育尺度 </a> </p>
      </li>
    </ul>
    <a class="prev" href="javascript:void(0)"></a><a class="next" href="javascript:void(0)"></a></div>
</div>
<script type="text/javascript">jQuery(".msn-focus .bd").hover(function(){ jQuery(this).addClass("bdOn") },function(){ jQuery(this).removeClass("bdOn") });jQuery(".msn-focus").slide({ mainCell:".bd ul",delayTime:500,triggerTime:0,autoPlay:true });</script>
<div style="text-align:center;clear:both">
</div>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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