js 轮播图(原生)


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        *{margin: 0; padding: 0;}

        #container{
            width: 600px;
            height: 400px;
            border: 2px solid black;
            overflow: hidden;
            position: relative;
            margin: 50px auto;
        }

        #list{
            position: absolute;
            width: 3000px;
            height: 400px;
            z-index: 1;
        }
        #list img{
            float: left;
            width: 600px;
            height: 400px;
        }

        .button{
            width: 150px;
            height: 10px;
            position: absolute;
            left: 250px;
            bottom: 20px;
            z-index: 2;
        }

        .button span{
            display: inline-block;
            margin-right: 5px;
            width: 20px;
            height: 20px;
            padding: 2px;
            border: 1px solid black;
            cursor: pointer;
            text-align: center;
            background: pink;
            border-radius: 50%;
        }

        .button .on{
            background: yellow;
        }

        .arrow{
            width: 40px;
            height: 40px;
            font-size: 36px;
            font-weight: bold;
            text-decoration: none;
            z-index: 2;
            position: absolute;
            top: 180px;
            cursor: pointer;
            opacity: 0.3;
            display: none;
        }
        #container:hover .arrow{
            display: block;
        }
        .arrow:hover{
            opacity: 0.6;
        }

        #prev{left: 20px;}
        #next{right: 20px;}

    </style>

</head>
<body>

<div id="container">

    <!--存放图片-->        <!--若果不加一个-->
    <div id="list" style="left: -600px;">
        <img src="img/1.jpg" alt="1" />
        <img src="img/10.jpg" alt="2" />
        <img src="img/2.jpg" alt="3" />
        <img src="img/3.jpg" alt="4" />

    </div>

    <!--索引的小白点-->
    <div class="button">
        <span class="on">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>

    </div>

    <!--上一页    和   下一页-->
    <a href="javascript:;" class="arrow" id="prev"> &lt; </a>
    <a href="javascript:;" class="arrow" id="next"> &gt; </a>

</div>
		<script type="text/javascript">
			//获取存放图片的div
			var list=document.getElementById("list");
			//左按钮
			var prev=document.getElementById("prev");
			//右按钮
			var next=document.getElementById("next");
			
			//首先我们先实现 手动点击切换图片
			function animation(offset){
//										大div距离左侧的位置		图片的宽
				var newLeft = parseInt(list.style.left)+offset;
				list.style.left=newLeft+"px";
                console.log(list.style.left)
				//无线循环  newleft的距离小于-1800 回到0位置
				if (newLeft<-1800) {
					list.style.left=0+"px";
				}
				//当小于0也就是在第一张图片时候 往前走 会去第四张图片
				if (newLeft>0) {
					//回到第四张  通过图片距离左侧的距离让图片动起来
					list.style.left=-1800+"px";
				}	
			}
	
			//自动轮播 在全局范围内定义计时器
			var timer;
			//定义播放函数
			function play(){
				timer =setInterval(function(){
					//调用下一页的点击事件
					next.onclick();
				},1500);
			}
			//js代码加载一次就调用一次 自动播放
			play();
			
			//定义停止函数
			function stop(){
				clearInterval(timer)
			}
			container=document.getElementById("container");
			//鼠标移入时，调用停止函数
			container.onmouseover=stop;
			//鼠标移出时，调用播放函数
			container.onmouseout=play;
			//小圆点随着图片的变化而变化
			var sp=document.getElementsByClassName("button")[0].getElementsByTagName("span")
			//根据index不同的值，让对应的小圆点亮起来
			var index=1;
			//让小圆点亮起来
			function buttonsShow(){
				for (var i=0; i<sp.length; i++) {
					if (sp[i].className=="on") {
						sp[i].className="";
					}
				}
				//数组下标从0开始，index从1开始，所以sp减1
				sp[index-1].className="on";
			}
			//左按钮(上一页)
			prev.onclick=function(){
				//循环播放
				index-=1;
//				如果小于
				if (index<1) {
//					让他回到第四张
					index=4
				}
				buttonsShow();
				animation(600);				
			}
			//右按钮(下一页)
			next.onclick=function(){
				index+=1;
//				如果于4(向右移动)
				if(index>4){
					//让他回到第一张
					index=1
				}
				buttonsShow();
				animation(-600);
			}
	
		</script>
		
	</body>
</html>
Jason–json
发布了96 篇原创文章 · 获赞 26 · 访问量 7304
私信关注
猜你喜欢
