轮播图是现在网站网页上最常见的效果之一，对于轮播图的功能，要求不同，效果也不同！我们见过很多通过不同的方式，实现这一效果，但是有很多比较麻烦，而且不容易理解，兼容性也不好。原生JS实现幻灯片的示例代码,具有很好的参考价值，在这里分享一下，用js原生代码，实现轮播图的常见效果！思路比较清晰，而且可重复性高，也几乎包含了现在网页上轮播实现的所有效果！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#fk{
width: 1200px;
height: 535px;
border: 2px solid blueviolet;
margin: 50px auto;
position: relative;
}
#fk img{
position: absolute;
top: 0;
left: 0;
display: none;
}
#fk ul{
position: absolute;
bottom: 23px;
left: 548px;
}
#fk ul li{
list-style: none;
width: 12px;
height: 12px;
background: #DDDDDD;
float: left;
margin-right: 8px;
border-radius: 50%;
}
</style>
<script type="text/javascript">
// 注意:多个方式控制同一块元素效果的时候,一定要走同一个变量 要不然手动切换，跟自动定时器的不能同步
window.onload = function(){
var fk = document.getElementById('fk');
var imgs = document.getElementsByTagName('img');
var lis = document.getElementsByTagName('li');
var t = 0; //大总管变量
// 控制函数切换的函数
function dd(){
t++; //2秒走一次变化+1
// 判断,只有五张图片,5个li,到3的时候返回去
if (t==5) {
t=0;
}
// 循环,让所有的图片隐藏,让所有的li变灰
for (var y=0;y<5;y++) {
imgs[y].style.display = 'none';
lis[y].style.background = '#DDDDDD'
}
// 让t号图片显示,t号li变红
imgs[t].style.display = 'block';
lis[t].style.background = '#A10000';
}
var timer = setInterval(dd,1000);
// var timer = setInterval(function(){
// t++; //1秒走一次变化+1
//// 判断,只有五张图片,五个li,到5的时候返回去
// if (t==5) {
// t=0;
// }
//// 循环,让所有的图片隐藏,让所有的li变灰
// for (var y=0;y<5;y++) {
// imgs[y].style.display = 'none';
// lis[y].style.background = '#DDDDDD'
// }
//// 让t号图片显示,t号li变红
// imgs[t].style.display = 'block';
// lis[t].style.background = '#A10000';
// },1000)
// 循环,加li加事件
for (var y=0;y<lis.length;y++) {
// 给y号li加序号
lis[y].sh = y;
// 给y号li加鼠标加移入事件
lis[y].onmouseover = function(){
// 先把lis移入的序号存到大总管变量t里,统一变量
t = this.sh;
// 这里移入鼠标就变手动的了,要停止上面的定时器
clearInterval(timer);
// alert(this.sh);
// 循环,让所有的图片隐藏,让所有的li变灰
for (var y=0;y<5;y++) {
imgs[y].style.display = 'none';
lis[y].style.background = '#DDDDDD'
}
// 让this.sh对应的图片显示
imgs[t].style.display = 'block';
lis[t].style.background = '#A10000';
// imgs[this.sh].style.display = 'block';
// lis[this.sh].style.background = '#A10000';
}
// 移入事件结束
// 鼠标移出事件 恢复定时器
lis[y].onmouseout =function(){
timer = setInterval(dd,1000);
}
// 鼠标移出事件结束
}
}
</script>
</head>
<body>
<div id="fk">
<img src="https://www.qiquanji.com/data/img/dmj/201903101552188163753008.jpg" alt="" style="display: block;"/>
<img src="https://www.qiquanji.com/data/img/dmj/201903101552188163335544.jpg" alt="" />
<img src="https://www.qiquanji.com/data/img/dmj/201903101552188164175308.jpg" alt="" />
<img src="https://www.qiquanji.com/data/img/dmj/201903101552188164956825.jpg" alt="" />
<img src="https://www.qiquanji.com/data/img/dmj/201903101552188164532873.jpg" alt="" />
<ul>
<li style="background: #A10000;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
代码效果图片
本文 2019年08月30日 最后编辑
原文链接：https://www.qiquanji.com/post/7721.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知