分别用CSS3和js两种方法实现图片切换

本文链接：https://blog.csdn.net/lechen1013/article/details/73744165

一、css3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="CSS/pic.css" rel="stylesheet"/>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            border:0;
            background:transparent;
            font-size: 100%;
        }
        ul li{
            list-style:none;
        }
        #gallery{
            width:630px;
            position:relative;
            margin:10px auto 0;
            background:#000;
            min-height:360px;
            padding:20px;
        }
        #gallery h1{
            color:#fff;
            font-size: 2em;
            font-weight: bold;
        }
        #gallery ul{
            width:140px;
            float:right;
            margin:15px 0 20px;
        }
        #gallery ul li{
            float: left;
            margin:10px 8px 0 0;
        }
        #gallery ul li span{
            display: block;
            position:relative;
            width:60px;
            height:80px;
            border:1px solid #fff;
            border-radius:4px;
            overflow:hidden;
        }
        #gallery ul li span img{
            position:relative; 
            top:-200px;
            left:-100px;

            opacity:0.3;
        }
        #gallery ul li span.touch img,#gallery ul li:hover span img{
            opacity: 1;

        }
        #gallery ul li div img{
            width:460px;
            height:288px;
        }
        #gallery ul li:hover div {
            display: block;
        }
        #gallery ul li div{
            display:none;/* 除第一张外的大图都不显示 */
            position:absolute;/* 将大图绝对定位脱离文档流 */
            top:80px;
            left:20px;
            border:5px solid #fff;
        }


        .clearfix {
            height:0;
            clear: both;/* 创建一个空元素清除浮动 */
        }

    </style>
</head>
<body>
<div id="gallery">
    <h1 style="padding-left:100px;">纯CSS3相册效果</h1>
    <ul>
        <li> 
            <span class="touch"><img src="img1/pic1.jpg" /></span>
            <div style="display: block;"><img src="img1/pic1.jpg" />
            </div> 
        </li>
        <li> 
            <span><img src="img1/pic2.jpg" /></span>
            <div><img src="img1/pic2.jpg" /></div> 
        </li>
        <li> 
            <span><img src="img1/pic3.jpg" /></span>
            <div><img src="img1/pic3.jpg" /></div> 
        </li>
        <li> 
            <span><img src="img1/pic4.jpg" /></span>
            <div><img src="img1/pic4.jpg" /></div> 
        </li>
        <li> 
            <span><img src="img1/pic5.jpg" /></span>
            <div><img src="img1/pic5.jpg" /></div> 
        </li>
        <li> 
            <span><img src="img1/pic6.jpg" /></span>
            <div><img src="img1/pic6.jpg" /></div> 
        </li>
    </ul>
    <div class="clearfix"></div>
</div>
</body>
</html>

二、js

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8>
	<meta name="keywords" content="关键词,关键词之间用英文逗号分隔">
	<meta name="description" content="描述">
	<title>js相册效果</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		#photos{
			width:850px;
			height:600px;
			background:#000;
			margin:20px auto;
		}
		#photos h1{
			font-family:"Microsoft Yahei",sans-serif;
			color:#fff;
			padding:30px 0 30px 100px;
			text-shadow:2px 2px 6px #eee;
		}
		#photos div{
			float:left;
			width:450px;
			height:430px;
			padding:10px;
			background:#eee;
			margin:0px 30px;
			overflow:hidden;
		}
		#photos ul{
			float:left;
			width:250px;
			height:430px;
			margin:20px 0 20px 35px;
		}
		#photos ul li{
			float:left;
			list-style:none;
			width:100px;
			height:120px;
			overflow:hidden;
			border:2px solid #eee;
			border-radius:8px;
			margin:5px;
			

		}
		#photos ul li img{
			opacity:0.5;
			filter:Alpha(opacity:0.5);
		}
		#photos ul li:hover {
			
		}


	</style>
</head>
<body>
	<div id=photos>
		<h1>js相册效果</h1>
		<div id="pic"><img src="img/1.jpg" alt="照片" width="450px" height="430px"></div>
		<ul id="list">
			<li><img src="img/1.jpg"></li>
			<li><img src="img/2.jpg"></li>
			<li><img src="img/3.jpg"></li>
			<li><img src="img/4.jpg"></li>
			<li><img src="img/5.jpg"></li>
			<li><img src="img/6.jpg"></li>
		</ul>
	</div>
<script type="text/javascript">
	var oPhotos=document.getElementById("photos");
	var oPic=document.getElementById("pic");
	var oList=document.getElementById("list");
	var oImg=oList.getElementsByTagName("img");
	oImg[0].style.opacity=1;//没有选择图片时，第一张透明度为1
	for(var i=0;i<oImg.length;i++){
		oImg[i].οnmοuseοver=function(){
			oPic.getElementsByTagName("img")[0].src=this.src;
			this.style.opacity=1;
			oImg[0].style.opacity=0.5;
		}
		oImg[i].οnmοuseleave=function(){
			oPic.getElementsByTagName("img")[0].src="img/1.jpg";
			this.style.opacity=0.5;
			oImg[0].style.opacity=1;
		}
	}
</script>
</body>
</html>