学做网站培训课程介绍

当前位置：

怎么做网站产品列表鼠标滑动切换

网站产品列表鼠标滑动切换效果在很多电子商城网站中都会用到，对于版面尺寸的局限，能过滑动切换版块可以有效的在一个小的版块里显示更多的产品列表。效果如下图：

网站产品列表鼠标滑动切换

下面学做网站论坛介绍一下如何自己做网站时，制作网站产品列表鼠标滑动切换功能的步骤。

方法/步骤

  1. 制作网站产品列表鼠标滑动切换功能，首先需要下载几个JQUERY文件；下载链接: https://pan.baidu.com/s/1JVDssmXQvd9KkYFv7ovQ5w 提取码: gug7；
  2. 将下载下来的JQUERY文件解压出来，将所有文件放在根目录下；并且使用以下的代码来引用这个文件；（注意文件的路径） 
    

    <script type="text/javascript" src="../../jquery1.42.min.js"></script>
    
<script type="text/javascript" src="../../jquery.SuperSlide.2.1.3.js"></script>
    
<script type="text/javascript" src="../../youjian.js"></script>
  3. 在需要显示网站产品列表鼠标滑动切换版块的位置放上以下的HTML代码； 
    

    <div class="wby" style="margin:0 auto">
    
<div class="hd">
    
<ul>
    
<li>疯狂抢购</li>
    
<li>猜您喜欢</li>
    
<li>热卖商品</li>
    
<li>热评商品</li>
    
<li>新品上架</li>
    
</ul>
    
</div>
    
<div class="bd">
    
<ul class="lh">
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/1.1.jpg"></a> </div>
    
<div class="p-name"><a href="#">艾家纺全棉加厚磨毛四件套</a></div>
    
<div class="p-price">京东价：<strong>￥399.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/1.2.jpg"></a> </div>
    
<div class="p-name"><a href="#">优曼真丝提花奢华四件套</a></div>
    
<div class="p-price">京东价：<strong>￥1299.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/1.3.jpg"></a> </div>
    
<div class="p-name"><a href="#">3999！大金1.5匹变频空调更安静！</a></div>
    
<div class="p-price">京东价：<strong>￥3999.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/1.4.jpg"></a> </div>
    
<div class="p-name"><a href="#">爸爸爱喜禾（犬子在，不远游！感动无数读者的电子书</a></div>
    
<div class="p-price">京东价：<strong>￥1.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/1.5.jpg"></a> </div>
    
<div class="p-name"><a href="#">【超值】飞利浦21.5英寸LED背光宽屏液晶显示</a></div>
    
<div class="p-price">京东价：<strong>￥809.00</strong></div>
    
</li>
    
</ul>
    
<ul class="lh">
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/2.1.jpg"></a> </div>
    
<div class="p-name"><a href="#">安钛克（Antec）VP 550P 额定550W 120mm静音风扇 主动PFC 黑化外型设计电源</a></div>
    
<div class="p-price">京东价：<strong>￥399.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/2.2.jpg"></a> </div>
    
<div class="p-name"><a href="#">G.SKILL（芝奇）RipjawsX DDR3 1600 8G(4G×2条)台式机内存(F3-12800CL9D-8GBXL )</a></div>
    
<div class="p-price">京东价：<strong>￥235.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/2.3.jpg"></a> </div>
    
<div class="p-name"><a href="#">希捷（Seagate）1TB ST1000DM003 7200转64M SATA 6Gb/秒 台式机硬盘 建达蓝德 盒装正品</a></div>
    
<div class="p-price">京东价：<strong>￥438.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/2.4.jpg"></a> </div>
    
<div class="p-name"><a href="#">华硕(ASUS)P8Z77-V LK主板(Intel Z77/LGA 1155)</a></div>
    
<div class="p-price">京东价：<strong>￥899.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/2.5.jpg"></a> </div>
    
<div class="p-name"><a href="#">大水牛（BUBALUS）电脑机箱 经典-A1008 灰黑色（不含电源）</a></div>
    
<div class="p-price">京东价：<strong>￥112.00</strong></div>
    
</li>
    
</ul>
    

    
<ul class="lh">
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/3.1.jpg"></a> </div>
    
