js-大图滚动

最新推荐文章于 2022-03-14 19:06:55 发布

ITCBD_l

最新推荐文章于 2022-03-14 19:06:55 发布

阅读量199

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/ITCBD_l/article/details/86619989

版权

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>大图滚动</title>

	<style>
		.box{
			position:  relative;
			width: 9999px;
		}
		.box img{
			float: left;
			width: 200px;

		}
		.show{
			width: 600px;
			overflow: hidden;
			margin: auto;
		}
		.left,.right{
			overflow: hidden;
			float: left;
		}
        .btn .btn_l{
             float:left;
            width: 50px;
            height: 30px;
            border-radius: 5px;
             border: 1px solid;
             font-size: 16px;
             text-align: center;
             line-height: 30px;
             margin-right: 10px;
             background: red;
        }
        .btn{

            width: 150px;
            height: 51px;
            margin: 10px auto;
        }
        .btn .btn_r{
             float:left;
            width: 50px;
            height: 30px;
            border-radius: 5px;
            border: 1px solid;
             font-size: 16px;
             text-align: center;
             line-height: 30px;
             background: green;
        }
	</style>
</head>
<body>
    <!-- 可视区域 -->
	<div class="show" id="show">
        
		<div class="box" id="box">
            <!-- 向左移动的图片 -->
			<div class="left">
				<img src="image/1.jpg" alt="">
				<img src="image/2.jpg" alt="">
				<img src="image/3.jpg" alt="">
				<img src="image/4.jpg" alt="">
				<img src="image/5.jpg" alt="">
                <!-- 向右移动的图片 -->
			</div><div class="right">
				<img src="image/1.jpg" alt="">
				<img src="image/2.jpg" alt="">
				<img src="image/3.jpg" alt="">
				<img src="image/4.jpg" alt="">
				<img src="image/5.jpg" alt="">
			</div>
		</div>
	</div>
    <div class="btn" id="btn">
        <span class="btn_l">left</span>
        <span class="btn_r">right</span>
    </div>
</body>
	<script>
	var box = document.getElementById('box');
     var btn = document.getElementById('btn').getElementsByTagName('span');
     var show = document.getElementById('show');
	var _index = 0;
    var _bl= true;
    var c = -1;
	var Ti = setInterval('move(_bl)',5);
    var Ti2;
     function move(bl){
            if(bl){
                _index -=2;
               if(_index  <= -1000){
                _index=0;
            } 
           
        }else{
            _index +=2;
             if(_index >= 0){
                _index=-1000;
            }
        }

           
         
         if(_index % 200 == 0){
            //清除对象
             clearInterval(Ti);
             Ti2 = setTimeout(function(){
                Ti = setInterval('move(_bl)',5);
            }, 1000);
         }
          box.style.left = _index + 'px';
            }
        btn[0].onclick = function(){
             _bl = true;   
        } 
        btn[1].onclick = function(){
            _bl = false;
        }
        //  鼠标移进对像的时候
        show.onmouseover = function(){
            // console.log(1);
            clearInterval(Ti);
            clearInterval(Ti2);
        }
        // 鼠标移出对象的 时候
        show.onmouseout = function(){
            // console.log(2)
             clearInterval(Ti);
            clearInterval(Ti2);
             Ti2 = setTimeout(function(){
                Ti = setInterval('move(_bl)',5);
            }, 10);
        }

	</script>
</html>

ITCBD_l

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-大图滚动

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;大图滚动&lt;/title&gt; &lt;style&gt; .box{ position: relative; widt
复制链接

扫一扫