jquery仿京东商城商品切换选项卡特效

置顶免费 4  1189

张世烩 VIP3 2017-03-02

下载所需金币：0 收藏

简要教程

这是一款使用SuperSlide.js来制作的仿京东商城商品切换选项卡jquery特效。该选项卡特效兼容ie8浏览器，适合用于制作各种商品切换展示效果，非常实用。

仿京东商城商品切换选项卡jquery特效

使用方法

在页面中引入样式文件style.css和jquery.min.js、jquery.SuperSlide.js文件。

<link rel="stylesheet" href="style.css">
<script src="jquery.min.js">script>             
<script src="jquery.SuperSlide.js">script>             

HTML结构

该商品切换选项卡的基本HTML结构如下：

<div class="tabox">
      <div class="hd">
        <ul>
          <li class=" ">疯狂抢购li>
          <li class=" ">猜您喜欢li>
          <li class=" ">热卖商品li>
          <li class=" ">热评商品li>
          <li class="on">新品上架li>ul>
      div>
      <div class="bd">
        <ul class="lh" style="display: none;">
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/1.1.jpg">a>
            div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">艾家纺全棉加厚磨毛四件套a>div>
            <div class="p-price">京东价：
              <strong>￥399.00strong>div>
          li>
          ......
        ul>
        <ul class="lh" style="display: none;">
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.1.jpg">a>
            div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">安钛克（Antec） 黑化外型设计电源a>div>
            <div class="p-price">京东价：
              <strong>￥399.00strong>div>
          li>
          ......
        ul>
        <ul class="lh" style="display: none;">
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/3.1.jpg">a>
            div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">冬季健身TOP1！瑞亚特仰卧板加送俯卧撑架a>div>
            <div class="p-price">京东价：
              <strong>￥187.00strong>div>
          li>
          ......
        ul>
        <ul class="lh" style="display: none;">
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.3.jpg">a>
            div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">希捷（Seagate）1TB a>div>
            <div class="p-price">京东价：
              <strong>￥438.00strong>div>
          li>
          ......
        ul>
        <ul class="lh" style="display: block;">
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.5.jpg">a>
            div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">大水牛（BUBALUS）电脑机箱a>div>
            <div class="p-price">京东价：
              <strong>￥112.00strong>div>
          li>
          ......
        ul>
      div>
div>

初始化创建

在页面DOM元素加载完毕之后，通过slide()方法来初始化该商品切换选项卡插件：

jQuery(".tabox").slide({delayTime: 0});   

没有任何评论

张世烩 (白银)

拥有的金币数 1152金币 (29)粉丝 (96)源码

一切皆有可能！！！！

加入微信群，不定期分享源码和经验

签到活跃榜连续签到送额外金币

所需金币：0

赚金币方法：

1. 注册就送5金币，发布源码，供别人下载赚取金币
2. 发布博客，发布问答，回复其他用户赚取金币
3. 自动充值或联系QQ1367251002客服人工充值

常用软件

jdk1.7

tomcat8.0

mysql

Navicat

Git

VsCode

TeamViewer