1、本文使用 js+jQuery 实现轮播图,需要引用 jquery 包,另种实现分别是 animate 实现自适应的轮播,以及 transform 平滑轮播(在注释代码中)。
2、代码中的图片大家自己更换就可以了,样式和逻辑均写在 js 里。
3、html 标签代码,js 代码
- <div class="slider">
- //轮播箭头
- <p class="lastpic">
- <img src="../images/prev.png">
- </p>
- <p class="nextpic">
- <img src="../images/next.png">
- </p>
- //轮播图片
- <ul id="slides" class="slides clearfix">
- <li>
- <img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片">
- </li>
- <li>
- <img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片">
- </li>
- <li>
- <img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片">
- </li>
- <li>
- <img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片">
- </li>
- </ul>
- </div>
- <script type="text/javascript">
- $(document).ready(function() {
- var len = $(".slider li").length - 1;
- //给slider设置样式
- $(".slider").CSS({
- "width": "100%",
- "height": "inherit",
- "overflow": "hidden",
- "display": "inline-block"
- });
- //给ul设置宽度
- $(".slides").css({
- "position": "relative",
- "width": ((len + 1) * 100).toString() + "%",
- "margin": "0",
- "padding": "0"
- });
- //给li设置百分比宽度
- $(".slides li").css({
- "width": (100 / (len + 1)).toString() + "%",
- "float": "left"
- });
- //给图片设置宽度
- $(".responsive").css({
- "width": "100%",
- "height": "inherit"
- });
- //控制点样式
- $(".slider p").css({
- "position": "absolute",
- "z-index": "999",
- "cursor": "pointer"
- });
- $(".slider .lastpic").css({
- "left": "0",
- "margin-top": "7%"
- });
- $(".slider .nextpic").css({
- "right": "0",
- "margin-top": "7%"
- });
- //animate移动
- var i = 0;
- $(".nextpic").click(function() {
- moveNext(i);
- });
- $(".lastpic").click(function() {
- moveLast(i);
- });
- //自动轮播
- var timer = setInterval(function() {
- moveNext(i);
- },
- 5000);
- moveNext = function(n) {
- if (n == len) {
- i = -1;
- $(".slider .slides").animate({
- right: ""
- },
- 800);
- } else {
- $(".slider .slides").animate({
- right: ((n + 1) * 100).toString() + "%"
- },
- 800);
- }
- i++;
- }
- moveLast = function(n) {
- if (n == 0) {
- i = len + 1;
- $(".slider .slides").animate({
- right: (len * 100).toString() + "%"
- },
- 800);
- } else {
- $(".slider .slides").animate({
- right: ((n - 1) * 100).toString() + "%"
- },
- 800);
- }
- i--;
- }
- //手机触摸效果
- var startX, endX, moveX;
- function touchStart(event) {
- var touch = event.touches[0];
- startX = touch.pageX;
- }
- function touchMove(event) {
- var touch = event.touches[0];
- endX = touch.pageX;
- }
- function touchEnd(event) {
- moveX = startX - endX;
- if (moveX > 50) {
- moveNext(i);
- } else if (moveX < -50) {
- moveLast(i);
- }
- }
- document.getElementById("slides").addEventListener("touchstart", touchStart, false);
- document.getElementById("slides").addEventListener("touchmove", touchMove, false);
- document.getElementById("slides").addEventListener("touchend", touchEnd, false);
- //transition移动固定宽度,无法自适应
- // $(".nextpic").click(function(){
- // if(i==len){
- // i=-1;
- // $(".slider .slides").css({
- // 'transition-timing-function':'linear',
- // 'transition-duration':'800ms',
- // 'transform':'translateX(0px)'
- // })
- // }else{
- // $(".slider .slides").css({
- // 'transition-timing-function':'linear',
- // 'transition-duration':'800ms',
- // 'transform':'translateX(-'+(i+1)*width+'px)'
- // })
- // }
- // i++;
- // });
- // $(".lastpic").click(function(){
- // if(i==0){
- // i=len+1;
- // $(".slider .slides").css({
- // 'transition-timing-function':'linear',
- // 'transition-duration':'800ms',
- // 'transform':'translateX(-'+len*width+'px)'
- // })
- // }else{
- // $(".slider .slides").css({
- // 'transition-timing-function':'linear',
- // 'transition-duration':'800ms',
- // 'transform':'translateX(-'+(i-1)*width+'px)'
- // })
- // }
- // i--;
- // })
- });
- </script>
来源: http://www.jb51.net/article/116527.htm