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 面向对象编程(coolshell)
Mar 18 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
js 对象使用的小技巧实例分析
Nov 08 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
什么是索引指示器
2012/08/20 面试题
师范生实习个人的自我评价
2013/09/28 职场文书
致百米运动员广播稿
2014/01/29 职场文书
销售人员自我评价
2014/02/01 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
班组长安全工作职责
2014/07/15 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
2015年党性分析材料
2014/12/19 职场文书
四风之害观后感
2015/06/09 职场文书
MySQL触发器的使用
2021/05/24 MySQL
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers