jQuery实现淡入淡出轮播图带左右按钮及下方小圆点

2017新年,我的第一个工作日,对于jQuery掌握不成熟的我写了一个轮播图,鼓励我在新的一年加油工作,掌握新的知识。

轮播图有自动播放功能,左右按钮切换图片,还有下方小圆点也可点击切换图片。

代码写的不够成熟,请各位看官指出不足,共同进步(*^__^*)。

html代码

 1 <body>
 2         <div class="carousel">
 3             
 4             <button class="left"><<>
 5             <ul id="carousel">
 6                 <li id="item1">
 7                     <img src="img/img1.jpg" />
 8                 li>
 9                 <li id="item2">
10                     <img src="img/img2.jpg" />
11                 li>
12                 <li id="item3">
13                     <img src="img/img3.jpg" />
14                 li>
15             ul>
16             
17             <div class="dot"><span class="active">span><span>span><span>span>div>
18             
19             <button class="right">>>button>
20         div>
21     body>

jQuery代码,记得引入js库,

 1 

css代码:

 1 .carousel{
 2     width: 800px;
 3     margin: auto;
 4     position: relative;
 5 }
 6 
 7 .carousel ul{
 8     margin: 0;
 9     padding: 0;
10     position: relative;
11     width: 800px;
12     height: 500px;
13     
14 }
15 .carousel ul li{
16     list-style: none;
17     float: left;
18     position: absolute;
19     top: 0;
20     left: 0;
21     display: none;
22 }
23 #item1{
24     z-index: 3;
25 }
26 #item2{
27     z-index: 2;
28 }
29 #item3{
30     z-index: 1;
31 }
32 /*向左向右的按钮*/
33 .left,.right{
34     position: absolute;
35     top: 200px;
36     z-index: 10;
37     width: 30px;
38     height: 30px;
39     border: none;
40     background: #000;
41     color: #fff;
42     text-align: center;
43     padding: 0;
44     opacity: 0.1;
45     cursor: pointer;
46 }
47 .left{
48     left: 0;
49 }
50 .right{
51     right: 0;
52 }
53 .left:hover,.right:hover{
54     opacity:1;
55 }
56 /*圆点*/
57 .dot{
58     width: 800px;
59     bottom: 0;
60     height: 30px;
61     position: absolute;
62     text-align: center;
63     z-index: 10;
64 }
65 .dot span{
66     display: inline-block;
67     width: 12px;
68     height: 12px;
69     border-radius: 50px;
70     background: #fff;
71     margin: 0 15px 0 0 ;
72     cursor: pointer;
73 }
74 .dot .active{
75     background: #f00 !important;
76 }

 

转载于:https://www.cnblogs.com/lxgandlz/p/6378782.html

你可能感兴趣的:(javascript)