成都网站建设设计

将想法与焦点和您一起共享

如何使用JS实现滑屏幻灯片

小编给大家分享一下如何使用JS实现滑屏幻灯片,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

我们提供的服务有:成都网站设计、成都网站建设、微信公众号开发、网站优化、网站认证、威县ssl等。为数千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的威县网站制作公司

示例





Document

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;
}






  • (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;//阻止默认事件(在这的作用阻止图片被选中) }; })();

    以上是“如何使用JS实现滑屏幻灯片”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


    新闻名称:如何使用JS实现滑屏幻灯片
    转载来源:http://chengdu.cdxwcx.cn/article/piegde.html

    其他资讯