jquery 圖片輪播demo實現

轉載註明出處!!!javascript

轉載註明出處!!!css

轉載註明出處!!!html

圖片輪播demo,弄清楚過程實際上是一個很簡單的東西,看網上都沒有什麼實質性的代碼,就本身把過程捋了一遍實現了。java

此次由於隨手寫的,因此沒有作什麼通用性的修改,純粹想到哪寫到哪,大神們別說我就行了。jquery

思路就是顯示一張圖片,其餘圖片隱藏掉,很簡單吧。。。bootstrap

因爲用到了我博客裏面的IcoMoon字體圖標,還用到了bootscript的柵格系統用來居中(純屬多餘)能夠本身看下app

廢話很少說,直接上代碼,仍是同樣的,註釋很清楚了。ide

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
  7     <link rel="stylesheet" type="text/css" href="font/style.css">
  8     <title>Document</title>
  9 <style>
 10 img{
 11     width: 700px;
 12     height:450px;
 13     position: absolute;
 14 }
 15 .my_center{
 16     text-align:center;
 17 }
 18 .none{
 19     display: none;
 20 }
 21 ul{
 22     padding: 0px;
 23 }
 24 li
 25 {
 26     list-style-type: none;
 27 
 28 }
 29 .box{
 30     position: relative;
 31     width: 700px;
 32     height:450px;
 33     margin: 0 auto;
 34 }
 35 .left{
 36     left: 0px;
 37 }
 38 .right{
 39     right: 0px;
 40 }
 41 .pic_button{
 42     position: absolute;
 43     top: 0px;
 44     bottom: 0px;
 45     margin: auto 0;
 46     width: 40px;
 47     height: 60px;
 48     display: none;
 49     opacity: 0.3;
 50     background-color: #888888;
 51     border: 0px;
 52     outline-style:none; 
 53     z-index: 100;
 54 }
 55 .lineList{
 56     display: none;
 57     position: absolute;
 58     left: 0px;
 59     right: 0px;
 60     bottom: 10px;
 61     margin: 0 auto;
 62     z-index:100;
 63 }
 64 span{
 65     color :#CCCCCC;
 66 }
 67 .lineList li{
 68     display: inline;
 69     margin: 5px;
 70 </style>
 71 <script type="text/javascript" src = "./js/jquery.js"></script>
 72 </head>
 73 <body class= "scrollbar">
 74     <div class = "row">
 75         <div class = "col-md-12 my_center">
 76             <div id = "box" class = "box">
 77                 <button id = "Previous" class = "left pic_button">
 78                     <span class="glyphicon glyphicon-chevron-left"></span>
 79                 </button>
 80                 <ul>
 81                     <li>
 82                         <img class = "none" src="./img/1.jpg">
 83                     </li>
 84                     <li>
 85                         <img class = "none" src="./img/2.jpg">
 86                     </li>
 87                     <li>
 88                         <img class = "none" src="./img/3.jpg">
 89                     </li>
 90                     <li>
 91                         <img class = "none" src="./img/4.jpg">
 92                     </li>
 93                     <li>
 94                         <img class = "none" src="./img/5.jpg">
 95                     </li>
 96                     <li>
 97                         <img class = "none" src="./img/6.jpg">
 98                     </li>
 99                     <li>
100                         <img class = "none" src="./img/7.jpg">
101                     </li>
102                     <li>
103                         <img class = "none" src="./img/8.jpg">
104                     </li>
105                 </ul>
106                 <button id = "next" class = "right pic_button">
107                     <span class="glyphicon glyphicon-chevron-right"></span>
108                 </button>
109             </div>
110         </div>
111     </div>
112 </body>
113 </html>
114 <script>
115     $(function(){
116         //初始化
117         var img_index = 0;
118         var img = $("#box img");
119         var img_len = img.length;
120         img.eq(0).show();
121         var id;
122         //開啓定時器,設置輪播時間
123         id = setInterval(show_abs,1000);
124         //輪播函數
125         function show_abs(isPrevious){
126             //設置默認值是爲了在不點擊按鈕的時候自動輪播
127             //這裏爲何這麼寫?你試試用普通的寫法就知道了。
128             var isNext = arguments[0] ? true : arguments[0];
129             //爲何判斷是isPrevious而不是isNext,你試試就知道了。
130             var next = isPrevious?-1:1;
131             img.eq(img_index).fadeOut(1000);
132             img_index += next;
133             //判斷範圍
134             if(img_index == img_len)
135                 img_index = 0;
136             if(img_index == -1)
137                 img_index = img_len-1;
138             img.eq(img_index).fadeIn(1000);
139             $(".lineList li").eq(img_index).find("span").prop('class','icon-radio-checked');
140             $(".lineList li").eq(img_index).siblings().find("span").prop('class','icon-radio-unchecked');
141         }
142         //鼠標懸停的時候暫停輪播,並顯示相關組件
143         $("#box").hover(function(){
144             $(".lineList").fadeIn(500);
145             $(".pic_button").fadeIn(500);
146             clearInterval(id);
147         },function(){
148             $(".lineList").fadeOut(500);
149             $(".pic_button").fadeOut(500);
150             id = setInterval(show_abs,1000);
151         });
152         $("#Previous").on('click',function(){
153             show_abs(true);
154         });
155         $("#next").on('click',function(){
156             show_abs(false);
157         });
158         //插入一行索引
159         var lineList = '<ul  class = "lineList">';
160         for(var i = 0; i < img_len; i++)
161         {
162             lineList += "<li><span class = 'icon-radio-unchecked'></span></li>";
163         }
164         lineList += '</ul>';
165         $("#box").append(lineList);
166         //初始化索引顯示
167         $(".lineList li").eq(0).find("span").prop('class','icon-radio-checked');
168         $(".lineList li").each(function(i){
169             $(this).click(function(){
170                 //點擊之後的效果
171                 $(this).find("span").prop('class','icon-radio-checked');
172                 $(this).siblings().find("span").prop('class','icon-radio-unchecked');
173                 //點擊之後圖片的切換
174                 if(i != img_index)
175                 {
176                     img.eq(img_index).fadeOut(1000);
177                     img.eq(i).fadeIn(1000);
178                     img_index=i;
179                 }
180             });
181         });
182     });
183 </script>
View Code
相關文章
相關標籤/搜索