图片滑动轮播 原理:
- 1，首先要确认可视图片的大小(方便计算宽高)，这个容器设置为相对定位作为图片包裹最外层。
- 2，设置一个可以滑动包裹住图片容器，设置绝对定位，使用左右或者上下距离产生滑动效果。
- 3，完善索引控制，与prev与next控制。
1，首先把界面搭建好(html+css)
代码如下：demo
<div class="mySlide" id="mySlide"> <!--图片--> <div id="focusBox" class="focusBox"> <div id="focusPics" class="focusPics"> <div class="child"><img src="t1.jpg"/></div> <div class="child"><img src="t2.jpg"/></div> <div class="child"><img src="t3.jpg"/></div> <div class="child"><img src="t4.jpg"/></div> <div class="child"><img src="t5.jpg"/></div> <div class="child"><img src="t6.jpg"/></div> </div> </div> <!--控制--> <a href="#" id="btnPrev" class="btn">prev</a> <a href="#" id="btnNext" class="btn">next</a> <div id="myNav"> <a href="#" ></a> <a href="#" ></a> <a href="#" ></a> <a href="#" ></a> <a href="#" ></a> <a href="#" ></a> </div> </div>
css
/*css reset*/ html,body,div,span,h1,h2,h3,h4,p,form,img,b,i,ul,li,ol,label,aside,footer,header,nav,section,figure{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;color:#333;}
body{font:12px/1.5 "Microsoft YaHei";background:url(images/bg.png) repeat;}
a{outline:none;}
/*Xslide*/
#mySlide{width:550px;height:280px;position:relative;margin:100px auto 0;}
#focusBox{width:550px;height:280px;position:relative;overflow:hidden;box-shadow:2px 2px 2px #333;}
.focusPics{position:absolute;left:0;top:0;cursor:pointer;}
.child{float:left;}
.btn{position:absolute;top:140px;width:24px;height:43px;display:block;overflow:hidden;cursor:pointer;text-indent:-999em;}
#btnPrev{left:-24px;background:url(pre.png) no-repeat;}
#btnNext{right:-24px;background-position:right bottom;background:url(next.png) no-repeat;}
#myNav{width:550px;height:20px;line-height:20px;text-align:center;position:absolute;padding:5px 0 0 0;}
#myNav a{width:12px;height:12px;display:inline-block;overflow:hidden;background:url(nav.png) no-repeat;margin:0px 3px;cursor:pointer;}
#myNav a.cur,#myNav a:hover{background-position:0px -12px;}
2，图片滑动(slide)轮播jquery封装
代码如下：demo
