用jquery製做的簡單輪播圖

時間 2020-05-07

標籤 jquery 製做單輪欄目 JQuery 简体版

原文原文鏈接

　　我也是進入H5前端的小菜鳥一枚，最近才進入jquery的學習，因此打算對本身的學習進行記錄。html

　　今天分享的是一個簡單的輪播圖，這個輪播圖的特效很簡單，可以進行圖片的輪播以及點擊相應圖片，圖片可以跳轉到相應位置前端

　　首先書寫的div部分jquery

 1 <div id="scrollPics">
 2     <ul class="slider">
 3         <li><img src="../images/1.jpg" alt=""></li>
 4         <li><img src="../images/2.jpg" alt=""></li>
 5         <li><img src="../images/3.jpg" alt=""></li>
 6         <li><img src="../images/7.jpg" alt=""></li>
 7         <li><img src="../images/5.jpg" alt=""></li>
 8     </ul>
 9     <ul class="num"></ul>
10 </div>

　　而後書寫style樣式部分ide

 1  <style>
 2  *{
 3  margin: 0px;
 4  padding: 0px;
 5         }
 6  ul{
 7  list-style: none;
 8         }
 9  #scrollPics{
10  height: 420px;
11  width: 790px;
12  margin-bottom: 10px;
13  overflow: hidden;
14  position: relative;
15  top: 100px;
16  left:400px;
17         }
18  .slider{
19  margin-top: 0px;
20         }
21  .slider img{
22  width: 100%;
23         }
24  .num{
25  position: absolute;
26  right: 5px;
27  bottom: 5px;
28         }
29  .num li{
30  float: left;
31  color: #ff7300;
32  text-align: center;
33  line-height: 16px;
34  width: 16px;
35  height: 16px;
36  cursor: pointer;
37  overflow: hidden;
38  margin: 3px 1px;
39  border: 1px solid #ff7300;
40  background-color: white;
41  border-radius: 50%;
42         }
43  .num li.active{
44  color: #fff;
45  line-height: 21px;
46  width: 21px;
47  height: 21px;
48  font-size: 16px;
49  margin: 0 1px;
50  border: 0;
51  background-color: #ff7300;
52  font-weight: bold;
53  border-radius: 50%;
54  cursor: pointer;
55         }
56     </style>

　　最後是script部分學習

 1 <script>
 2  $(function () {  3         var slider =$("#scrollPics .slider");  4         //獲取圖片
 5         var imgCon =$("#scrollPics .slider li");  6         //除第一張其他的圖片所有隱藏
 7  imgCon.not(imgCon.eq(0)).hide();  8         //定義頁碼
 9         var num =$("#scrollPics .num") 10         //獲取li標籤的長度
11         //find()方法返回備選元素的後代元素
12         var len =slider.find("li").length; 13         var html_page =""; 14  index=0; 15         //添加頁碼
16         for (var i=0;i<len;i++){ 17             if (i===0){ 18  html_page+="<li class='active'>"+(i+1)+"</li>"
19  } 20             else { 21  html_page +="<li>"+(i+1)+"</li>"
22  } 23  } 24         //輸出原點
25  num.html(html_page) 26         //顯示索引對應的圖片
27         function showPic(index) { 28  imgCon.eq(index).show().siblings("li").hide(); 29  num.find("li").eq(index).addClass("active").siblings("li").removeClass("active") 30  } 31         //原點點擊事件
32  $(".num li").click(function () { 33  index=$(this).index() 34  showPic(index) 35  }) 36         //圖片輪播
37  $("#scrollPics").hover(function () { 38  clearInterval(window.timer) 39  },function () { 40  window.timer =setInterval(function () { 41  showPic(index); 42  index++; 43                 if (index ===len){ 44  index =0
45  } 46  },2000) 47  }).trigger("mouseleave")//觸發備選元素的指定事件
48 
49  }) 50 
51 </script>

而後出現上圖樣式，最後由於是用jquery書寫的代碼，還要導入 <script src="../js/jquery-2.2.3.js"></script>this

最後是完整代碼spa

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JQ輪播圖</title>
 6     <script src="../js/jquery-2.2.3.js"></script>
 7     <style>
 8  *{
 9  margin: 0px;
 10  padding: 0px;
 11         }
 12  ul{
 13  list-style: none;
 14         }
 15  #scrollPics{
 16  height: 420px;
 17  width: 790px;
 18  margin-bottom: 10px;
 19  overflow: hidden;
 20  position: relative;
 21  top: 100px;
 22  left:400px;
 23         }
 24  .slider{
 25  margin-top: 0px;
 26         }
 27  .slider img{
 28  width: 100%;
 29         }
 30  .num{
 31  position: absolute;
 32  right: 5px;
 33  bottom: 5px;
 34         }
 35  .num li{
 36  float: left;
 37  color: #ff7300;
 38  text-align: center;
 39  line-height: 16px;
 40  width: 16px;
 41  height: 16px;
 42  cursor: pointer;
 43  overflow: hidden;
 44  margin: 3px 1px;
 45  border: 1px solid #ff7300;
 46  background-color: white;
 47  border-radius: 50%;
 48         }
 49  .num li.active{
 50  color: #fff;
 51  line-height: 21px;
 52  width: 21px;
 53  height: 21px;
 54  font-size: 16px;
 55  margin: 0 1px;
 56  border: 0;
 57  background-color: #ff7300;
 58  font-weight: bold;
 59  border-radius: 50%;
 60  cursor: pointer;
 61         }
 62     </style>
 63 </head>
 64 <body>
 65 
 66 <div id="scrollPics">
 67     <ul class="slider">
 68         <li><img src="../images/1.jpg" alt=""></li>
 69         <li><img src="../images/2.jpg" alt=""></li>
 70         <li><img src="../images/3.jpg" alt=""></li>
 71         <li><img src="../images/7.jpg" alt=""></li>
 72         <li><img src="../images/5.jpg" alt=""></li>
 73     </ul>
 74     <ul class="num"></ul>
 75 </div>
 76 <script>
 77  $(function () {  78         var slider =$("#scrollPics .slider");  79         //獲取圖片
 80         var imgCon =$("#scrollPics .slider li");  81         //除第一張其他的圖片所有隱藏
 82  imgCon.not(imgCon.eq(0)).hide();  83         //定義頁碼
 84         var num =$("#scrollPics .num")  85         //獲取li標籤的長度
 86         //find()方法返回備選元素的後代元素
 87         var len =slider.find("li").length;  88         var html_page ="";  89  index=0;  90         //添加頁碼
 91         for (var i=0;i<len;i++){  92             if (i===0){  93  html_page+="<li class='active'>"+(i+1)+"</li>"
 94  }  95             else {  96  html_page +="<li>"+(i+1)+"</li>"
 97  }  98  }  99         //輸出原點
100  num.html(html_page) 101         //顯示索引對應的圖片
102         function showPic(index) { 103  imgCon.eq(index).show().siblings("li").hide(); 104  num.find("li").eq(index).addClass("active").siblings("li").removeClass("active") 105  } 106         //原點點擊事件
107  $(".num li").click(function () { 108  index=$(this).index() 109  showPic(index) 110  }) 111         //圖片輪播
112  $("#scrollPics").hover(function () { 113  clearInterval(window.timer) 114  },function () { 115  window.timer =setInterval(function () { 116  showPic(index); 117  index++; 118                 if (index ===len){ 119  index =0
120  } 121  },2000) 122  }).trigger("mouseleave")//觸發備選元素的指定事件
123 
124  }) 125 
126 </script>
127 </body>
128 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。