| 网站首页 | 业界新闻 | 群组 | 人才 | 技术文章 | 下载频道 | 博客 | 代码贴 | 编程论坛
共有 106 人关注过本帖
标题:一个js轮播的例子
只看楼主 收藏
leeqihero
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:7
帖 子:86
专家分:95
注 册:2016-3-24
结帖率:33.33%
  问题点数:0  回复次数:0   
一个js轮播的例子
<html>
<head>
<meta charset="UTF-8">
<style>
*{
    margin: 0;
    padding: 0;
}
.div1{
    width: 640px;
    height: 200px;
    margin: 100px auto;
    background-color: #646464;
    position: relative;
    overflow: hidden;
}
.div1 ul{
    position:absolute;
    left:0;
    top:0;
    overflow: hidden;
    background-color: #3b7796;
}

.div1 ul li{
    float: left;
    width: 170px;
    height: auto;
    list-style: none;
}
.div1 ul li img{
    width:100%
}
</style>
</head>
<body>
  <input id=0 type="button" value="向左">
  <input id=1 type="button" value="向右">
  <div id=9 class="div1">
 
    <ul id=8>
      <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1518356895242&di=58ca6967583e8e56e0d73979462a166c&imgtype=0&src=http%3A%2F%2Fpic6.nipic.com%2F20100420%2F3017209_010600298768_2.jpg"></li>
      <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1518356895241&di=0b507b9d5289d64827734090fcff4338&imgtype=0&src=http%3A%2F%2Fpic10.photophoto.cn%2F20090310%2F0036036851540683_b.jpg"></li>
      <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1518356895240&di=0c8610361dee9e06e0183b4b64834419&imgtype=0&src=http%3A%2F%2Fimage.tianjimedia.com%2FuploadImages%2F2015%2F215%2F26%2F99ZQY3O34346.jpg"></li>
      <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1518356895238&di=6f5f04fe7cd1c5b85947d8a2ab32cd4b&imgtype=0&src=http%3A%2F%2Fpic16.photophoto.cn%2F20100910%2F0036036351061656_b.jpg"></li>
    </ul>
  </div>
</body>
<script>
$=function(a){return document.getElementById(a)};
 window.onload = function(){
    var 画轴 = $(8);
    var 速度 = 2;//初始化速度

    画轴.innerHTML += 画轴.innerHTML;//图片内容*2-----参考图(2)
    var oLi= document.getElementsByTagName('li');
    画轴.style.width = oLi.length*170+'px';//设置ul的宽度使图片可以放下

   
    $(0).onclick=function(){速度 = -2;}
    $(1).onclick=function(){速度 = 2;}
    function move(){
        if(画轴.offsetLeft<-(画轴.offsetWidth/2)){//向左滚动,当靠左的图4移出边框时
          画轴.style.left = 0;
        }

        if(画轴.offsetLeft > 0){//向右滚动,当靠右的图1移出边框时
          画轴.style.left = -(画轴.offsetWidth/2)+'px';
        }

        画轴.style.left = 画轴.offsetLeft + 速度 + 'px';
    }

   

    var timer = setInterval(move,30);//全局变量 ,保存返回的定时器
    $(9).onmouseout=function(){timer = setInterval(move,30);}
    $(9).onmousemove=function(){clearInterval(timer);}
}

</script>
</html>
2018-02-11 19:18







关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.125809 second(s), 9 queries.
Copyright©2004-2018, BCCN.NET, All Rights Reserved