酷图片轮播组件"/>
jQuery实现层叠式炫酷图片轮播组件
实现效果
实现功能
功能一：进入界面，每4s图片切换
功能二：点击前后箭头能左右切换图片
功能三：点击下边的横线按钮能准确切换
功能四：点击相应图片也能切换
利用html+css3页面布局，其中用到了几个重要概念
1.position:absolut 脱离文档流概念
2.css3的新特性transform中的translate，使得图片能平滑平移，缩放
3.css3新特性transform-origin属性，改变图片位置的基准点
4.当然，还有最常见的水平垂直居中
思路
之前普通的轮播图思路：滑到那个横线，找到其对应的index；就将此index的图片设置成选定的css样式，其余的兄弟节点都移除选中样式。
这个轮播图不能用上边的思路，因为每个位置都有自己的样式，把index对应的图片设置成选定的样式，其余也得设置成相应的样式。所以用了arr数组对应样式。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片轮播插件</title><style type="text/css" rel="stylesheet">*{margin: 0;padding: 0;}/*想要图片出现重叠的效果*/.content{width: 100%;height: 420px;margin-top: 40px;}.list{width: 1200px;height: 300px;overflow: hidden; /*溢出的隐藏掉，默认的是：内容不会被修剪，会呈现在元素框之外。*/position: absolute;left: 50%;margin-left: -600px;}li{list-style: none;position: a更多推荐
jQuery实现层叠式炫酷图片轮播组件
发布评论