每天一个JS 小demo之滑屏幻灯片。主要知识点：event-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

每天一个JS 小demo之滑屏幻灯片。主要知识点：event

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">body {margin: 0;}#wrap {margin: 100px auto;position: relative;width: 400px;height: 300px;border: 5px solid #000;overflow: hidden;}#list {position: absolute;left: 0;top: 0;width: 400%;list-style: none;padding: 0;margin: 0;}#list li {width: 25%;float: left;}img {vertical-align: top;}#navs {position: absolute;left: 0;bottom: 30px;height: 12px;width: 100%;text-align: center;}#navs a {display: inline-block;width: 12px;height: 12px;vertical-align: top;background: #fff;margin: 0 5px;border-radius: 6px;}#navs .active {background: #f60;}</style></head><body><div id="wrap"><ul id="list"><li><img src="pic/1.jpg"/></li><li><img src="pic/2.jpg"/></li><li><img src="pic/3.jpg"/></li><li><img src="pic/4.jpg"/></li></ul><nav id="navs"><a href="javascript:;" class="active"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></nav></div><script type="text/javascript" src="startmove.js"></script><script type="text/javascript">(function(){var wrap = document.querySelector('#wrap');var list = document.querySelector('#list');var navs = document.querySelectorAll('#navs a');var wrapW = css(wrap,"width");list.onmousedown = function(e){clearInterval(list.timer);//清除动画var startMouseX = e.clientX;var elX = css(list,"left");document.onmousemove = function(e){var nowMouseX = e.clientX;css(list,"left",nowMouseX - startMouseX + elX);};document.onmouseup = function(e){document.onmousemove = null;document.onmouseup = null;var left = css(list,"left");var now = -Math.round(left/wrapW); //获取到走了几张图console.log(now);now = now<0?0:now;now = now>navs.length-1?navs.length-1:now;

left = now * wrapW;//计算走到这张图 left需要走的距离startMove({el: list,target: {left: -left},type: "easeOutStrong",time: 800});for(var i = 0; i < navs.length; i++){navs[i].className = "";}navs[now].className = "active";};return false;//阻止默认事件(在这的作用阻止图片被选中)};})();</script></body></html>

以上就是每天一个JS 小demo之滑屏幻灯片。主要知识点：event的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~