用jquery制作的简单轮播图
程序员文章站
2022-06-12 13:22:52
我也是进入H5前端的小菜鸟一枚，最近才进入jquery的学习，所以打算对自己的学习进行记录。 今天分享的是一个简单的轮播图，这个轮播图的特效很简单，能够进行图片的轮播以及点击相应图片，图片能够跳转到相应位置 首先书写的div部分 然后书写style样式部分 最后是script部分 然后出现上图样式， ......
我也是进入h5前端的小菜鸟一枚，最近才进入jquery的学习，所以打算对自己的学习进行记录。
今天分享的是一个简单的轮播图，这个轮播图的特效很简单，能够进行图片的轮播以及点击相应图片，图片能够跳转到相应位置
首先书写的div部分
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样式部分
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>
最后是完整代码
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>
下一篇： HTML---表单案例