任务实现:用jQuery实现轮播图。
来自瓶子啊之小白,欢迎来访,欢迎指导。
相信大家从事前端的开发者初级就是轮播图,首先我用jquery写了一个,第二篇我会用原生JavaScript给大家展示。其原理是一样的,只不过jquery封住好了一些属性和方法。获取节点和实现效果就比较方便快捷了。
下面是展示代码和介绍:
html部分代码:
<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部分代码:
* {
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代码实现
js部分代码:
1 //引入jQuery文件
2 <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
3 <script type="text/javascript">
4 //声明一个变量,下面的时候通过算术方法改变变量的值
5 var current = 0;
6 //初始化数据
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 //设置自动播放
14 function mover() {
15 //首先清除当前current以外的li_v的样式显示和伪圆标i_v的效果, 以下的同上
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 //当鼠标放在伪圆标时候获取当前的索引值,并把它赋给current从而实现了移出鼠标的时候跳转到下一个图片轮播
22 i_v.mouseover(function() {
23 current = $(this).index();
24 // console.log($(this).index());
25 });
26 //当鼠标放在伪圆标时候获取当前的索引值,并把它赋给current从而实现下一个图片轮播
27 li_v.eq(current).fadeIn(1000);
28 i_v.eq(current).addClass("active");
29 };
30 //设置自动轮播
31 timer = setInterval(mover, 2000);
32 //鼠标划入的时候停止轮播
33 li_v.mouseover(function() {
34 clearInterval(timer);
35 });
36 //鼠标移出的时候继续轮播
37 li_v.mouseout(function() {
38 timer = setInterval(mover, 2000);
39 });
40 //实现左右按钮事件
41 //点击左按钮事件
42 $(".last-img").click(function() {
43 // 首先清除定时器
44 clearInterval(timer);
45 clearInterval(pre);
46 //实现点击按钮显示上一个图片代码
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 //点击右按钮事件
59 //只需继续轮播就可以
60 $(".next-img").click(function() {
61 // 首先清除定时器
62 clearInterval(timer);
63 clearInterval(nex);
64 //console.log(current);
65 //调用自动轮播的代码和点击上一张图片代码的setTimeout
66 nex = setTimeout(mover, 10);
67 timer = setInterval(mover, 2000);
68 });
69 //添加伪类下标圆标动事件
70 //鼠标碰到伪圆标的时候显示所对应的图片并且停止页面。
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>
完成实现,欢迎来访!!!