学习鼠标滑动监听事件,顺便了复习一些其他相关的事件,记录下来以备下次实现类似功能时参考。
拥有以下功能:
1.向左向右无缝滑动
2.自动轮播
3.鼠标左右滑动,img移动
4.鼠标悬浮img,img停止轮播功能
5.鼠标移动到底部原点,显示哪张图片
1.html代码如下:
- 锐客网
-
文章图片
-
文章图片
-
文章图片
-
文章图片
<
>
2.css代码如下:
*{ padding:0px;
margin:0px;
list-style:none;
}
.banner { width:500px;
height:300px;
margin:100px auto;
border:1px solid #808080;
position:relative;
overflow:hidden;
}
.banner .img{width:5000px;
position:absolute;
left:0px;
top:0px;
}
.banner .img img{width:500px;
height:300px;
}
.banner .img li{float:left;
}
.banner .num { position:absolute;
width:100%;
bottom:10px;
left:0px;
text-align:center;
font-size:0px;
}
.banner .num li { width:10px;
height:10px;
background-color:#888;
border-radius:50%;
display:inline-block;
margin:0px 3px;
cursor:pointer;
}
.banner .num li.on {background-color: #ff6a00;
}
.banner .btn {
width: 30px;
height: 50px;
background-color: #808080;
opacity: 0.5;
filter:alpha(opacity:0.5);
position:absolute;
top:50%;
margin-top:-25px;
cursor:pointer;
text-align:center;
line-height:50px;
font-size:40px;
color:#fff;
font-family:"宋体";
display:none;
}
.banner .btn_l { left:0px;
}
.banner .btn_r { right:0px;
}
.banner:hover .btn { display:block;
}
3.js 代码以及相应解释如下
$(document).ready(function () {var i = 0;
var clone = $(".banner .img li").first().clone();
//克隆第一张图片
$(".banner .img").append(clone);
//复制到列表最后
var size = $(".banner .img li").size();
console.log(size);
//计算li的数量//添加四个li,就是添加圆点
for (var j = 0;
j < size-1;
j++) {
$(".banner .num").append("");
}
//给第一个li添加class on
$(".banner .num li").first().addClass("on");
/*移动事件*/
function move() {
if (i == size) {
$(".banner .img").css({ left: 0 });
i = 1;
}
if (i == -1) {
$(".banner .img").css({ left: -(size - 1) * 500 });
i = size - 2;
}
$(".banner .img").stop().animate({ left: -i * 500 }, 500);
if (i == size - 1) {
//eq(index)选择器选取带有指定 index 值的元素
//siblings()遍历所有同胞元素
$(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");
} else {
$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
}
}//var t = setInterval(function () { i++;
move();
},2000);
//$(selector).hover(inFunction,outFunction)
/*自动轮播*/
/*鼠标悬停事件*/
/*$(".banner").hover(function () {
clearInterval(t);
//鼠标悬停时清除定时器
}, function () {
t = setInterval(function () { i++;
move();
}, 2000);
//鼠标移出时重置定时器
});
*//*鼠标滚动监听事件*/
var scrollFunc=function(e){
ee=e || window.event;
if(e.wheelDelta){//IE/Opera/Chrome
if(e.wheelDelta>0){
console.log(e.wheelDelta);
i++;
console.log(i);
move();
}else{
i--;
console.log(e.wheelDelta);
console.log(i);
move();
}
}else if(e.detail){//Firefox
if(e.detail>0){move();
}else{move();
}
}
}
/*注册事件*/
if(document.addEventListener){
//addEventListener(event,function,useCapture)
//useCapture为boolean值,false(默认)z在冒泡阶段执行,ture在捕获阶段执行
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
//window.onmousewheel=document.onmousewheel=scrollFunc;
document.onmousewheel=scrollFunc;
//鼠标滚动一格触发一次监听事件,chrome支持,火狐不支持
//window.onmousewheel=scrollFunc;
//也只触发一次事件,火狐浏览器不支持,chrome支持/*鼠标滑入原点事件*/$(".banner .num li").hover(function () {var index = $(this).index();
//获取当前索引值
i = index;
$(".banner .img").stop().animate({ left: -index * 500 }, 500);
$(this).addClass("on").siblings().removeClass("on");
});
/*向左按钮*/
$(".banner .btn_l").click(function () {
i++;
move();
})/*向右按钮*/
$(".banner .btn_r").click(function () {
i--;
move();
})});
【web|html+css+jQuery实现多种图片简单切换功能大综合】
推荐阅读
- web|文件上传漏洞详解
- 运维|用Nginx做端口转发(反向代理)
- Linux系统|互联网最受欢迎的开源Web服务器软件——Nginx的搭建和优化
- 渗透测试|【文件上传绕过】——后端检测_MIME-TYPE检测漏洞
- 渗透测试|【文件上传绕过】——后端检测_内容检测图片马绕过
- 即时通讯使用|极光通讯用于java web即时通信---构建idea下maven+springboot第三方即时通讯
- python|JS逆向之抖音登陆及验证码绕过
- ctf|《从0到1(CTFer成长之路》)
- React|Vscode中快速生成代码的方式