该博客介绍了如何使用jQuery实现一个功能丰富的图片轮播组件，包括每4秒自动切换图片、点击箭头左右切换、点击横线按钮精确切换以及点击图片切换。在实现过程中，主要应用了CSS3的position: absolute、transform、transform-origin等特性，以实现平滑的动画效果和灵活的布局。同时，博主分享了不同于传统轮播图的实现思路，并提供了代码仓库链接供读者参考和交流。
实现效果
实现功能
功能一：进入界面，每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
最低0.47元/天 解锁文章
3933
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
