js实现图片无缝滚动


Posted in Javascript onDecember 23, 2015

js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单。

主要的是使用js位置知识。

  • 1.innerHTML:设置或获取元素的html标签
  • 2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距
  • 3.offsetWidth:设置或获取指定标签的宽度
  • 4.setInterval():设置方法定时启动
  • 5.clearInterval();清除定时器

效果图:

js实现图片无缝滚动

<!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>
</html>

以上就是为大家分享的js实现图片无缝滚动代码,希望对大家的学习javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 监听textarea中按键事件
Oct 08 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
jQuery基础知识小结
Dec 22 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 #Javascript
js判断文本框输入的内容是否为数字
Dec 23 #Javascript
javascript新闻跑马灯实例代码
Jul 29 #Javascript
javascript动态添加checkbox复选框的方法
Dec 23 #Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 #Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 #Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 #Javascript
You might like
PHP判断变量是否为0的方法
2014/02/08 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
angular分页指令操作
2017/01/09 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
python实现获取Ip归属地等信息
2016/08/27 Python
pandas数值计算与排序方法
2018/04/12 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
详解Django 时间与时区设置问题
2019/07/23 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
学校标语大全
2014/06/19 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
党员民主生活会材料
2014/12/15 职场文书
导游词之襄阳古城
2019/09/27 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server