var src = imgSrc.attr("src");
时间: 2023-11-26 09:05:42 浏览: 42
这是一段 JavaScript 代码,它用于获取一个图片元素的 `src` 属性值并将其赋值给变量 `src`。具体来说,`imgSrc` 是一个 jQuery 对象,它代表了一个图片元素(通常是 `<img>` 标签),`attr("src")` 方法用于获取该元素的 `src` 属性值。最终,变量 `src` 将保存该属性值。
相关问题
. 叙述以下jQuery代码主要实现了我们实训案例网站细节页(detail.html)中右侧产品颜色切换的哪些效果,以下的代码起到了哪些作用。(20分) $(function(){ $(".color_change ul li img").click(function(){ $(this).addClass("hover").parent().siblings().find("img").removeClass("hover"); var imgSrc = $(this).attr("src"); var i = imgSrc.lastIndexOf("."); var unit = imgSrc.substring(i); imgSrc = imgSrc.substring(0,i); var imgSrc_small = imgSrc + "_one_small"+ unit; var imgSrc_big = imgSrc + "_one_big"+ unit; $("#bigImg").attr({"src": imgSrc_small }); $("#thickImg").attr("href", imgSrc_big); var alt = $(this).attr("alt"); $(".color_change strong").text(alt); var newImgSrc = imgSrc.replace("images/pro_img/",""); $(".imgList li").hide(); $("#jnProitem .imgList").find(".imgList_"+newImgSrc).show().eq(0).find("a").click(); }); });
这段 jQuery 代码主要实现了以下效果:
1. 当用户点击颜色选择器中的某个颜色图片时,被点击的图片会添加一个名为 "hover" 的类,并且它的父元素的兄弟元素中的图片会移除 "hover" 类。这样实现了被选中颜色的高亮效果。
2. 获取被点击图片的 src 属性,并根据最后一个点的位置(i)将其分割成两部分。这样做是为了获取图片的文件名和文件类型。
3. 根据文件名和文件类型构造出小图和大图的路径。小图路径是在原图路径的基础上加上 "_one_small",大图路径是在原图路径的基础上加上 "_one_big"。
4. 将小图路径设置为 id 为 "bigImg" 的元素的 src 属性,将大图路径设置为 id 为 "thickImg" 的元素的 href 属性。这样实现了产品图片的切换效果。
5. 获取被点击图片的 alt 属性,并将其设置为 class 为 "color_change" 的 strong 元素的文本内容。这样实现了产品颜色名称的显示效果。
6. 根据新的图片文件名构造出对应的 class 名称,并将具有该 class 名称的 li 元素隐藏。然后在 id 为 "jnProitem" 的元素中找到 class 为 "imgList" 的元素,再找到具有相应 class 名称的 li 元素,并将其显示出来。同时,触发该 li 元素下的第一个 a 元素的点击事件。这样实现了产品图片列表的切换效果。
<div class="w"> <div id="slideshow"> <img src="../images/pop.gif" onclick="fun()" alt="" style="width: 600px;height: 450px;margin-left: 5px;"> <img src="../images/poc.gif" onclick="fun()" alt="" style="width: 600px;height: 450px;margin-left: 5px;"> </div> <script> function fun() { var a = Math.random() * 5; $('img').attr('src', '../images/pop.gif' + a + '../images/poc.gif'); } </script> </div>无法实现
这段代码无法实现图片轮播的功能,因为在fun()函数中的图片路径拼接方式是错误的。正确的做法应该是将两个图片路径分别存储到数组中,然后通过随机数来选择其中一个路径,再将其赋值给img元素的src属性。修改后的代码如下:
```
<div class="w">
<div id="slideshow">
<img src="../images/pop.gif" onclick="fun()" alt="" style="width: 600px;height: 450px;margin-left: 5px;">
<img src="../images/poc.gif" onclick="fun()" alt="" style="width: 600px;height: 450px;margin-left: 5px;">
</div>
<script>
function fun() {
var paths = ['../images/pop.gif', '../images/poc.gif'];
var randomIndex = Math.floor(Math.random() * paths.length);
$('img').attr('src', paths[randomIndex]);
}
</script>
</div>
```
这样就可以实现图片轮播的效果了。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<script> layui.use(['upload'], function () { var uploadlnst = layui.upload.render({ elem: '#upload1', type: 'post', method: 'post', url: '/BookShopSystem_war/img', before: function (obj) { //预读本地文件示例,不支持ie8 obj.preview(function (index, file, result) { $("#demo1").attr('src', result); }); }, done: function (res) { if (res.code > 0) { return layer.msg('上传失败'); } alert('上传成功' + res.url); document.getElementById('img_url').value = res.url; }, error: function () { //演示失败状态,重传 var demoText = $('#demoText'); demoText.html('上传失败了 重试'); demoText.find('.demo-reload').on('click', function () { uploadlnst.upload(); }); } }); }); </script>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)