图片切换样式

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>图片导航</title>
    <style>
    #s_mod_picnews_content {
        float: left;
        position: relative;
        right: 0;
        top: 0;
        border: 0;
        width:100%;
        overflow: hidden;
        display: block;
    }
    .s-hotnews-img-viewer {
        left: 0;
        top: 0;
        white-space: nowrap;
    }
    .s-hotnews-img-viewer a {
        outline: none;
    }
    .imgitem{
        width:100%;
    }
    #s-mod-enter:hover {
    }
    #s-mod-enter {
        left: 0;
    }
    #ad{
        background-color: white;
    }
    #s-mod-hotnews-img-prev:hover {
        left: 9%;
        filter: alpha(opacity=100);
        opacity: 1;
    }
    #s-mod-hotnews-img-prev {
        left: 9%;
    }
    #s-mod-hotnews-img-next:hover {
        right: 9%;
        filter: alpha(opacity=100);
        opacity: 1;
    }
    #s-mod-hotnews-img-next {
        right: 9%;
    }
    #s-mod-hotnews-img-prev, #s-mod-hotnews-img-next {
        position: absolute;
        width: 4.2%;
        height: 12.5%;
        min-width: 30px;
        min-height: 35px;
        z-index: 89;
        filter: alpha(opacity=90);
        opacity: 0.9;
        top: 42%;
        overflow: hidden;
        cursor: pointer;
    }
    #s-mod-hotnews-img-prev img, #s-mod-hotnews-img-next img{
        width:100%;
        height:100%;
    }
    </style>
</head>
<body>
<div id="main">
    <div id="ad">
        <div id="s_mod_picnews_content">
            <div class="s-mod-hotnews-img-controller">
                <a href="#" onclick="return false;" hidefocus="" id="s-mod-hotnews-img-prev"><img src="images/left.png"/></a>
                <a href="#" onclick="return false;" hidefocus="" id="s-mod-hotnews-img-next"><img src="images/right.png"/></a>
            </div>
            <div id="s_mod_hotnews_img_viewer" class="s-hotnews-img-viewer" style="left: 0px;">
                <img id="s-hotnews-img" class="imgitem" data-src="" src="index1.jpg">
            </div>
            <div style="clear: both"></div>
        </div>
        <div style="background-color: white;height:0.4em;width:100%;float:right;"></div>
        <div style="background-color: #70BDD9;height:0.8em;width:100%;float:right"></div>
        <div style="clear: both"></div>
    </div>
      
</div>
</body>
</html>

 

posted on 2013-11-28 09:00  tirestay  阅读(192)  评论(0)    收藏  举报

导航