zoukankan      html  css  js  c++  java
  • js实现无缝轮播

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>23333</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    ul,li{
    list-style: none;
    }
    .warp{
    height: 150px;
    616px;
    margin: 50px auto;
    overflow: hidden;
    background-color: red;
    position: relative;
    }
    .imgs{
    position: absolute;
    }
    .imgs li{
    150px;
    height: 146px;
    float: left;
    margin: 2px;
    cursor: pointer;
    background-color: yellow;
    }
    </style>
    </head>
    <body>

    <div class="warp">
    <ul id="imgs" class="imgs">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
    </div>

    <script type="text/javascript">
    window.onload=function () {
    var margin=4;//元素间距
    var speed=-5;//左移速度(右移为正)
    var timer=null;//定时器
    var oUl=document.getElementById("imgs");
    var aLi=oUl.getElementsByTagName("li");
    var liWidth=aLi[0].offsetWidth+margin;//li宽度
    var liCount=aLi.length;//li个数

    oUl.innerHTML+=oUl.innerHTML;//复制内容追加

    oUl.style.width=liWidth*aLi.length+'px';
    oUl.style.height=liWidth+'px';

    timer=setInterval(function(){
    //向左移动判断
    if(Math.abs(oUl.offsetLeft)>=liWidth*liCount){
    oUl.style.left="0px"; }
    //向右的判断
    //if(Math.abs(oUl.offsetLeft)==0){
    // oUl.style.left=-liCount*liWidth+'px';
    // }
          oUl.style.left=oUl.offsetLeft+speed+'px';    
    },100);
    oUl.onmouseover=function(){
    clearInterval(timer);
    };
    oUl.onmouseout=function(){
    timer=setInterval(function(){
    if(Math.abs(oUl.offsetLeft)>=liWidth*liCount){
    oUl.style.left="0px";
    }
    oUl.style.left=oUl.offsetLeft+speed+'px';
    },100)
    }
    }
    </script>
  • 相关阅读:
    Vim的行号、语法显示等设置,即.vimrc文件的配置
    Vim 配置详解
    经典SQL语句大全
    几种流行的AJAX框架jQuery,Mootools,Dojo,Ext JS的对比
    GHOST XP SP3无法安装IIS服务的解决方法
    开发中巧用Enum枚举类型
    代码的坏味道
    C#转义字符
    Dijit、ExtJS、jQuery UI 异同浅析
    未雨绸缪 Plan to Throw One Away
  • 原文地址:https://www.cnblogs.com/Marlboro-pm/p/7127620.html
Copyright © 2011-2022 走看看