jQuery实现简单图片的轮播(自右向左播放)

本文主要是介绍jQuery实现简单图片的轮播(自右向左播放)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

简单的轮播大概内容分为如下三点：

1.轮播图片的存储；

2.轮播的样式（注意：图片存储的总宽度，以及图片移动相对元素的定位的元素）；

3.JQuery中的计时器调用动画移动图片轮播。

一、carouselFigure.html编写图片的存储，以及所在范围

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CarouselFigure(自右向左)</title><link rel="stylesheet" type="text/css" href="carouselFigureCSS.css"><script type="text/javascript" src="jquery-3.0.0.min.js"></script><script type="text/javascript" src="carouselFigureJS.js"></script>
</head>
<body>
<!--jQuery实现简单图片的轮播(自右向左播放)-->
<!--最外层-->
<div class="carousel"><!--图片切换的范围-->
    <div class="banner"><!--图片存储-->
        <ul class="figureList"><li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图1.jpg"/></a></li><li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图2.jpg"/></a></li><li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图3.jpg"/></a></li><li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图4.jpg"/></a></li><li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图5.jpg"/></a></li><li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图6.jpg"/></a></li></ul></div>
</div>
</body>
</html>

二、carouselFigureCSS.css以上html每层的样式。

/*通用CSS属性*/
* {margin: 0;padding: 0;
}/*最外层的*/
.carousel {width: 580px;height: 360px;margin: 30px auto;
}/*图片切换的范围*/
.banner {width: 580px;height: 360px;overflow: hidden;position: relative;
}/*存储图片的ul*/
.figureList {list-style: none;/*存储的图片的总宽度*/
    width: 3480px;height: 360px;overflow: hidden;position: absolute;
}.figureList li {float: left;/*转换为行元素*/
    display: inline;
}.figureList li a {text-decoration: none;
}.figureList li img {width: 580px;height: 360px;
}

三、carouselFigureJS.js图片轮播动画

$(function () {//当前下标countIndex
    var countIndex = 0;//图片总数，即图片被包裹的li个数
    var imageCount = $(".figureList li").length;//计时器自动调用切换显示的图片下标，1.5秒调用一次。
    //一定要注意第一个函数调用不加括号
    var autoCarousel = setInterval(figureIndex, 1500);//转换下标，并调用动画切换图片
    function figureIndex() {if (countIndex < imageCount - 1) {countIndex++;} else {countIndex = 0;}//调用切换
        changeTo(countIndex);}//切换图片
    function changeTo(num) {//切换图片，也就是把figureList类（ul）向左移动。
        var leftGo = num * 580;$(".figureList").animate({"left": "-" + leftGo + "px"}, 500);}
});
/**
 * Created by 洋   汪 on 2016/7/31.
 */