【必赢娱乐官网】Javascript图片无缝滚动,Javasc

作者:计算机知识

Javascript图片无缝滚动,javascript图片无缝

js无缝滚动作效果应大概在任何网页上都能看见它的人影,有的可能是接纳插件,其实使用原本的javascript比较容易。

根本的是使用js地方知识。

1.innerHTML:设置或获得成分的html标签

2.scrollLeft:设置或获得位于对象侧面界和窗口中目前可以看到内容的最左端之间的距

3.offsetWidth:设置或获得钦点标签的小幅度

4.setInterval():设置方法定期起步

5.clearInterval();肃清电磁打点计时器

效果图:

必赢娱乐官网 1

必赢娱乐官网 ,向阳花木:demo

必赢娱乐官网 2

<!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="必赢娱乐官网 3"> </li>
            <li> <img src="button.gif" alt="必赢娱乐官网 4"></li>
            <li> <img src="load.gif" alt="必赢娱乐官网 5"></li>
            <li> <img src="straw.gif" alt="必赢娱乐官网 6"></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>

必赢娱乐官网 7

作用演示:demo

if you don't try,you will never know!

js无缝滚动作效果应大致在别的网页上都能收看它的身材,有的大概是利用插件,其实使用原本的java...

Javascript 完成图片无缝滚动,javascript无缝

效果与利益 : 鼠标移入图片 甘休滚动, 鼠标移出活动滚动

能够调治向左或右方向滚动

复制代码 代码如下:

<style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #div1 {
                overflow: hidden;
                width: 712px;
                height: 108px;
                margin: 100px auto;
                position: relative;
                background: red;
            }
            #div1 ul {
                position: absolute;
                left: 0;
                top: 0;
            }
            #【必赢娱乐官网】Javascript图片无缝滚动,Javascript实现图片不间断滚动的代码。div1 ul li {
                float: left;
                width: 178px;
                height: 108px;
                list-style: none;
            }
        </style>

复制代码 代码如下:

<body>
        <a href="javascript:;">向左走</a>
        <a href="javascript:;">向右走</a>
        <div id="div1">
            <ul>
                <li>
                    <img src="img/无缝滚动/1.jpg" />
                </li>
                <li>
                    <img src="img/无缝滚动/2.jpg" />
                </li>
                <li>
                    <img src="img/无缝滚动/3.jpg" />
                </li>
                <li>
                    <img src="img/无缝滚动/4.jpg" />
                </li>
            </ul>
        </div>
    </body>

以上是一个简易的布局,下面是主要的Javascript 代码

复制代码 代码如下:

<script type="text/javascript">
            window.onload = function() {
                var oDiv = document.getElementById("div1");
                var oUl = oDiv.getElementsByTagName('ul')[0];
                var aLi = oUl.getElementsByTagName('li');
                var speed = 2;           
                oUl.innerHTML = oUl.innerHTML;
                oUl.style.width = aLi[0].offsetWidth * aLi.length 'px';
                function move() {
                    if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
                        oUl.style.left = '0';
                    }
                    if (oUl.offsetLeft > 0) {
                        oUl.style.left = -oUl.offsetWidth / 2 'px';
                    }
                    oUl.style.left = oUl.offsetLeft speed 'px';
                }
                var timer = setInterval(move, 30);
                oDiv.onmouseover = function() {
                    clearInterval(timer);
                };
                oDiv.onmouseout = function() {
                    timer = setInterval(move, 30);
                };
                document.getElementsByTagName('a')[0].onclick = function() {
                    speed = -2;
                };
                document.getElementsByTagName('a')[1].onclick = function() {
                    speed = 2;
                };
            }
        </script>

简单来说讲下思路:

第大器晚成设置ul 里面包车型客车图纸生龙活虎共有8张 oUl.innerHTML = oUl.innerHTML;

在 总计ul的大幅为 li的实际增长幅度*8

