轮播图的3个常见bug，即处理bug思路及其解决办法

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1，下载jquery.js文件，并且导入

2，在下面的img中写入可以用图片路径

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>云南旅游景点</title>

<style>
*{padding: 0;margin: 0;}
body{background: rgba(0, 0, 255, .3);}
.flag{display: block;width: 20px;height: 20px;margin: 30px auto 40px;background: #fff;border-radius: 50%;}
.nav{display: flex;width: 80vw;margin: 0 auto 40px;justify-content: space-between;position: relative;}
.nav > a{padding: 5px;border: 1px solid #000;font-size: 16px;color: #255d7e;text-decoration: none;background: #fff;z-index: 10;}
.nav:before{display: block;width: 79vw;height: 13px;position: absolute;top: 10px;right: 2px;content: "";background: #fff;}
.content{width: 80vw;height: 75vh;background: #fff;margin: auto;position: relative;}
.content > img{width: 98%;height: 96%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<span class="flag"></span>
<nav class="nav">
<a href="#">泸沽湖</a>
<a href="#">丽江古城</a>
<a href="#">就这家-云逸客栈</a>
<a href="#">西双版纳</a>
<a href="#">云南红酒庄</a>
<a href="#">轿子雪山</a>
<a href="#">普者黑</a>
<a href="#">海埂大坝</a>
<a href="#">玉龙湾</a>
<a href="#">昆明郊野公园</a>
<a href="#">欧洲风琴小镇</a>
<a href="#">茶马古道</a>
</nav>
<div class="content">
<img src="data:images/1.jpg">
<img src="data:images/2.jpg">
<img src="data:images/3.jpg">
<img src="data:images/4.jpg">
<img src="data:images/5.jpg">
<img src="data:images/6.jpg">
<img src="data:images/7.jpg">
<img src="data:images/8.jpg">
<img src="data:images/9.jpg">
<img src="data:images/10.jpg">
<img src="data:images/11.jpg">
<img src="data:images/12.jpg">
</div>
<script type="text/javascript">
$(document).ready(function(){
var index=0;//默认索引值
//显示当前索引对应的图片，隐藏其他图片
function switchPic(index){
$('img').eq(index).css({'opacity':'1'}).siblings().css({'opacity':'0'});
} /*//添加下面代码块即可解决第一个和第二个bug
//初始化图片显示第一张
function init(){
index=0;
switchPic(index);
}
//初始化图片显示
init();*/ /* //添加下面代码块即可解决第三个bug
//过滤掉document触发的mouseenter事件，
//只有A标签触发的mouseenter事件才获得当前index
function mouseEvent(event){
//如果是A标签触发的事件，那么就获得当前的索引index
if (event.currentTarget.nodeName=="A") {
index=$(this).index();
switchPic(index);
}else{
return true;//默认其他鼠标事件执行其他默认事件，不对index进行操作。
}
}*/ //鼠标事件
function mouseEvent(event){
event.stopPropagation();//阻止事件冒泡和事件捕获
index=$(this).index();//获取当前对象的索引值
switchPic(index);
}
//键盘事件
function keyEvent(event){
event.stopPropagation();//阻止事件冒泡和事件捕获
//37是键盘向左的键码，如果是按键盘左键
if (event.keyCode=='37') {
//如果索引值小于等于0，那么索引值就要变成最大:index=$('a').length-1
index<=0?index=$('a').length-1:index-=1;
//39是键盘向右的键码，如果是按键盘右键
}else if (event.keyCode=='39') {
//如果索引值大于等于最大的：$('a').length-1，那么index就要变成最小index=0;
index>=$('a').length-1?index=0:index+=1;
}else{
// 如果是按其他键，即什么都不做
return true;
}
switchPic(index);
}
//使用on进行事件绑定，document不是标签，而是一个文档对象，所以不用$+引号,而是$(document)
//这里的事件绑定很特别，需要深入理解：$('a').add(document).on({...})
$('a').add(document).on({
mouseenter:mouseEvent,
keydown:keyEvent
})
})
</script>
</body>
</html>