今天上班做设计做的头疼，就写了一个轮播图练练手，先写了一个手动点击轮播的轮播图，随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等~~~~~~虽然今天我生日，但是代码还是得写的，不能找借口放松自己，原地踏步也算后退~~~~下面来看看最终做的手动点击轮播效果：哈哈哈，有 ...
今天上班做设计做的头疼，就写了一个轮播图练练手，先写了一个手动点击轮播的轮播图，随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等~~~~~~虽然今天我生日，但是代码还是得写的，不能找借口放松自己，原地踏步也算后退~~~~
下面来看看最终做的手动点击轮播效果：
哈哈哈，有没有看出来我的四张图片都是美男子哦~~~~找个赏心悦目的图片真不容易,这样才能激起我写轮播图的代码欲望，写出来就可以点击按钮翻他们牌子了~~~~
一、原理说明
（1）首先是轮播图的架构，我采用了一个最外边的大div包住两个小div，一个小div里面放四张图片，另一个小div里面放四个数字按钮
（2）对最外边的大div设置的宽度为图片的宽度，超出大div宽度的都需要隐藏，但是对于盛放图片的小div设置宽度为2000px，大一点方便四张图左浮动布局
（3）当数字按钮点击时，获取按钮的索引值，这样就可以知道每张图片左移多少宽度
好吧，我觉得纯文字说明有点淡淡的忧伤，估计你们也不好理解，我闲的无聊就做了一张搞笑的原理说明图，我要放大招了~~~~
从上面的图可以看出，四张图片是浮动起来横着的布局，当数字按钮被点击时，图片就要按照数字按钮的索引值引动N个图片的宽度到达父框架里面展示，因为父框架外面的图片都会被隐藏掉~~~~~如果你还看不懂原理的话，我只能吐血了~~~~
二、下面来看主体程序
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>轮播图①（手动点击轮播）</title> <link type="text/css" rel="stylesheet" href="css/layout.css" /> </head> <body> <div class="slideShow"> <!--图片布局开始--> <ul> <li><a href="#"><img src='/images/loading.gif' data-original="img/picture01.jpg" /></a></li> <li><a href="#"><img src='/images/loading.gif' data-original="img/picture02.jpg" /></a></li> <li><a href="#"><img src='/images/loading.gif' data-original="img/picture03.jpg" /></a></li> <li><a href="#"><img src='/images/loading.gif' data-original="img/picture04.jpg" /></a></li> </ul> <!--图片布局结束--> <!--按钮布局开始--> <div class="showNav"> <span class="active">1</span> <span>2</span> <span>3</span> <span>4</span> </div> <!--按钮布局结束--> </div> <script src='/images/loading.gif' data-original="js/jquery-1.11.3.js"></script> <script src='/images/loading.gif' data-original="js/layout.js"></script> </body></html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：jquery特效（3）—轮播图①（手动点击轮播）
关键词：jquery
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
