zoukankan html css js c++ java

css实现实现图片切换——使用a标签做锚点+overflow:hidden实现

一.a标签设置锚点

1、使用id定位：

<a href="#fifth">锚点跳到5F</a>
<p style="height: 1300px">
    中间有很多内容
</p>
<div id="fifth" style="height: 1300px"> 这里是5F的内容
</div>

这样的定位可以针对任何设置Id属性的标签来定位。

2、使用a标签的属性name定位：

<a href="#fifth">锚点跳到5F</a>
<p style="height: 1300px">
    中间有很多内容
</p>
<a name="fifth" > 这里是5F的内容
</a>
<div style="height: 1300px"> 这里是6F的内容 </div>

使用name属性只能针对a标签来定位，而对其他标签就不能起到定位作用。

3注意：锚点也可以跳转到其他网页，在“#”前面写网页

<div> <a href="photo/maodian.html#fifth">锚点跳到5F</a> </div>

跳到相对路径about/index.html页面的fifth

常常用于返回头部，返回主页，

二应用：图片切换

（1）先布局，每张图片都有左右两个锚点（a标签跳转）。点击左右小图片（锚点）可以跳转到对应图片位置

（2）给父容器.wrap设合适的宽高，设置 overflow: hidden，使之实现——点击图片切换

（3）源代码

 <ul class="wrap">
     <li id="pic1"><img class="Picture" src="images/pic1.jpg" alt="图片1"/>
         <a href="#pic9" class="left">
             <img src="images/pic9.jpg"/>
         </a>
         <a  href="#pic2" class="right">
             <img class="right" src="images/pic2.jpg">
         </a>
     </li>
     <li id="pic2"><img  class="Picture" src="images/pic2.jpg" alt="图片2"/>
         <a href="#pic1" class="left">
             <img src="images/pic1.jpg"/>
         </a>
         <a  href="#pic3" class="right">
             <img class="right" src="images/pic3.jpg">
         </a>
     </li>
     <li id="pic3"><img class="Picture" src="images/pic3.jpg" alt="图片3"/>
         <a  href="#pic2" class="left">
             <img class="right" src="images/pic2.jpg">
         </a>
         <a  href="#pic4" class="right">
             <img class="right" src="images/pic4.jpg">
         </a>
     </li>
     <li id="pic4"><img class="Picture" src="images/pic4.jpg" alt="图片4"/>
         <a  href="#pic3" class="left">
             <img class="right" src="images/pic3.jpg">
         </a>
         <a  href="#pic5" class="right">
             <img class="right" src="images/pic5.jpg">
         </a>
     </li>
     <li id="pic5"><img class="Picture" src="images/pic5.jpg" alt="图片5"/>
         <a  href="#pic4" class="left">
             <img class="right" src="images/pic4.jpg">
         </a>
         <a  href="#pic6" class="right">
             <img class="right" src="images/pic6.jpg">
         </a>
     </li>
     <li id="pic6"><img class="Picture" src="images/pic6.jpg" alt="图片6"/>
         <a  href="#pic5" class="left">
             <img class="right" src="images/pic5.jpg">
         </a>
         <a  href="#pic7" class="right">
             <img class="right" src="images/pic7.jpg">
         </a>
     </li>
     <li id="pic7"><img class="Picture" src="images/pic7.jpg" alt="图片7"/>
         <a  href="#pic6" class="left">
             <img class="right" src="images/pic6.jpg">
         </a>
         <a  href="#pic8" class="right">
             <img class="right" src="images/pic8.jpg">
         </a>
     </li>
     <li  id="pic8"><img class="Picture" src="images/pic8.jpg" alt="图片8"/>
         <a  href="#pic7" class="left">
             <img class="right" src="images/pic7.jpg">
         </a>
         <a  href="#pic9" class="right">
             <img class="right" src="images/pic9.jpg">
         </a>
     </li>
     <li  id="pic9"><img class="Picture" src="images/pic9.jpg" alt="图片9"/>
         <a href="#pic8" class="left">
             <img src="images/pic8.jpg"/>
         </a>
         <a  href="#pic1" class="right">
             <img class="right" src="images/pic1.jpg">
         </a>
     </li>
 </ul>

      /*  end  reset  css     */
        .wrap{
             900px;
            height: 700px;
            margin:0 auto;
            overflow: hidden;
        }
        .wrap li{
            100%;
            height:100%;
            background-color: #cecece;
        }
      /*  给中心图片左右小锚点设置定位。当然也可以是其他方式，如浮动*/
        .wrap li{ position: relative;}
        .wrap li .Picture,  .wrap li a{
            position: absolute;
        }
        .wrap li .Picture{
            top: 50%;  left: 50%;
            margin-left: -300px;
            margin-top: -230px;
            600px;  height: 460px;
        }
        .wrap li a{
            top: 40%;
            150px;
            height: 200px;
        }
        .wrap  a.left{
            left: 0;
        }
        .wrap  a.right{
            right: 0;
        }
        .wrap  a img{
             100%;
            height: 100%;}

三、应用-图片切换2

（1）先布局：左右两栏。点击右侧锚点跳转到对应图片位置

（2）给左侧的父容器设合适的宽高，设置 overflow: hidden，使之实现点击图片切换