之后将 多余的源委掩盖

只顾 : oUl.offsetLeft 鲜明是负值

之所以判定的时候绝不把负号漏掉

复制代码 代码如下:

if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
        oUl.style.left = '0';                  

}

这段表示  图片滚动到二分一了,急迅把图片拉回来,因为程序施行的太快,所以差不离看不出来 落成无缝滚动

末段动用 变量 speed 来调节左右趋向的轮转。

上述代码只是实现了最中央的效能,小同伙们得以在那底工上延续康健。

达成图片无缝滚动,javascript无缝 效果 : 鼠标移入图片 结束滚动, 鼠标移出机关滚动 能够调解向左或右方向滚动 复制代码 代码...

Javascript得以达成图片不间断滚动的代码,javascript不间断

蛮不错的生机勃勃段效果代码,能够上下左右轮转,收藏了!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>滚动测试</title>
<script type="text/javascript">
/**
    * @para obj 目标对象 如:demo,deml1,demo2 中的"demo" 可任意,只要不重复
    *
    * @para speed 滚动速度 越大越慢
    *
    * @para direction 滚动方向 包括:left,right,down,up
    *
    * @para objWidth 总可见区域宽度
    *
    * @para objHeight 总可见区域高度
    * 
    * @para filePath 存放滚动图片的路径 (如果是自动获取文件夹里的图片滚动)
    *
    * @para contentById 对某id为contentById下的内容进行滚动 此滚动与filePath不能共存请注意
    *
    * @para 用法实例 scrollObject("res",50,"up",470,200,"","resource") 对contentById(resource)下内容进行滚动
    *
    * @para 用法实例 scrollObject("res",50,"up",470,200,"d:\images\","") 对filePath(images)下内容自动获取并进行滚动,目前只支持ie
    */


    var $ =function(id){return document.getElementById(id)}
    // 滚动
function scrollObject(obj,speed,direction,objWidth,objHeight,filePath,contentById)

     {
        // 执行初始化
if(direction=="up"||direction=="down")
             document.write(UDStructure());
         else
             document.write(LRStructure());

         var demo = $(obj);
         var demo1 = $(obj "1");
         var demo2 = $(obj "2");
         var speed=speed;

         $(contentById).style.display="none"

         demo.style.overflow="hidden";
         demo.style.width = objWidth "px";
         demo.style.height = objHeight "px";
         demo.style.margin ="0 auto";

         if(filePath!="")
            demo1.innerHTML=file();

         if(contentById!="")
            demo1.innerHTML=$(contentById).innerHTML;

         demo2.innerHTML=demo1.innerHTML;


         // 左右滚动
function LRStructure()
         {
             var _html ="";
              _html ="<div id='" obj "' >";
              _html ="<table border='0' align='left' cellpadding='0' cellspacing='0' cellspace='0'>";
              _html ="<tr>";
              _html ="<td nowrap='nowrap' id='" obj "1' >";
                    // 此处是放要滚动的内容
              _html ="</td>";
              _html ="<td nowrap='nowrap' id='" obj "2' ></td>";
              _html ="</tr>";
              _html ="</table>";
              _html ="</div>";

            return _html;
         }


         // 上下滚动的结构
function UDStructure()
         {
             var _html ="";
              _html ="<div id=" obj " >";
              _html ="<table border='0' align='left' cellpadding='0' cellspacing='0' cellspace='0'>";
              _html ="<tr>";
              _html ="<td id='" obj "1' >";
                  // 此处是放要滚动的内容
              _html ="</td>";
              _html ="</tr>";
              _html ="<tr>";
              _html ="<td id='" obj "2' ></td>";
              _html ="</tr>";
              _html ="</table>";
              _html ="</div>";
            return _html;
         }


         // 取得文件夹下的图片
function file()
         {
            var tbsource = filePath;//本地文件夹路径
            filePath = filePath.toString();

            if (filePath=="")
              return"";

            var imgList ="";
            var objFSO =new ActiveXObject('Scripting.FileSystemObject');

            // 文件夹是否存在
if(!objFSO.FolderExists(tbsource))
            {
                alert("<" tbsource ">该文件夹路径不存在,或者路径不能含文件名!");
                objFSO =null;
                return;
            }

            var objFolder = objFSO.GetFolder(tbsource);
            var colFiles =new Enumerator(objFolder.Files);
            var re_inf1 =/.jpg$/;  //验证文件夹文件是否jpg文件

             for (;!colFiles.atEnd();colFiles.moveNext()) //读取文件夹下文件
             {
                var objFile = colFiles.item();

                if(re_inf1.test(objFile.Name.toLowerCase()))
                {
                  imgList  ="<img src=" filePath "/" objFile.Name ">";
                }
             }

            return imgList;
         }

         // 向左滚
function left()
         {
           if(demo2.offsetWidth-demo.scrollLeft<=0)
           {
             demo.scrollLeft-=demo1.offsetWidth;
           }
           else
           {
             demo.scrollLeft  ;
           }
         }


         // 向右滚
function right()
         {
            if(demo.scrollLeft<=0)
            {
              demo.scrollLeft =demo2.offsetWidth;
            }
            else
            {
              demo.scrollLeft--
            }
         }


         // 向下滚
function down()
         {
            if(demo1.offsetTop-demo.scrollTop>=0)
            {
              demo.scrollTop =demo2.offsetHeight;
            }
            else
            {
              demo.scrollTop--
            }
         }

         // 向上滚
function up()
         {
            if(demo2.offsetTop-demo.scrollTop<=0)
            {
              demo.scrollTop-=demo1.offsetHeight;
            }
            else
            {
              demo.scrollTop  
            }
         }

         // 切换方向
function swichDirection()
         {
            switch(direction)
            {
              case"left":
                return left();
                break;

              case"right":
                return right();
                break;

              case"up":
                return up();
                break;

              default:
                return down();
            }
         } 

         // 重复执行
var myMarquee=setInterval(swichDirection,speed);

         // 鼠标悬停
         demo.onmouseover=function() {clearInterval(myMarquee);}

         // 重新开始滚动
         demo.onmouseout=function() { myMarquee=setInterval(swichDirection,speed);}
    }
</script>

</head>

<body>
<div id="img">
 <table width="1000" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr>
   <td width="200"><img src="http://www.bkjia.com/uploads/allimg/160624/0344453F3-0.jpg" alt="必赢娱乐官网 8" width="200" height="150"/></td>
   <td width="200"><img src="http://www.crhled.com/uploads/allimg/191122/0I43B238-4.jpg" alt="必赢娱乐官网 9" width="200" height="150"/></td>
   <td width="200"><img src="http://www.bkjia.com/uploads/allimg/160624/034445B53-2.jpg" alt="必赢娱乐官网 10" width="200" height="150"/></td>
   <td width="200"><img src="http://www.bkjia.com/uploads/allimg/160624/0344453020-3.jpg" alt="必赢娱乐官网 11" width="200" height="150"/></td>
   <td width="200"><img src="http://www.crhled.com/uploads/allimg/191122/0I4363421-7.jpg" alt="必赢娱乐官网 12" width="200" height="150"/></td>
  </tr>
 </table>
</div>
<script type="text/javascript">
scrollObject("sr",50,"right",800,160,"","img")
</script>

</body>
</html>

如上正是本文的全部内容,通晓更加多JavaScript的语法,我们能够查阅:《JavaScript 参谋教程》、《JavaScript代码风格指南》,也希望我们多都赐教帮客之家。

蛮卓绝的黄金时代段效果代码,能够上下左右轮转,收藏了!! !DOCTYPE html PUBLIC "-//W3C//DTD X...

本文由bwin必赢发布,转载请注明来源

关键词: 亚洲必赢76.net