jQuery制作照片墙

最新推荐文章于 2021-06-20 09:37:21 发布

ymj960722

最新推荐文章于 2021-06-20 09:37:21 发布

阅读量349

点赞数

文章标签： js jquery

本文链接：https://blog.csdn.net/ymj960722/article/details/107573838

版权

根据之前所学内容制作了照片墙，具体代码先不放，因为在这里有三个bug需要解决

处理bug

1、左键事件

bug问题：刚打开页面的时候，按一下左键没有任何变化，按两下才开始切换
思路：

说明问题出现在左键代码块中
按第二下才切换说明index有问题
在html中默认前面的内容会被后面的内容覆盖，在这里也一样，一组照片被进行绝对定位后，后面的图片也会覆盖前面的图片，所以总会显示最后一张
一开始定义的var index = 0 的index值和实际图片的index值不同

解决方法：

将自定义的index值和页面加载显示的index值一致即可
既然一开始初始化index=0，那么也让图片显示第一张，其他全部隐藏

代码如下：

//封装切换图片
var swiper = function(){
		$('img')
  	.eq(index)
  	.css({opacity:'1'})
  	.siblings().css({opacity:'0'});
}

//初始化显示第一张
var init = function(){
  	index = 0;
  	swiper();
}

//初始化图片显示
init();

2、右键事件

bug问题：CTRL+F5刷新页面，按下右键之后出现的是第二张图片，跳过了第一张图片
思路：

按下右键跳过第一张，说明右键的index值有问题
由于初始化index=0，与实际index值不同

解决方法：

实际图片的index值做改变
其实第一个bug解决了，第二个也解决了
代码如下：

var index = $('a').length-1;

3、鼠标事件

bug问题：F5刷新之后，键盘左右切换多次，轻轻移动鼠标就会显示最后一张

思路：

刷新后图片切换的不是最后一张，但当鼠标轻轻移动时，图片会立马切换到最后一张
说明是鼠标移动事件出问题

解决方法：

参考使用面向对象的方法
阻止冒泡事件
根据节点名称或者叫html元素来判断是否是a标签，如果是a标签进行index操作，否则就不进行任何操作

代码如下：

//参考使用面向对象
$('a').add(document).on({
    mouseenter:function(event){
      event.stopPropagation();
      //节点名称 或者叫html元素
      console.log($(this)[0].nodeName);
      if($(this)[0].nodeName == 'A'){
        index = $(this).index();
      } else {
        return true;
      }
      //执行切换即可
      swiper();
}

完整代码如下：

$(function(){
	//默认索引值
	var index = 0;
	//解决第一个和第二个bug
	//封装切换图片
	var swiper = function(){
		$('img')
		.eq(index)
		.css({'opacity':'1'})
		.siblings()
		.css({'opacity':'0'})
	}
	//初始化显示第一张
	var init = function(){
		index = 0;
		swiper();
	}
	//初始化图片显示
	init();

	//解决第一个和第二个bug也可以用
	// var index = $('a').length-1;

	//解决第三个bug
	//参考使用面向对象
	$('a').add(document).on({
		mouseenter:function(event){
			event.stopPropagation();//阻止事件的冒泡
			//nodeName节点名称 或叫html元素
			console.log($(this)[0].nodeName);
			if($(this)[0].nodeName=='A'){
				index = $(this).index();
			} else {
				return true;
			}
			//执行切换即可
			swiper();
		},
		keydown:function(event){
			event.stopPropagation();//阻止事件的冒泡
			if (event.keyCode==37) {
				index=index>0?--index:$('a').length-1;
			} else if (event.keyCode==39) {
				index=index<$('a').length-1?++index:0;
			} else {
				return true;
			}
			swiper();
		}
	});
});

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏的云南旅游相册</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/scriptnew.js">
  		//外部引入代码
  	</script>
</head>
<body>

<!-- <form action="javascript:alert('我被提交了！');">
    <input type="text">
    <input type="button" value="按钮">
    <button>提交</button>
    <input type="submit">
</form> -->

<!-- <input type="date">
    <textarea name="" id="" cols="30" rows="10"></textarea> -->


<!-- <button class="obj">这个按钮点击没有效果</button>
<button class="bind">绑定</button>
<button class="unbind">取消绑定</button>
<button class="one">绑定一次</button>
<div class="button" style="display: none;">第一个按钮被点击了！</div> -->

<span></span>
<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>
    <img src="images/1.jpg">
    <img src="images/2.jpg">
    <img src="images/3.jpg">
    <img src="images/4.jpg">
    <img src="images/5.jpg">
    <img src="images/6.jpg">
    <img src="images/7.jpg">
    <img src="images/8.jpg">
    <img src="images/9.jpg">
    <img src="images/10.jpg">
    <img src="images/11.jpg">
    <img src="images/12.jpg">
</div>
</body>
</html>

CSS代码

* { margin: 0; padding: 0; border: none; }

html,
body { overflow: hidden; height: 100%; background: #93b3c6; }

span { display: block; width: 16px; height: 16px; margin: 30px auto 40px; border-radius: 50%; background: #fff; }

nav { position: relative; display: flex; width: 78.125vw; margin: 0 auto 45px; justify-content: space-between; }
nav:before { position: absolute; top: 20px; display: block; width: 100%; height: 10px; content: ""; background: #fff; }
nav > a { font-size: 20px; position: relative; padding: 10px; text-decoration: none; color: #255d7e; border: 2px solid #5395b4; background: #fff; }

div { position: relative; overflow: hidden; width: 78.125vw; height: 75vh; margin: 0 auto; background: #fff; box-shadow: 0 0 30px 0 rgba(8, 1, 3, .3); }
div > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 98%; height: 96%; margin: auto; }

ymj960722

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery制作照片墙

根据之前所学内容制作了照片墙，具体代码先不放，因为在这里有三个bug需要解决处理bug1、左键事件bug问题：刚打开页面的时候，按一下左键没有任何变化，按两下才开始切换思路：说明问题出现在左键代码块中按第二下才切换说明index有问题在html中默认前面的内容会被后面的内容覆盖，在这里也一样，一组照片被进行绝对定位后，后面的图片也会覆盖前面的图片，所以总会显示最后一张一开始定义的var index = 0 的index值和实际图片的index值不同解决方法：将自定义的index值和
复制链接

扫一扫