图片切换 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片浏览</title>
<link href="1.css" rel="stylesheet" type="text/css">
</head>

<body>
    <h1>Snapshots</h1>
    <ul>
        <li><a href="pic/1.jpg" title="盛世美颜" onclick="showPic(this);return false;">帅照1</a></li>
        <li><a href="pic/2.jpg" title="帅哥" onclick="showPic(this);return false;">帅照2</a></li>
        <li><a href="pic/3.jpg" title="绝代美颜" onclick="showPic(this);return false;">帅照3</a></li>
        <li><a href="pic/4.jpg" title="朦胧帅" onclick="showPic(this);return false;">帅照4</a></li>
        <li><a href="pic/1.jpg" title="酷" onclick="showPic(this);return false;">帅照5</a></li>
        <li><a href="pic/2.jpg" title="傲娇" onclick="showPic(this);return false;">帅照6</a></li>
  <!--return false;onclick事件处理函数所触发的Javascript代码返回给它的值是false，
      （所以这个链接的默认行为没有被触发，所以不会打开图片查看器，不会打开一个新的网页。）即防止用户被带到目标链接窗口
        -->
    </ul>
    <p id="description">Choose a picture.</p>
   <img id="imgPlace" src="pic/1.jpg" alt="my image gallery">
    <script type="text/javascript">
      function showPic(thePic){

          //实现图片切换
          var source=thePic.getAttribute("href");
          var imgPlace=document.getElementById("imgPlace");
          imgPlace.setAttribute("src",source);
          //实现文本切换
          var title=thePic.getAttribute("title");
          var description=document.getElementById("description");
          description.innerHTML=title;
      }

    </script>
</body>
</html>
@charset "utf-8";
/* CSS Document */
/**{margin:0;padding:0;}*/

body{font-size:14px;
     width:100%;}

img{border:none;}

li{list-style:none;}
input,select,textarea{
                      outline:none;}

textarea{
         resize:none;}
h1{
    color:#333;
    background:transparent;}
a{
    text-decoration:none;
    color:#DB4E27;
    background:transparent;
    font-weight:bold;
 }
ul{
    width:900px;
    margin:0 auto;
    }
li{
    height:16px;
    line-height:16px;
    float:left;
    width:150px;
    /*margin:10px auto;*/
    margin-bottom:50px;
    text-align:center;
    }
p{
    clear:both;
    text-align:center;
    /*不定宽元素居中*/
    }
img{
    
    display:block;
    margin:5px auto;
    height:600px;
    width:840px;
    }

 

posted @ 2020-02-18 10:35  apple78  阅读(96)  评论(0)    收藏  举报