图片切换

最新推荐文章于 2023-08-21 13:55:36 发布

qianlingvip

最新推荐文章于 2023-08-21 13:55:36 发布

阅读量559

点赞数 1

本文链接：https://blog.csdn.net/zhangqling/article/details/84570551

版权

功能描述：

1、进入页面后，自动切换图片。

2、鼠标滑过下面小图时，对应的opacity变成高亮状态，鼠标离开时除了当前大图对应的高亮显示外其余暗色显示。

3、鼠标点击小图时，切换为对应的大图，并且该小图高亮居中显示。

4、点击上一张和下一张时切换图片。

5、鼠标放在大图或者小图片上时停止自动切换图片。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>运动实例-图片切换</title>
	<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1">
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-color: #333;
		}
		@font-face {
		  font-family: 'iconfont';
		  src: url('font/iconfont.eot');
		  src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
		  url('font/iconfont.woff') format('woff'),
		  url('font/iconfont.ttf') format('truetype'),
		  url('font/iconfont.svg#iconfont') format('svg');
		}
		.iconfont{
		  font-family:"iconfont" !important;
		  font-size:16px;font-style:normal;
		  -webkit-font-smoothing: antialiased;
		  -webkit-text-stroke-width: 0.2px;
		  -moz-osx-font-smoothing: grayscale;
		  font-size: 60px;
		  color: #fff;
		  text-align: center;
		}
		marquee{
			color: #fff;
		}
		.max{
			width: 900px;
			height: 400px;
		/*	overflow: hidden;*/
			margin:3px auto 0;
		}
		ul{
			list-style: none;
			
		}
		.max ul{
			position: relative;
			height: 400px;
			width: 900px;
		}
		.max ul li{
			position: absolute;
			top: 0;
			left: 0;
			height: 400px;
			width: 900px;
		}
		.max ul a{
			width: 450px;
			height: 400px;
			background-color: orange;
			position: absolute;
			top: 0;
			left: 0;
			filter: alpha(opacity=0);
			opacity: 0;
			text-decoration: none;
			z-index: 990;
		}
		.max ul .zh_right{
			top: 0;
			left: 450px;
			background-color: red;
		}
		.max ul li{
			filter:alpha(opacity=100);
			opacity: 1;
		}
		.max ul li img{
			width: 100%;
			height: 100%;
		}
		.pre{
			transform: rotate(180deg);
		}
		.pre,.next{
			width: 100px;
			height: 80px;
			background-color: #2ba6bd;
			border-radius: 10px;
			position: absolute;
			top:160px;
			left: 14px;
			z-index: 999;
			line-height: 80px;
			cursor: pointer;
			filter: alpha(opacity=10);
			opacity: 0.1;
		}
		.next{
			left: auto;
			right: 14px;
		}
		.clearfix:after{
			content: "";
			display: block;
			clear: both;
		}
		.clearfix{
			zoom: 1;
		}
		.min{
			width: 900px;
			height: 186px;
			margin: 6px auto;
			overflow: hidden;
			position: relative;
			background-color: #bbb;
		}
		.min ul{
			position: absolute;
			top: 0;
			left: 0;
		}
		.min ul li{
			width: 300px;
			height: 186px;
			float: left;
			overflow: hidden;
			filter: alpha(opacity=50);
			opacity: 0.5;
		}
		.min ul li img{
			width: 100%;
			height: 100%;
		}
		.box3,.box4{
			width: 910px;
			margin: 30px auto 0;
			text-align: center;
			color: #fff;
		}
		.box3 img{
			display: inline-block;
			width: 450px;
			height: 620px;
			padding-top: 2px;

		}
		.box4 img{
			display: inline-block;
			width: 450px;
			height: 680px;
			float: left;
			margin-top: 10px;
		}
		.box4 img:nth-child(2n){
			float: right;
		}
	</style>
	<script src="move.js"></script>
	<script>
		window.onload=function(){
			var oMax=document.getElementById("max");
			var oMaxUl=oMax.getElementsByTagName("ul")[0];
			var aBigLi=oMaxUl.getElementsByTagName("li");
			var oSpan1=oMaxUl.getElementsByTagName("span")[0];
			var oSpan2=oMaxUl.getElementsByTagName("span")[1];
			var oPre=oMaxUl.getElementsByTagName("a")[0];
			var oNext=oMaxUl.getElementsByTagName("a")[1];
			var oMin=document.getElementById("min");
			var oMinUl=oMin.getElementsByTagName("ul")[0];
			var oLi=oMinUl.getElementsByTagName("li");
			var iMinZindex=2;
			var iNew=0;
			var timer10=null;
			oSpan1.onmouseover=oPre.onmouseover=function(){
				startMove(oSpan1,'opacity',96);
				clearInterval(timer10);
			}
			oSpan2.onmouseover=oNext.onmouseover=function(){
				startMove(oSpan2,'opacity',96);
				clearInterval(timer10);
			}
			oSpan1.onmouseout=oPre.onmouseout=function(){
				startMove(oSpan1,'opacity',10);
				time();
			}
			oSpan2.onmouseout=oNext.onmouseout=function(){
				startMove(oSpan2,'opacity',10);
				time();
			}
			oMinUl.style.width=(oLi[0].offsetWidth)*(oLi.length)+'px';
			


			for (var i = 0; i < oLi.length; i++) {
				oLi[i].index=i;
				oLi[i].onmouseover=function(){
					startMove(this,'opacity',100);
					clearInterval(timer10);
				}
				oLi[i].onmouseout=function(){
					time();
					if (this.index!=iNew) {
						startMove(this,'opacity',50);
					}
					
				}

				//给下边bann图加点击动画
				oLi[i].onclick=function(){
					if (this.index==iNew) return;
					iNew=this.index;
					tab();
				}


			}
			//切换图片
			function tab(){
				for (var i = 0; i < oLi.length; i++) {
						startMove(oLi[i],'opacity',50);
					}
					startMove(oLi[iNew],'opacity',100);
					
					aBigLi[iNew].style.zIndex=iMinZindex++;
					aBigLi[iNew].style.height=0;
					startMove(aBigLi[iNew],'height',oMaxUl.offsetHeight);
					if (iNew==0) {
						startMove(oMinUl,'left',0);
					}else if (iNew==oLi.length-1) {
						startMove(oMinUl,'left',-(iNew-2)*oLi[0].offsetWidth);
					}else{
						startMove(oMinUl,'left',-(iNew-1)*oLi[0].offsetWidth);
					}
					
			}
			//上一张
			oSpan1.onclick=function(){
				iNew--;
				if (iNew==-1) {
					iNew=oLi.length-1;
				}
				
				tab();
			}

			//下一张
			oSpan2.onclick=function(){
				iNew++;
				if (iNew==oLi.length) {
					iNew=0;
				}
				tab();
			}

			//自动播放
			function time(){
				timer10=setInterval(function(){
					iNew++;
					if (iNew==oLi.length) {
						iNew=0;
					}
					tab();
				},3000);
			}
			time();

		}
	</script>
