响应式图片切换代码

『壹』 求类似于淘宝产品详情页面大图下面多个小图然后点击左右箭头可以换图片的那种效果的CSS或JS代码

http://down.admin5.com/texiao/flash/这里有很多的。我这俩天正好做的个那·~但是JS有冲突，希内望到时候你也帮容我

『贰』 如何使用HTML5的picture元素处理响应式图片

让我们先了解一下问题
固定宽度，像素完美的网站设计已经离我们远去了。在宽屏显示器，互联网电视，多尺寸的平板电脑和智能手机的今天，我们的设计必须应付一切可能，将宽由320px向7680px转变。
伴随这种多分辨率风景而至的，是需要拉伸或收缩图像，以适应这些不同的要求。这可以被理解为如下问题，矢量图形出现异常时，绝大多数具有特定像素的图像宽度并不改变。
所以，我们应该怎么做呢?
目前最常见的解决方案
作为一般规则，你会在任何响应式网站中发现以下CSS样式:
1
img {
2
max-width: 100%;
3
height: auto;
4
}
此代码使用max-width:100%的设置，以确保图像永远不会超越其父容器的宽度。如果父容器的宽度收缩小于图像的宽度，图像将随之缩小。height:auto的设置可以确保当有这种情况发生时，图像将以自身的宽高比保留。
这解决了一方面的问题，使我们能够在许多不同的情况下显示相同的图像。不过，这并不能让我们对不同的情况指定不同的图像。
#p#副标题#e#
新的解决方案：
是HTML5一个新的元素。
如果元素与当前的和
它可以让你根据以下条件加载完全不同的图像：
媒体特性结果如：视口的当前高度(viewport height)，宽度(width)，方向(orientation)。
像素密度
反过来这也意味着您可以：
加载适当大小图像的文件，使可用带宽得到充分利用。
加载不同裁剪并具有不同纵横比的图像，以适合于不同宽度的布局变化。
加载更高的像素密度，显示更高分辨率的图像。
的工作原理
基本工作步骤如下：
创建标签。
在这些标签内创建一个你想用来执行任何一个特性的元素。
添加一个media属性，用来包含你想要的特性，如视口的当前高度(viewport height)，宽度(width)，方向(orientation)等。
添加一个srcset属性与相应的图像文件名相匹配，进行加载。如果你想提供不同的像素密度，例如Retina显示屏，你可以添加额外的文件名到你的srcset属性中，
添加一个回退的元素。
这里有一个简单的基本的例子，用来检查视口是否小于768px，如果小于的话就加载一个较小的图像：
1
picture
2
source srcset=
smaller.jpg
media=
(max-width: 768px)
3
source srcset=
default.jpg
4
img srcset=
default.jpg
alt=
My default image
5
/picture
你可能会注意到，在media属性使用的语法与创建CSS媒体特性中使用的语法一样。您可以使用相同的特性，这意味着你可以查询max-width，min-width，max-height，min-height，orientation等属性。
同时，您也可以使用这些特性判断设备的方向，从而加载横向或纵向版本的图像，同时您也可以进行大小特性的混合。例如：
『叁』 响应式设计 同一张图片分别用img和background调用，如何让他们自适应屏幕的大小显示的效果一样

background-size:cover;backgrond-attachment:fixed;background-position:center;