<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #rollImg { width: 960px; height: 340px; position: relative; overflow: hidden; } #imgCon { width: 4800px; height: 320px; position: absolute; font-size: 0; } #imgCon img { width: 960px; height: 320px; } #scroll { bottom: 0; height: 20px; background-color: darkgray; position: absolute; } </style> </head> <body> <div id="rollImg"> <div id="imgCon"> <img src="img/a.jpeg"> <img src="img/b.jpeg"> <img src="img/c.jpeg"> <img src="img/d.jpeg"> <img src="img/e.jpeg"> </div> <div id="scroll"></div> </div> <script> var imgCon; var rollImg; var scroll; addScript("js/Drag.js"); function addScript(src) { var sp=document.createElement("script"); sp.addEventListener("load",loadHandler); sp.src=src; document.body.appendChild(sp); } function loadHandler(e) { initView(); } function initView() { imgCon=document.querySelector("#imgCon"); rollImg=document.querySelector("#rollImg"); scroll=document.querySelector("#scroll"); scroll.style.width=rollImg.offsetWidth/imgCon.offsetWidth*rollImg.offsetWidth+"px"; window.addEventListener("DOMMouseScroll",wheelHandler); window.addEventListener("mousewheel",wheelHandler); rollImg.addEventListener("mousedown",mouseHandler); scroll.addEventListener(Drag.ElEM_MOVE_EVENT,dragDivHandler); Drag.start(scroll,{left:0,top:320,width:960,height:20}); } function dragDivHandler(e) { imgCon.style.left=-e.point.x*(imgCon.offsetWidth/rollImg.offsetWidth)+"px"; } function mouseHandler(e) { e.preventDefault(); } function wheelHandler(e) { var delta=0; if(e.type==="mousewheel"){ delta=-e.wheelDelta/40; }else if(e.type==="DOMMouseScroll"){ delta=e.detail; } imgCon.style.left=imgCon.offsetLeft+delta*10+"px"; if(imgCon.offsetLeft>=0){ imgCon.style.left="0px"; }else if(imgCon.offsetLeft<=-3840){ imgCon.style.left="-3840px"; } scroll.style.left=-imgCon.offsetLeft/(imgCon.offsetWidth/rollImg.offsetWidth)+"px"; } window.addEventListener("storage",StorageHandler); function StorageHandler(e) { location.href=e.newValue; }
Js 横向滚轮
最新推荐文章于 2024-01-21 11:48:56 发布