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

来源：互联网发布：apache tomcat 7.0 7.0 编辑：程序博客网时间：2024/06/07 09:06

一、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;//没有选择图片时，第一张透明度为1for(var i=0;i<oImg.length;i++){oImg[i].onmouseover=function(){oPic.getElementsByTagName("img")[0].src=this.src;this.style.opacity=1;oImg[0].style.opacity=0.5;}oImg[i].onmouseleave=function(){oPic.getElementsByTagName("img")[0].src="img/1.jpg";this.style.opacity=0.5;oImg[0].style.opacity=1;}}</script></body></html>

阅读全文

0 0