这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文简单介绍了使用原生 javascript 实现简单的图片无缝滚动的方法,并附上示例代码,推荐给大家,直接可以用在项目中的。
js 无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的 javascript 比较简单。
主要的是使用 js 位置知识。
1.innerhtml: 设置或获取元素的 html 标签
2.scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距
3.offsetWidth: 设置或获取指定标签的宽度
4.setInterval(): 设置方法定时启动
5.clearInterval(); 清除定时器
效果图:
先睹为快:demo
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>javascript scroll制作</title>
- </head>
- <body>
- <style>
- /*conment*/
- *{
- margin: 0;
- padding: 0;
- }
- img{max-width: 100%;}
- .container{
- max-width: 620px;
- margin: 0 auto;
- padding-top: 50px;
- }
- .text-center{text-align: center;}
- .list-inline li{
- display: inline-block;
- }
- .hide{display: none;}
- hr{
- margin:20px 0;
- }
- .tag{
- background-color: #ccc;
- padding: 5px 0;
- }
- .tag li{
- padding: 0 10px;
- border-left: 1px solid #fff;
- cursor:pointer;
- }
- .tag li:first-child{
- border-left: transparent;
- }
- .tag li.active{
- background-color: #ddd;
- }
- .scroll{
- position: relative;
- padding: 10px;
- margin-bottom: 20px;
- background-color: #ddd;
- }
- .wrap{
- overflow: hidden;
- }
- .content{
- min-width: 3000px;
- height: 200px;
- }
- .content ul{
- float: left;
- }
- .content ul li{
- display: inline-block;
- max-width: 200px;
- }
- #prev,#next{
- width: 50px;
- height: 50px;
- margin-top: -25px;
- background-color: #ccc;
- line-height: 50px;
- text-align: center;
- cursor: pointer;
- }
- #prev{
- position: absolute;
- left: 0;
- top:50%;
- border-radius: 0 25px 25px 0;
- }
- #next{
- position: absolute;
- right: 0;
- top:50%;
- border-radius: 25px 0 0 25px;
- }
- </style>
- <div class="container">
- <h1 class="text-center">图片滚动制作</h1>
- <hr>
- <div class="scroll">
- <div class="wrap" id="wrap">
- <div id="content" class="content" >
- <ul id="list1">
- <li> <img src="freelance.gif" alt=""> </li>
- <li> <img src="button.gif" alt=""></li>
- <li> <img src="load.gif" alt=""></li>
- <li> <img src="straw.gif" alt=""></li>
- </ul>
- <ul id="list2">
- </ul>
- </div>
- </div>
- <div id="prev">
- prev
- </div>
- <div id="next">
- next
- </div>
- </div>
- </div>
- <script>
- var wrap=document.getElementById('wrap');
- var list1=document.getElementById('list1');
- var list2=document.getElementById('list2');
- var prev=document.getElementById('prev');
- var next=document.getElementById('next');
- //创建复制一份内容列表
- list2.innerHTML=list1.innerHTML;
- //向左循环滚动
- function scroll(){
- if(wrap.scrollLeft>=list2.offsetWidth){
- wrap.scrollLeft=0;
- }
- else{
- wrap.scrollLeft++;
- }
- }
- timer = setInterval(scroll,1);
- //鼠标停留使用clearInterval()
- wrap.onmouseover=function(){
- clearInterval(timer);
- }
- wrap.onmouseout=function(){
- timer = setInterval(scroll,1);
- }
- //向左加速
- function scroll_l(){
- if(wrap.scrollLeft>=list2.offsetWidth){
- wrap.scrollLeft=0;
- }
- else{
- wrap.scrollLeft++;
- }
- }
- //向右滚动
- function scroll_r(){
- if(wrap.scrollLeft<=0){
- wrap.scrollLeft+=list2.offsetWidth;
- }
- else{
- wrap.scrollLeft--;
- }
- }
- prev.onclick=function(){
- clearInterval(timer);
- change(0)
- }
- next.onclick=function(){
- clearInterval(timer);
- change(1)
- }
- function change(r){
- if(r==0){
- timer = setInterval(scroll_l,60);
- wrap.onmouseout = function(){
- timer = setInterval(scroll_l,60);
- }
- }
- if(r==1){
- timer = setInterval(scroll_r,60);
- wrap.onmouseout = function(){
- timer = setInterval(scroll_r,60);
- }
- }
- }
- </script>
- </body>
很简洁实用的代码,小伙伴们根据自己的项目需求,适当美化下即可。
来源: http://www.phperz.com/article/17/0426/274128.html