1234567891011121314151617$(function() {$(".block").mousemove(function(eva) {$with = $(".progress").width(); //滚动条的总宽度$zhen = eva.pageX; // 需要获取鼠标在div中的移动的距离$(".bar").css("width", $zhen);$le = $(".img img").length; //获取图片数量$bb = $with / $le; //获取鼠标需要移动多少距离替换图片for (var i = 1; i <= $le; i++) {if ($zhen <= ($bb * i)) {$(".img img").removeClass("zz");$(".img img").eq(i - 1).addClass("zz");return;}}})})
1、还是用简单的代码实现比较常见的效果,无需各类插件,也是抛砖引玉,提供给大家一些思路。
2、该代码,无需通过jq设置图片数量,会自动遍历,使用时候可以只修改css获得想要的尺寸大小,滚动条样式。
3、代码中有一条注释:需要获取鼠标在div移动的距离,这个需要额外注意,如果用在实际项目中,需要额外计算。