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

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

1.innerHTML:设置或获取元素的html标签

2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距

3.offsetWidth:设置或获取指定标签的宽度

4.setInterval():设置方法定时启动

5.clearInterval();清除定时器

效果图：

先睹为快：demo

复制代码 代码如下:



   
   



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

   
       

图片滚动制作
       

---

   
     
       
         

           

           

           

           
     
         

         

         

       
     
     
        prev
     
     
        next
          
   
   
 

很简洁实用的代码，小伙伴们根据自己的项目需求，适当美化下即可。