js图片轮播

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
    <style type="text/css">
        *{margin:0;padding:0;}
        ul{list-style:none outside none}
        .box{width:200px;border:1px solid orange;margin:55px auto}
        .box1{height:25px;background:orange}
        .box2{width:200px;height:60px;overflow:hidden;position:relative}
        .box2 li{float:left;width:200px;height:60px;background:red;}
        .box2 .list{height:60px;position:absolute;top:0;left:0;width:40000%}
                 
    </style>
 </head>
 <body>
        <div class="box">
            <div class="box1"></div>
            <div class="box2" id="box2">
                    <ul class="list">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                        <li>11</li>
                        <li>12</li>
                    </ul>
            </div>
        </div>
         
   
    <script type="text/javascript">
    window.onload=function(){
        var box2=document.getElementById('box2');
        var oUl=box2.getElementsByTagName('ul')[0];
        var aLi=oUl.getElementsByTagName('li');
        var len=aLi.length;
        var w=aLi[0].offsetWidth;
        var index=0;
        var b=true;
        var timer=null;
        function next(){
            b?index++:index--;
            (index==0 || index==len-1) && (b=!b);
            startMove(-index*w);
        }
         
        setInterval(next,2000);
        function doMove(iTarget){
            var iSpeed=(iTarget-oUl.offsetLeft)/14;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);       
            oUl.offsetLeft == iTarget ? clearInterval(timer) : oUl.style.left = oUl.offsetLeft + iSpeed + "px";
        };
        function startMove(iTarget){//alert(1);
            clearInterval(timer);
            timer=setInterval(function(){
                doMove(iTarget);
            },30)
        };
    };
    </script>
 </body>
</html>

　　

posted @   深蓝色梦想  阅读(7063)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
点击右上角即可分享
微信分享提示