无限滚动实现不了-慕课网

无限滚动实现不了

来源：4-1 无限滚动

a0a9l1

2016-09-06 07:30

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			*{ padding: 0px; margin: 0px;}
			ul{ list-style: none;}
			a{text-decoration: none;}
		
			
			
			.container{ width: 300px; height: 200px; border: 1px solid #000;position: relative; margin: 0 auto;}
			.container .banner{ width: 2100px; height: 200px; position: absolute;  z-index: 1;}
			.container .banner li{ float: left;}
			.container .left{ width: 30px; height: 30px; color: #FFFFFF; font-size: 20px; 
							text-align: center; line-height: 30px; background-color: rgba(0,0,0,.3);
							 position: absolute; top: 85px; left: 10px; z-index: 2; display: none;}
			.container .right{ width: 30px; height: 30px;color: #FFFFFF; font-size: 20px;
							 text-align: center; line-height: 30px;background-color: rgba(0,0,0,.3);
							  position: absolute; top: 85px; right: 10px; z-index: 2; display: none;}
			.container:hover .left{ display: block;}
			.container:hover .right{ display: block;}

			.container .left:hover{background-color: rgba(0,0,0,.7)}
			.container .right:hover{background-color: rgba(0,0,0,.7)}
			
			.container .point{ position: absolute; top: 180px; left: 110px; z-index: 2;}
			.container .point span{width: 7px; height: 7px; border-radius:5px ; 
								background: #FFFFFF; border: 1px solid #000000; float: left; margin-left: 5px; display: block;}
			.container .point span:hover{ background: #ff8503;}
		
		</style>
		
	</head>
	<body>
		
		
		
		<div class="container">
			<ul id="ban" class="banner" style="position: absolute; left: 0px;">
				<li><img src="../img/img5.jpg" /></li>
				<li><img src="../img/img1.jpg" /></li>
				<li><img src="../img/img2.jpg" /></li>
				<li><img src="../img/img3.jpg" /></li>
				<li><img src="../img/img4.jpg" /></li>
				<li><img src="../img/img5.jpg" /></li>
				<li><img src="../img/img1.jpg" /></li>
			</ul>
				
			<div class="point">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
			</div>
			
			
			<a id="prev" class="left">  <  </a>
			<a id="next" class="right"> >  </a>

		</div>
		<script>
			window.onload = function()
			{
			var prev = document.getElementById("prev")
			var next = document.getElementById("next")
			
			var ban = document.getElementById("ban")
			
			
			function srolleft(offset)
			{	
				
				 ban.style.left = parseInt(ban.style.left) + offset + "px"
				 
				 if (ban.style.left > -300) {
					ban.style.left = -1500 + "px"
					
				}
				
				if (ban.style.left < -1500) {
					ban.style.left = -300 + "px"
					
				}
				}
				
				
			prev.onclick = function()
				{
				srolleft(-300)
				}
			
			next.onclick = function()
				{
				 srolleft(300)
				}
			
				}
		
	
		</script>
	</body>
</html>

写回答关注

1回答

Dulmcat: 2016-09-06 16:31:05

已采纳

<script>
    window.onload = function() {
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");
        var ban = document.getElementById("ban");

        function srolleft(offset) {
            var newOffSet = parseInt(ban.style.left) + offset;
            ban.style.left = newOffSet + "px";
            if (newOffSet > -300) {
                ban.style.left = -1500 + "px";
            }
            if (newOffSet < -1500) {
                ban.style.left = -300 + "px";
            }

        }

        prev.onclick = function() {
            srolleft(300);
        }

        next.onclick = function() {
            srolleft(-300);
        }
    }
    </script>

把你的代码完善了下，改动了一点就好了

1 0

a0a9l1

非常感谢！

2016-09-10 15:16:56

共 1 条回复 >

焦点图轮播特效

通过本教程学习您将能掌握非常实用的焦点图轮播特效的制作过程

65234 学习 · 611 问题

查看课程

相似问题

无限滚动实现不了