<div class="p-name"><a href="#">冬季健身TOP1！瑞亚特仰卧板加送俯卧撑架</a></div>
    
<div class="p-price">京东价：<strong>￥187.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/3.2.jpg"></a> </div>
    
<div class="p-name"><a href="#">HTC Z715e!双核！魔音耳机！</a></div>
    
<div class="p-price">京东价：<strong>￥2399.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/3.3.jpg"></a> </div>
    
<div class="p-name"><a href="#">下单返现150元！格力9片电油汀</a></div>
    
<div class="p-price">京东价：<strong>￥449.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/3.4.jpg"></a> </div>
    
<div class="p-name"><a href="#">绿之源净味宝2居室除味超值套装 4000克</a></div>
    
<div class="p-price">京东价：<strong>￥449.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/3.5.jpg"></a> </div>
    
<div class="p-name"><a href="#">宏碁i5 4G GT630M 1G独显 月销量破</a></div>
    
<div class="p-price">京东价：<strong>￥3599.00</strong></div>
    
</li>
    
</ul>
    
<ul class="lh">
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/2.3.jpg"></a> </div>
    
<div class="p-name"><a href="#">希捷（Seagate）1TB ST1000DM003 7200转64M SATA 6Gb/秒 台式机硬盘 建达蓝德 盒装正品</a></div>
    
<div class="p-price">京东价：<strong>￥438.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/2.3.jpg"></a> </div>
    
<div class="p-name"><a href="#">希捷（Seagate）1TB ST1000DM003 7200转64M SATA 6Gb/秒 台式机硬盘 建达蓝德 盒装正品</a></div>
    
<div class="p-price">京东价：<strong>￥438.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/2.3.jpg"></a> </div>
    
<div class="p-name"><a href="#">希捷（Seagate）1TB ST1000DM003 7200转64M SATA 6Gb/秒 台式机硬盘 建达蓝德 盒装正品</a></div>
    
<div class="p-price">京东价：<strong>￥438.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/2.3.jpg"></a> </div>
    
<div class="p-name"><a href="#">希捷（Seagate）1TB ST1000DM003 7200转64M SATA 6Gb/秒 台式机硬盘 建达蓝德 盒装正品</a></div>
    
<div class="p-price">京东价：<strong>￥438.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/2.3.jpg"></a> </div>
    
<div class="p-name"><a href="#">希捷（Seagate）1TB ST1000DM003 7200转64M SATA 6Gb/秒 台式机硬盘 建达蓝德 盒装正品</a></div>
    
<div class="p-price">京东价：<strong>￥438.00</strong></div>
    
</li>
    
</ul>
    
<ul class="lh">
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/2.5.jpg"></a> </div>
    
<div class="p-name"><a href="#">大水牛（BUBALUS）电脑机箱 经典-A1008 灰黑色（不含电源）</a></div>
    
<div class="p-price">京东价：<strong>￥112.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/2.5.jpg"></a> </div>
    
<div class="p-name"><a href="#">大水牛（BUBALUS）电脑机箱 经典-A1008 灰黑色（不含电源）</a></div>
    
<div class="p-price">京东价：<strong>￥112.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/2.5.jpg"></a> </div>
    
<div class="p-name"><a href="#">大水牛（BUBALUS）电脑机箱 经典-A1008 灰黑色（不含电源）</a></div>
    
<div class="p-price">京东价：<strong>￥112.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/2.5.jpg"></a> </div>
    
<div class="p-name"><a href="#">大水牛（BUBALUS）电脑机箱 经典-A1008 灰黑色（不含电源）</a></div>
    
<div class="p-price">京东价：<strong>￥112.00</strong></div>
    
</li>
    
<li>
    
<div class="p-img ld"><a href="#"><img src="images/2.5.jpg"></a> </div>
    
<div class="p-name"><a href="#">大水牛（BUBALUS）电脑机箱 经典-A1008 灰黑色（不含电源）</a></div>
    
<div class="p-price">京东价：<strong>￥112.00</strong></div>
    
</li>
    
</ul>
    
</div>
    
</div>
  4. 在自己网站的CSS文件里放上以下的CSS代码，用于控制样式； 
    

    .wby{ width:890px; border-top:2px solid #c00;   }
    
    .wby .hd{ overflow:hidden; background:url(images/bg.png) 0 -32px #efefef; border-left:1px solid #ddd;  }
    
    .wby .hd li{ position:relative; margin-left:-1px;  height:37px; line-height:37px; text-align:center; width:177px; float:left; border:1px solid #ddd; border-top:0;
    
        font:normal 14px/37px "Microsoft YaHei"; _font-weight:bold; cursor:default; }
    
    .wby .hd li.on{ width:176px; background:#fff; border-bottom:1px solid #fff; color:#c00;  }
    
    .wby .bd{ height:230px; border:1px solid #ddd; border-top:0;  }
    
    .wby .lh{ overflow:hidden;  }
    
    .wby .lh li{ width:156px; padding:0 10px; float:left;    }
    
    .wby .lh li .p-img{ width:130px; height:132px; padding:30px 13px 0 13px; margin:0 auto; text-align:center;   }
    
    .wby .lh li .p-name{ height:36px; line-height:18px;  word-break:break-all; word-wrap: break-word; overflow:hidden;   }
    
    .wby .lh li .p-price{ color:#999;  }
    
    .wby .lh li .p-price strong{ color:#c00; font-size:14px; font-family: verdana; }
  5. 最后在网页的特别底部放上以下的JS代码，来实现网站产品列表鼠标滑动切换效果。 
    

    <script type="text/javascript">jQuery(".wby").slide({delayTime:0 });</script>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • wordpress网站如何制作产品滚动展示 图文教程 (120592 次浏览)
    对于一些公司企业网站，在网站的首页可以通过滚动展示的效果去展示公司的产品，这样可以有效的节省网页的空间，并且能更多的展示产品的图片。对于
  • 有机农产品建网站必需营业执照吗 知识问答 (13650 次浏览)
    我是做有机农产品的，想做一个网站在网上展示自己的农产品，但我现在还没有注册营业执照，听别人说如果要建网站必须要营业执照，这是真的吗？建网
  • Wordpress父分类调用子分类名称和文章列表 图文教程 (116368 次浏览)
    在之前的网站制作文章中讲到了wordpress如何调用当前分类下面的子分类的方法，但这种方法只能调用出子分类的名称，无法去调用出子分类下面的文章列表
  • HTML列表标签（ul标签 ol标签） 视频教程 (1105054 次浏览)
    列表标签有二种，分为有序列表（ol标签）和无序列表（ul标签）。通过列表标签可以排列网站中的很多内容，让用户一目了然。列表标签在做网站和网页
  • DW鼠标经过更换图片变化 视频教程 (1154311 次浏览)
    dreamweaver鼠标经过更换图片特效就是当鼠标经过图像就是当鼠标经过图像时，原图像会变成另外一张图像。鼠标经过图像其实是由两张图像组成的:原始
  • JS制作鼠标经过(点击)时TAB切换菜单（简单好用） 图文教程 (112781 次浏览)
    鼠标经过时TAB菜单切换javascript特效介绍一些大型门户网站（新浪，腾讯，163等）中有很多的栏目，每个网站栏目下有很多的文章，在网站首页会将几个
  • Tab竖向滑动菜单(JS+HTML代码) 图文教程 (18775 次浏览)
    在做网站时，可以使用TAB菜单来展示很多版块的内容，当光标移向某一个选项时，就会显示相应的内容，再移到另一个栏目时就显示另一个版块的内容，这样
  • 如何实现animate动画滑动加载网页 图文教程 (123321 次浏览)
    我们知道，普通的网站打开后，就加载了网页的全部内容。当用户下拉时，显示屏外的部分。现在为了让整个网站更加动感，很多网站都使用了animate动画滑
  • JS+HTML纯代码制作网站切换图 图文教程附件下载 (125296 次浏览)
    可以说任意一个网站都少不了换灯片，在之前的课程里学做网站论坛也列举了很多网站幻灯片代码，通过这些方法，我们可以制作作某一个规定尺寸的换灯片，
  • 如何制作JS+DIV左右滚动的切换图（手动+自动） 图文教程附件下载 (147953 次浏览)
    有些学员在学习制作网站时，想在自己的网站上添加一些左右滚动的切换图效果，这种效果可以实现自动切换和手动左右切换。如果要实现在网站上增加切换图

建站培训课程

最新教程

其它教程