一、效果展示
效果说明：图片自动循环切换，当图片进行切换时，下面的文字说明也会随着图片的改变而进行变化，点击左边的按钮，图片开始轮播，点击右边按钮，图片轮播会停止，当再次点击左边按钮时，轮播继续进行。
二、代码演示
1.html部分
html部分相对来说比较简单，个人认为主要是要确定img标签，并且在此就将他的地址用第一张图片来存放。
1 <body> 2 ????<div id="container"> 3 ????????<div id="topImg"> 4 ????????????<img src="images/00.jpg" alt="Alternate Text" id="saveImg" /> 5 ????????????<div id="showTitle">青龙</div> 6 ????????</div> 7 ????????<div id="saveBtn"> 8 ????????????<input type="button" name="name" value="start" id="start" /> 9 ????????????<input type="button" name="name" value="stop" id="stop" />10 ????????</div>11 ????</div>12 </body>
2.css部分
这里要注意引用jQuery的文件
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 ????<title></title> 4 ????<script src="jquery-3.2.1/jquery-3.2.1.js"></script> ?//引入jQuery文件 5 ????<style type="text/css"> 6 ????????#container{ 7 ????????????width:400px; 8 ????????????height:300px; 9 ????????????margin:auto;10 ????????????/*border:1px solid red;*/11 ????????}12 ????????#topImg{13 ????????????width:400px;14 ????????????height:220px;15 ????????????position:relative;16 ????????}17 ????????img{18 ????????????width:100%;19 ????????????height:100%;20 ????????}21 ????????#saveBtn{22 ????????????margin-left:140px;23 ????????????margin-top:10px;24 ????????}25 ????????#stop{26 ????????????margin-left:30px;27 ????????}28 ????????#showTitle{29 ????????????width:100%;30 ????????????height:30px;31 ????????????background:#000000;32 ????????????opacity:0.4;33 ????????????bottom:1px;34 ????????????position:absolute;35 ????????????color:white;36 ????????????font-family:‘Microsoft MHei‘;37 ????????????font-size:20px;38 ????????????text-align:center;39 ????????????font-weight:bolder;40 ????????}41 ????</style>3.jQuery部分
数组部分和数组取值部分相对重要
1 <script type="text/javascript"> 2 ????????var interval = null; ?//定义一个空的变量 3 ????????var index = 0; //定义一个为零的变量，用于获取数组的下标值 4 ????????var imgs = ["images/00.jpg", "images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg"]; 5 ????????var title = ["青龙", "白虎", "朱雀", "玄武", "靓妹"]; 6 ????????$(function () { 7 ????????????$("#start").click(function () { 8 ???????????????interval= window.setInterval(funRun,1000); //设置计时器，并赋值给刚才的变量 9 ????????????});10 ????????????$("#stop").click(function () {11 ????????????????clearInterval(interval); //清空计时器12 ????????????});13 ????????});
//定义一个方法来给图片和跟随文字进行赋值14 ????????function funRun() {15 ????????????index++;
//确保数字的范围不超过数组的最大下标值 16 ????????????if (index>4) {17 ????????????????index = 0;18 ????????????}
//获取到图片的src属性，并给其赋值19 ????????????$("#saveImg").attr("src", imgs[index]);
//给显示跟随文字的div赋值20 ????????????$("#showTitle").html(title[index]);21 ????????}22 ????</script>JQuery轮播图
原文地址：http://www.cnblogs.com/pang951189/p/7648550.html