本文共 1785 字，大约阅读时间需要 5 分钟。

本博文源于jquery基础，旨在探讨如何实现无动画轮播图。

测试效果

自己会动，点击黄色按钮或者点击右下方按钮也可以自动跳转。 之前用原生态实现动画轮播图，也可以去看一下： 因为之前比较简单，只是考虑左右按钮点点动动，所以大家看完那个再看这个就感觉特别亲切了。下面开始一步步实现了

实验步骤

创建文件夹

目录结构如下

根据名字大家应该能理解

书写html代码

主要是这样子的，第一个div一波模拟图片，有一个当前显示的，如何标识呢，用信息量class，每次运动改变class就行了。

第二div就是几个按钮，这几个按钮也用信息量描述 第三个就是两个按钮左点点右点点

当大家写完html代码，没有写css代码时，效果应该是什么样子呢？

‘空白一片，只有序号。那大家可能会想为什么会只有序号，因为图片高宽没有显示，display大家要弄懂。12345时ol的，不要搞错哟

书写css代码

*{
   	margin: 0;	padding: 0;}.carousel{
   	width:270px;	height:481px;	margin: 50px auto;	position: relative;}.carousel .carousel_images ul{
   	list-style: none;}.carousel .carousel_images ul li{
   	display: none;}.carousel .carousel_images ul li.cur{
   	display: block !important;}.carousel .carousel_images ul li img{
   	width:270px;	height:481px;}.carousel .carousel_nav{
   	position: absolute;	bottom:0;	right:0;	width: 123px;	height: 24px;}.carousel .carousel_nav ol{
   	list-style: none;}.carousel .carousel_nav ol li{
   	float: left;	width:16px;	height: 16px;	margin-right: 6px;	border-radius: 50%;	background-color: #eee;	opacity: 0.6;}.carousel .carousel_nav ol li.cur{
   	background:darkred;}.carousel .carousel_btns .btn{
   	position: absolute;	width:40px;	height:40px;	border-radius: 20%;	background-color: #ffd70085;}.carousel .carousel_btns .btn.left{
   	top:50%;	left:0;	margin-top: -20px;	margin-left: -20px;}.carousel .carousel_btns .btn.right{
   	top:50%;	right:0;	margin-top: -20px;	margin-right: -20px;}

写完css代码怎么样子的，摸样齐全就差能动

书写jquery代码

jquery代码主要控制三个地方，一个是右下角按钮，一个式黄色左右按钮，一个是图片自动动！

最后提示

图片大家也要有

jquery路径，图片路径，各种路径注意，然后运行起来，收获喜悦。

转载地址：http://uard.baihongyu.com/