老师麻烦看下哪里的问题

老师麻烦看下哪里的问题

<!DOCTYPE html>

<html lang="en">


<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>全屏的云南旅游相册</title>

<link rel="stylesheet" type="text/css" href="trip.css">

<script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript" src="script.js"></script>

</head>


<body>

<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>


* {

margin: 0;

padding: 0;

border: none;

text-decoration: none;

}


html,

body {

overflow: hidden;

height: 100%;

background: #93b3c6;

}


span {

display: block;

width: 16px;

height: 16px;

margin: 15px auto 30px;

border-radius: 50%;

background: #fff;

}


nav {

display: flex;

width: 80vw;

margin: 0 auto 25px;

justify-content: space-between;

position: relative;

}


nav::before {

position: absolute;

top: 15px;

width: 100%;

height: 10px;

background: #fff;

display: block;

content: '';

}


nav>a {

font-size: 14px;

padding: 10px;

border: 2px solid #5395b4;

color: #255d7e;

background: #fff;

position: relative;

}


div {

position: relative;

overflow: hidden;

width: 80vw;

height: 75vh;

margin: 0 auto;

background: #fff;

box-shadow: 0 0 30px 0 rgba(8, 1, 3, 0.3)

}


div>img {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

width: 98%;

height: 96%;


}



$(document).ready(function(){


$("a").click(function(){

$("img").eq($(this).index()).css({"opacity":"1"}).siblings().css("opacity","0");

});

});

点击以后没有效果

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕夭夭 2019-07-21 17:14:17

你好同学,老师上次回复让同学检查一下js文件引入,不知道检查了没有,看看js文件是不是与html文件在同一个目录下。另外,因为源码中的点击切换js就是写在了script.js中,所以源码中的案例肯定是要引入这个效果的js文件才会生效,与浏览器没有关系哦。如下:

http://img1.sycdn.imooc.com//climg/5d342b7f00013cdb09430139.jpg

同学的代码中也引入了这个文件,是不是同学的js切换效果没有放在这个文件中呢

http://img1.sycdn.imooc.com//climg/5d342c700001603d06160147.jpg

http://img1.sycdn.imooc.com//climg/5d342c9a0001650108790241.jpg

如果还是有问题,可以看一下私信,以便老师进一步帮助你解决问题。祝学习愉快,望采纳。

好帮手慕夭夭 2019-07-21 09:53:48

你好同学,老师使用你提供的代码测试,点击按钮可以切换图片的。是不是jQuery文件自身有问题,建议使用课程源码中的jQuery测试一下。如果没有效果,看一下是不是js文件引入路径不对(看看js文件是不是与html文件在同一个目录下)。或者把自己项目的截图粘贴上来,以便老师帮助你查看路径是否正确哦。

祝学习愉快,望采纳。

  • 老师,用课程源码的jjquery也没有效果,并且我在我电脑上试过了,源码如果没有script.js这个文件的话,点击也是无效的。这个跟浏览器有没有关系?、
    2019-07-21 16:09:43
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师