jQuery游戏网站人物图片切换代码



99 392 131



特效描述:jQuery游戏网站 人物图片切换,jQuery全屏的游戏人物图片淡出淡进滑动切换效果,适用于游戏网站图片切换代码。

代码结构

1. 引入JS

<script src="js/jquery.min.js"></script>

2. HTML代码

<div class="container">
  <div class="nav">
    <ul>
      <li class="item t1 on">
        <i></i>
        <em></em>
      </li>
      <li class="item t2">
        <i></i>
        <em></em>
      </li>
      <li class="item t3">
        <i></i>
        <em></em>
      </li>
      <li class="item t4">
        <i></i>
        <em></em>
      </li>
    </ul>
  </div>
  <div class="box">
    <div class="p p1 show">
      <span class="name"></span>
      <img src="./images/p1.png" alt="">
    </div>
    <div class="p p2">
      <span class="name"></span>
      <img src="./images/p2.png" alt="">
    </div>
    <div class="p p3">
      <span class="name"></span>
      <img src="./images/p3.png" alt="">
    </div>
    <div class="p p4">
      <span class="name"></span>
      <img src="./images/p4.png" alt="">
    </div>
  </div>
</div>
<script>
  $(function () {
    $('.nav li').on('click', function () {
      $(this).addClass('on').siblings().removeClass('on');
      $('.p').eq($(this).index()).addClass('show').siblings().removeClass('show');
    })
  })
</script>



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


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 滑动选项卡 滑动切换 滚动切换 滚动条切换 自动滚动图片轮播 叠加浮动层 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 层叠叠加 叠加层叠 层叠 叠加 加载更多 渐隐切换 淡出淡进 淡出 淡进 图片叠加 图片层叠 图片淡出淡进 图片淡出 图片淡进 滚动切换 滚动条切换 图片切换 图片选项卡 图标选项卡 选项卡自动切换 视频切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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