照片轮播

最新推荐文章于 2024-06-24 17:55:20 发布

小鱼爱吃火锅

最新推荐文章于 2024-06-24 17:55:20 发布

阅读量285

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/daoshen1314/article/details/103284094

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.鼠标不放在照片上，照片自动轮播
2.鼠标放到照片上，停止轮播，滞留在当前页面
3.左右切换按钮，实现上一张照片和下一张照片切换
4.右下角标签按钮实现照片之间切换


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.wrap {
			margin:0px;
			padding: 0px;
			width: 1029px;
			height: 513px;
			overflow: hidden;
			position: relative;
			top:0px;
			left: 0px;
		}
		.wrap ul {
			margin: 0px;
			padding: 0px;
			position: absolute;
			display: inline;
		}
		.wrap ul li {
			display: inline;
		}
		.wrap ul li img {
			width: 1029px;
			height: 513px;
		}
		.wrap ol {
			margin: 0px;
			padding: 0px;
			position: absolute;
			right:204px;
			bottom: 28px;
			list-style: none;
			display: inline;
		}
		.wrap ol li {
			height: 20px;
			width: 20px;
			background: #ccc;
			border: solid 1px #666;
			margin-left: 15px;
			color: #000;
			float: left;
			line-height: center;
			text-align: center;
			cursor: pointer;
			border-radius: 50%;
		}
		.wrap ol .on {
			background: #0033FF;
			color: #fff;
		}
		#turn1{
			top: 219px;
			left: 9px;
			font-size:5em;
			font-weight: 100;
			color:#F0F0F0 ;
		}
		#turn2{
			left:958px ;
			top: 219px;
			font-size:5em;
			font-weight: 100;
			color: #F0F0F0;
		}
		#turn1 :hover{
			color: #6699CC;
			background: #888888;
		}
		#turn2 :hover{
			color: #6699CC;
			background:#888888;
		}
		</style>
		 <script type="text/javascript">
		    window.onload=function(){
		    var wrap=document.getElementById('wrap'),
		    pic=document.getElementById('pic').getElementsByTagName("li"),
		    list=document.getElementById('list').getElementsByTagName('li'),
		    index=0,
		    timer=null;
		    // 定义并调用自动播放函数
		    timer = setInterval(autoPlay, 3000);
		    
		    // 鼠标划过整个容器时停止自动播放
		    wrap.onmouseover = function () {
		    clearInterval(timer);
		    }
		    
		    // 鼠标离开整个容器时继续播放至下一张
		    wrap.onmouseout = function () {
		    timer = setInterval(autoPlay, 3000);
		    }
		    // 遍历所有数字导航实现划过切换至对应的图片
		    for (var i = 0; i < list.length; i++) {
		    list[i].onmouseover = function () {
		    clearInterval(timer);
		    index = this.innerText - 1;
		    changePic(index);
		    };
		    };
		    //自动播放
		    function autoPlay () {
		    if (++index >= pic.length) index = 0;
		    changePic(index);
		    }
			//右切换按钮
			function autoPlay1 () {
			if (++index >= pic.length) index = 0;
			changePic(index);
			}
			document.getElementById("turn2").onclick=function(){
				autoPlay1 ();
			}
		    //左切换按钮
			function autoPlay2 () {
			if (--index <0) index = pic.length-1;
			changePic(index);
			}
		    document.getElementById("turn1").onclick=function(){
				autoPlay2 ();
			}
			// 定义图片切换函数
		    function changePic (curIndex) {
		    for (var i = 0; i < pic.length; ++i) {
		    pic[i].style.display = "none";
		    list[i].className = "";
		    }
		    pic[curIndex].style.display = "inline-block";
		    list[curIndex].className = "on";
		    }
		    
		    };
		 
		 </script>

	</head>
	<body>
		<div class="wrap" id="wrap">
		    <ul id="pic">
		       <li><img src="1.jpg" alt=""></li>
		       <li><img src="2.jpg" alt=""></li>
		       <li><img src="3.jpg" alt=""></li>
		     </ul>
			 <ul id="turn1">
				 <li><</li>
			 </ul>
			 <ul id="turn2">
			 	 <li >></li>
			 </ul>
		    <ol id="list">
		       <li class="on">1</li>
		       <li>2</li>
		       <li>3</li>
		     </ol>
		  </div>
	</body>
</html>