编程 Javascript

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程序设计有所帮助。

js实现图片无缝滚动

- Author -

jerrylsxu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

收集的网上用的ajax之chat.js文件

Apr 08 Javascript

Js判断参数(String,Array,Object)是否为undefined或者值为空

Nov 04 Javascript

jQuery拖动布局其结果保存到数据库

Oct 09 Javascript

JavaScript实现的背景自动变色代码

Oct 17 Javascript

整理Javascript函数学习笔记

Dec 01 Javascript

JavaScript基础知识之方法汇总结

Jan 24 Javascript

json对象与数组以及转换成js对象的简单实现方法

Jun 24 Javascript

JS Canvas定时器模拟动态加载动画

Sep 17 Javascript

jQuery基于随机数解决中午吃什么去哪吃问题示例

Dec 29 jQuery

Vue实现点击箭头上下移动效果

Jun 11 Javascript

JS代码简洁方式之函数方法详解

Jul 28 Javascript

JavaScript缓动动画函数的封装方法

Nov 25 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