jquery实现淘宝动态图展示商品

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    * {

      margin: ;

      padding: ;

      font-size: 12px;

    }

    ul {

      list-style: none;

    }

    a {

      text-decoration: none;

    }

    .wrapper {

      width: 298px;

      height: 248px;

      margin: 100px auto ;

      border: 1px solid pink;

      overflow: hidden;

    }

    #left, #center, #right {

      float: left;

    }

    #left li, #right li {

      background: url(images/lili.jpg) repeat-x;

    }

    #left li a, #right li a {

      display: block;

      width: 48px;

      height: 27px;

      border-bottom: 1px solid pink;

      line-height: 27px;

      text-align: center;

      color: black;

    }

    #left li a:hover, #right li a:hover {

      background-image: url(images/abg.gif);

    }

    #center {

      border-left: 1px solid pink;

      border-right: 1px solid pink;

    }

  </style>

  <script src="../jquery-1.12.4.js"></script>

  <script>

   $(function () {

     $("#left>li").mouseenter(function () {

       $("#center>li:eq("+$(this).index()+")").show().siblings().hide();

     })

     $("#right>li").mouseenter(function () {

       var index=$(this).index()+;

       $("#center>li").eq(index).show().siblings().hide();

     })

   })

  </script>

</head>

<body>

<div class="wrapper">

  <ul id="left">

    <li><a href="#">女靴</a></li>

    <li><a href="#">雪地靴</a></li>

    <li><a href="#">冬裙</a></li>

    <li><a href="#">呢大衣</a></li>

    <li><a href="#">毛衣</a></li>

    <li><a href="#">棉服</a></li>

    <li><a href="#">女裤</a></li>

    <li><a href="#">羽绒服</a></li>

    <li><a href="#">牛仔裤</a></li>

  </ul>

  <ul id="center">

    <li><a href="#"><img src="data:images/女靴.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/雪地靴.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/冬裙.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/呢大衣.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/毛衣.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/棉服.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/女裤.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/羽绒服.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/牛仔裤.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/女包.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/男靴.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/登山鞋.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/皮带.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/围巾.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/皮衣.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/男毛衣.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/男棉服.jpg" width="" height=""/></a></li>

    <li><a href="#"><img src="data:images/男包.jpg" width="" height=""/></a></li>

  </ul>

  <ul id="right">

    <li><a href="#">女包</a></li>

    <li><a href="#">男靴</a></li>

    <li><a href="#">登山鞋</a></li>

    <li><a href="#">皮带</a></li>

    <li><a href="#">围巾</a></li>

    <li><a href="#">皮衣</a></li>

    <li><a href="#">男毛衣</a></li>

    <li><a href="#">男棉服</a></li>

    <li><a href="#">男包</a></li>

  </ul>

</div>

</body>

</html>

在没有加js之前，是不会具有动态展示

$(function () {

     $("#left>li").mouseenter(function () {

       $("#center>li:eq("+$(this).index()+")").show().siblings().hide();

     })

     $("#right>li").mouseenter(function () {

       var index=$(this).index()+;

       $("#center>li").eq(index).show().siblings().hide();

     })

   })

js解读：

 $("#left>li")获取#left类下的li

$("#center>li:eq("+$(this).index()+")") 获取中间部分跟现在索引位置相同的的地方

jquery实现淘宝动态图展示商品的更多相关文章

jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
jQuery模仿淘宝商品评价
最近做项目要做个商品评价的功能,我直接就跑到淘宝那里去研究了,可看着晕晕的,还不知道他是怎么做的,于是把图抠了下来,自己写了一个,接下来就展示一下我是怎么做的,大家有不同的实现方法可要记得分享一下呀. ...
jquery模拟淘宝购物车
今天要实现的一个功能页面就是利用jquery代码模拟一个淘宝网的购物车结算页面总体页面效果如图: 首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中“全选”复选框时,所有商品前的复选 ...
ASP.NET之AdRotator实现淘宝浏览页面的商品随机推荐功能
如今随便上个网都能够看到淘宝.京东等各大电商平台的双十一购物狂欢宣传,从2009年開始淘宝愣是把11.11这一天打造成了全民购物狂欢节.阿里巴巴的上市更是激发了阿里人的斗志,据说他们今年的目标是100 ...
javascript实现京东淘宝等商城的商品图片大图预览功能
在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理当鼠标移入某一图片内部时,图片上部会出现一 ...
jQuery实现淘宝购物车小组件
我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章将实现淘宝购物车小组件, 用原生js可以实现吗,当然可以,可是就是任性一回,就是想用jQuery 来实现下.HTML代码不多才4行,CSS ...
javascript实现京东淘宝等商城的商品图片大图预览功能（图片放大器）
在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理当鼠标移入某一图片内部时,图片上部会出 ...
Android点击跳转到淘宝的某一商品详情页或者某一店铺页面
最近项目的有个需求是点击购买资料按钮进入淘宝界面,简单分析一下,如果用户手机有淘宝就打开淘宝的页面,没有的话也可以选择使用webView进行展示,还是使用手机浏览器进行展示. 判断有无淘宝的代码就不贴 ...

随机推荐

saltstack系列(五)——zmq扩展(一)
问题假设我们的一个客户端既有pull又有sub,他们两个都需要接收消息,该如何协调呢,毕竟,当一个socket要收消息的时候,函数recv是阻塞的,所以,我们第一个思路是不让它阻塞? 实例代码: # ...
Flask 上下文（Context）原理解析
:first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { border: 0; m ...
c++多线程编程（一）
C++本身并没有提供任何多线程机制,但是在windows下,我们可以调用SDK win32 api来编写多线程的程序,下面就此简单的讲一下: 创建线程的函数 HANDLE CreateThread( ...
SSH连接Linux
转载自百度经验 https://jingyan.baidu.com/article/bea41d439d16d7b4c51be619.html 连接Linux的工具有Putty.SSH Secure ...
如何从Win7上卸载Sql 2008 R2 Express，再重装
这两天,因工作需要,需要在一台新的机器上,Win7 64位英文操作系统上,安装Sql Server 2008 R2 Express,安装的过程中出现些问题,在查找问题的过程中,考虑重装 Sql Ser ...
面试题:cook和session
1.首先,Cookie与Session存在的目的是什么? 答:二者都是为了保持客户端访问用户与后台服务器的交互状态,之所以为了保持这种状态,一是为了方便一些业务的实现,另一方面就是为了简化后台服务端的 ...
面试题:java实例变量,局部变量,类变量背1
一.实例变量也叫对象变量.类成员变量:从属于类由类生成对象时,才分配存储空间,各对象间的实例变量互不干扰,能通过对象的引用来访问实例变量.但在Java多线程中,实例变量是多个线程共享资源,要注意同步 ...
C/C++代码覆盖率工具gcov、lcov
gcov是一个可用于C/C++的代码覆盖工具,是gcc的内建工具.下面介绍一下如何利用gcov来收集代码覆盖信息. 想要用gcov收集代码覆盖信息,需要在gcc编译代码的时候加上这2个选项 “-fpr ...
使用 append 方法追加元素
来自于<sencha touch 权威指南> 学习使用 Ext.DomHelper 组件在页面中追加元素.app.js代码如下: Ext.require(['Ext.form.Panel' ...
poj1722 SUBTRACT
应该是基础的dp练手题线性dp最主要的就是关于阶段的划分,这个题中我没想到的一点就是开状态的时候使用了前i个数能合成的数来记录我自己的想法就是类似于区间dp这样的记录方法,这种方法确实开了很多冗余 ...

jquery实现淘宝动态图展示商品

jquery实现淘宝动态图展示商品的更多相关文章

随机推荐

热门专题