Task implementation: use jQuery to implement the rotation chart.
From the bottle, welcome to visit and guide.
I believe that the primary developer engaged in front-end is the carousel chart. First, I wrote one with jquery, and the second one I will show you with native JavaScript. The principle is the same, but jquery blocks some properties and methods. It is more convenient and efficient to obtain nodes and realize the effect.
Here is the code and introduction:
html part code:
<div class="slideshow">
<div class="btn">
<span class="last-img"><</span><span class="next-img">></span>
</div>
<div class="ra-show">
<i class="active">1</i>
<i>2</i>
<i>3</i>
<i>4</i>
<i>5</i>
</div>
<ul>
<li style="display: block;">
<a href="#"><img src="img/wangou1.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/wangou2.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/wangou3.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/wangou4.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/wangou5.jpg" /></a>
</li>
</ul>
</div>
css part code:
* {
padding: 0;
margin: 0;
}
.slideshow {
height: 300px;
width: 500px;
margin: 0 auto;
margin-top: 100px;
overflow: hidden;
position: relative;
}
.slideshow .btn {
height: 50px;
width: 100%;
position: absolute;
top: 45%;
z-index: 2;
}
.slideshow .ra-show {
height: 20px;
width: ;
position: absolute;
bottom: 20px;
left: 45%;
z-index: 2;
}
.ra-show i {
width: 18px;
height: 18px;
display: inline-block;
border-radius: 50px;
background: #efefef;
font-size: 12px;
line-height: 18px;
text-align: center;
cursor: pointer;
}
.slideshow .ra-show .active {
background: #ff9000;
box-shadow: 0 0 10px #FF9000;
}
.btn span {
height: 50px;
width: 50px;
background-color: rgba(0, 0, 0, 0.2);
line-height: 50px;
text-align: center;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
color: #ffffff;
}
.btn span:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.btn .last-img {
float: left;
}
.btn .next-img {
float: right;
}
.slideshow ul {
position: relative;
}
.slideshow ul li {
height: 300px;
width: 500px;
list-style: none;
position: absolute;
display: none;
}
.slideshow ul li:hover {
cursor: pointer;
}
.slideshow ul li img {
height: 300px;
width: 500px;
}
css code implementation
1 //Introduce jQuery file
2 <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
3 <script type="text/javascript">
4 //Declare a variable. Change the value of the variable mathematically
5 var current = 0;
6 //Initialization data
7 var timer = null;
8 var pre = null;
9 var nex = null;
10 $(document).ready(function() {
11 var li_v = $('.slideshow ul li');
12 var i_v = $('.ra-show i');
13 //Set autoplay
14 function mover() {
15 //Clear current first current Other than li_v Style display and pseudo circle mark of i_v Effect, Ditto below
16 li_v.hide();
17 // i_v.eq(current).removeClass("active");
18 i_v.removeClass("active");
19 current = (current + 1) % (li_v.length);
20 console.log(current);
21 //When the mouse is placed on the pseudo circle mark, obtain the current index value and assign it to current Thus, when the mouse is removed, the next picture can be rotated
22 i_v.mouseover(function() {
23 current = $(this).index();
24 // console.log($(this).index());
25 });
26 //When the mouse is placed on the pseudo circle mark, obtain the current index value and assign it to current So as to realize the next picture rotation
27 li_v.eq(current).fadeIn(1000);
28 i_v.eq(current).addClass("active");
29 };
30 //Set up auto carousel
31 timer = setInterval(mover, 2000);
32 //Stop rotation when mouse is in
33 li_v.mouseover(function() {
34 clearInterval(timer);
35 });
36 //Continue to rotate when the mouse moves out
37 li_v.mouseout(function() {
38 timer = setInterval(mover, 2000);
39 });
40 //Implement left and right button events
41 //Left click event
42 $(".last-img").click(function() {
43 // Clear timer first
44 clearInterval(timer);
45 clearInterval(pre);
46 //Click the button to display the last picture code
47 function last_v() {
48 li_v.hide();
49 i_v.removeClass("active");
50 current = (current - 1 + li_v.length) % (li_v.length);
51 //console.log(current);
52 li_v.eq(current).fadeIn(1000);
53 i_v.eq(current).addClass("active");
54 };
55 pre = setTimeout(last_v, 10);
56 timer = setInterval(mover, 2000);
57 });
58 //Right click event
59 //You just need to continue the rotation
60 $(".next-img").click(function() {
61 // Clear timer first
62 clearInterval(timer);
63 clearInterval(nex);
64 //console.log(current);
65 //Call the code of automatic rotation and click the code of the previous picture setTimeout
66 nex = setTimeout(mover, 10);
67 timer = setInterval(mover, 2000);
68 });
69 //Add pseudo class subscript circle marking event
70 //When the mouse touches the pseudo circle mark, the corresponding picture is displayed and the page is stopped.
71 i_v.mouseover(function() {
72 clearInterval(timer);
73 i_v.removeClass("active");
74 li_v.hide();
75 li_v.eq($(this).index()).fadeIn(1000);
76 $(this).addClass("active");
77 //console.log($(this).index());
78 });
79 });
80 </script>