</head>
<body>
	<marquee behavior="" direction="">欢迎使用领哥自动切换图片网页，领哥祝您生活愉快！</marquee>
	<div class="max" id="max">
		<ul>
			<a href="javascript:;"></a>
			<a href="javascript:;" class="zh_right"></a>
			<span class="pre iconfont">&#xe62d;</span>
			<span class="next iconfont">&#xe62d;</span>
			<li style="z-index: 1"><img src="19.jpg" alt=""></li>
			<li><img src="7.jpg" alt=""></li>
			<li><img src="2.jpg" alt=""></li>
			<li><img src="5.jpg" alt=""></li>
			<li><img src="6.jpg" alt=""></li>
			<li><img src="8.jpg" alt=""></li>
			<li><img src="9.jpg" alt=""></li>
			<li><img src="10.jpg" alt=""></li>
			<li><img src="11.jpg" alt=""></li>
		</ul>
	</div>
	<div class="min" id="min">
		<ul class="clearfix">
			<li style="opacity: 1;filter: alpha(opacity:100)"><img src="19.jpg" alt=""></li>
			<li><img src="7.jpg" alt=""></li>
			<li><img src="2.jpg" alt=""></li>
			<li><img src="5.jpg" alt=""></li>
			<li><img src="6.jpg" alt=""></li>
			<li><img src="8.jpg" alt=""></li>
			<li><img src="9.jpg" alt=""></li>
			<li><img src="10.jpg" alt=""></li>
			<li><img src="11.jpg" alt=""></li>
		</ul>
	</div>
	<div class="box3">
		<h2>放松一下风景图片欣赏</h2>
		<img src="16.jpg" alt="">
		<img src="17.jpg" alt="">
		<img src="18.jpg" alt="">
		<img src="20.jpg" alt="">
	</div>
	<div class="box4 clearfix">
		<h2>萌翻动物团图片欣赏专栏</h2>
		<img src="24.jpg" alt="">
		<img src="25.jpg" alt="">
		<img src="26.jpg" alt="">
		<img src="27.jpg" alt="">
		<img src="28.jpg" alt="">
		<img src="29.jpg" alt="">
		<img src="30.jpg" alt="">
		<img src="31.jpg" alt="">
		<img src="32.jpg" alt="">
		<img src="21.jpg" alt="">
		<img src="22.jpg" alt="">
		<img src="23.jpg" alt="">
	</div>
</body>
</html>

js文件如下：

//此运动函数为封装成函数，支持宽度，高度，字体大小，透明度变化。三个参数分别为obj：谁运动。attr：什么属性运动。
//iTarget:目标位置运动。
//获得非行间样式
function getStyle(obj,attr){
	if (obj.currentStyle) {
		return obj.currentStyle[attr];
	}else{
		return getComputedStyle(obj,false)[attr];
	}
}
//运动函数
function startMove(obj,attr,iTarget,fn){
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var iCur=0;
		if (attr=='opacity') {
			iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
		}else{
			iCur=parseInt(getStyle(obj,attr));
		}
	
		var iSpeed=(iTarget-iCur)/8;
		iSpeed=iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
		if (iTarget==iCur) {
			clearInterval(obj.timer);
			if (fn) {
				fn();
			}
			
		}else{
			if (attr=='opacity') {
				obj.style.filter='alpha(opacity:'+iCur+iSpeed+')';
				obj.style.opacity=(iCur+iSpeed)/100;
			}else{
				obj.style[attr]=iCur+iSpeed+'px';
			}
		}
	},30);
}

成果展示：