JQuery轮播图

一、效果展示

效果说明：图片自动循环切换，当图片进行切换时，下面的文字说明也会随着图片的改变而进行变化，点击左边的按钮，图片开始轮播，点击右边按钮，图片轮播会停止，当再次点击左边按钮时，轮播继续进行。

二、代码演示

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>

 

posted @ 2017-10-11 00:03  青红造了个白  阅读(382)  评论(0)  编辑  收藏  举报