<html lang="en">
<head>
< ;m eta charset="UTF-8">
<t IT le>Document</title>
<style type="text/css">
body {
m arg in: 0;
}
# wrap {
mar gin : 100px auto;
position: relative;
width: 400px;
h ei ght: 300px;
border: 5px solid #000;
overflow: hidden;
}
#list {
position: absolute;
left: 0;
top: 0;
width: 400%;
list -s tyle: none;
padding: 0;
margin: 0;
}
#list li {
width: 25%;
float: left;
}
img {
vert ical -align: to p;
}
#navs {
position: absolute;
left: 0;
bottom: 30px;
height: 12px;
width: 100%;
text-align: center ;
}
#navs a {
dis play : inline-block;
width: 12px;
height: 12px;
vertical-align: top;
background: #fff;
margin: 0 5px;
border-radius: 6px;
}
#navs .active {
background: #f60;
}
</style>
</head>
<body>
<!--
练习:
1. 实现自动播放
2. 添加上一张 下一张功能
3. 给下边的导航添加 点击事件
-->
<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 hr ef="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.onmou SEM ove = 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: "easeOut strong ",
time: 800
});
for(var i = 0; i < navs.length; i++ ){
navs[i]. classname = "";
}
navs[now].classN am e = "active";
};
return false;//阻止默认事件(在这的作用阻止图片被选中)
};
})();
</script>
</body>
</html>
以上就是 每天 一个JS 小demo之滑屏幻灯片。主要知识点：event的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 每天一个JS 小demo之滑屏幻灯片。主要知识点：event 全部内容，希望文章能够帮你解决 每天一个JS 小demo之滑屏幻灯片。主要知识点：event 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于每天一个JS 小demo之滑屏幻灯片。主要知识点：event的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did204076