/ 初始化 / * { margin: 0; padding: 0; } ul { list-style: none; } / 版心 / .w { width: 1120px; margin: 0 auto; } / 左侧盒子 / .leftBox { width: 400px; float: left; } .leftBox .top { width: 400px; border:1px solid #ccc; } .leftBox .top img { width: 400px; } .leftBox ul { width: 188px; margin: 10px auto; } .leftBox ul li { float: left; width: 54px; height: 54px; border:1px solid #fff; } .leftBox ul li.active { border-color: red; } .leftBox ul li + li { margin-left: 10px; } / 右侧盒子 / .rightBox { float: left; margin-left:10px; width: 500px; height: 500px; border:1px solid #ccc; overflow: hidden; } <!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>Document</title> <link rel=“stylesheet” href=“index.css”> </head> <body> <div class=“w”> <div class=“leftBox”> <div class=“top”> <img src=“img/m1.jpg”> </div> <ul> <li class=“active”> <img src=“img/s1.jpg” msrc=“m1.jpg” bsrc=“b1.jpg”> </li> <li> <img src=“img/s2.jpg” msrc=“m2.jpg” bsrc=“b2.jpg”> </li> <li> <img src=“img/s3.jpg” msrc=“m3.jpg” bsrc=“b3.jpg”> </li> </ul> </div> <div class=“rightBox”> <img src=“img/b1.jpg” alt=“”> </div> </div> <script src=“lib/jquery-1.12.4.js”></script> <script> // 将文件路径的前缀存储到变量中 var path = “img/“; // 1、鼠标移上小图片，需要做两件事情 $(“.leftBox ul li img”).mouseover(function(){ // 首先：给img所在的父级li标签去切换类名，实现突出显示 $(this).parent().addClass(“active”).siblings().removeClass(“active”); // 其次：给中图和大图换图片路径,路径由img小图片的自定义属性获取 var msrc = path + $(this).attr(“msrc”); var bsrc = path + $(this).attr(“bsrc”); // 设置给对应的img标签 $(“.leftBox .top img”).attr(“src”,msrc); $(“.rightBox img”).attr(“src”,bsrc); }); </script> <script> // 获取元素 var $imgs = $(“.leftBox ul li img”); var $mimg = $(“.leftBox .top img”) var $bimg = $(“.rightBox img”) // 1.给小图的图片添加鼠标移上事件，切换类名 $imgs.mouseenter(function () { // 排他操作 // 给图片自己的父级添加类名,让父级的兄弟取消类名 $(this).parent().addClass(“active”).siblings().removeClass(“active”) // 2.更改中图和大图的路径 // 存储路径中的前缀 var path = “img/“; // 中图和大图的路径存在了对应小图的自定义属性中 var msrc = path + $(this).attr(“msrc”); var bsrc = path + $(this).attr(“bsrc”); // 直接设置给对应的图片 $mimg.attr(“src”, msrc) $bimg.attr(“src”, bsrc) }) </script> </body> </html>
