Jquery 实现图片轮换(2)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
    <title>图片切换</title>
    <script src="https://www.jb51.net/jquery-1.8.0.js" type="text/javascript"></script>
    <link href="https://www.jb51.net/picchange.css" type="text/css" />
    </head>
<body>
    <div>
        <div>
            <img src="https://www.jb51.net/images/pic1.jpg" />
            <img src="https://www.jb51.net/images/pic2.jpg" />
            <img src="https://www.jb51.net/images/pic3.jpg" />
            <img src="https://www.jb51.net/images/pic4.jpg" />
            <img src="https://www.jb51.net/images/pic5.jpg" />
            <img src="https://www.jb51.net/images/pic6.jpg" />
            <img src="https://www.jb51.net/images/pic7.jpg" />
            <img src="https://www.jb51.net/images/pic8.jpg" />
        </div>
        <div>
            <a href="https://www.jb51.net/images/pic8.jpg" title="8">8</a> <a href="https://www.jb51.net/images/pic7.jpg" title="7">7</a> <a href="https://www.jb51.net/images/pic6.jpg" title="6"
                   >6</a> <a href="https://www.jb51.net/images/pic5.jpg" title="5">
                        5</a> <a href="https://www.jb51.net/images/pic4.jpg" title="4">4</a>
            <a href="https://www.jb51.net/images/pic3.jpg" title="3">3</a> <a href="https://www.jb51.net/images/pic2.jpg"
                title="2">2</a> <a href="https://www.jb51.net/images/pic1.jpg" title="1"
                   >1</a>
        </div>
        <div>
            测试介绍文件了啊</div>
    </div>
</body>
</html>

css的实现

复制代码 代码如下:


.picMain
{
    margin: auto;
    overflow: hidden;
    width: 1000px;
    height: 400px;
    position: relative;
}
.picimg
{
    width: 10000px;
    height: 400px;
    background-color: #000000;
    position: absolute;
    top: 0px;
}
.picRemark
{
    position: absolute;
    width: 500px;
    height: 50px;
    bottom: 0px;
    left: 0px;
    color: #FFFFFF;
    text-indent: 2em;
}
.picRemark a
{
    color: #FFFFFF;
    text-decoration: none;
}
.picRemark a:hover
{
    text-decoration: underline;
}
.picaction
{
    position: absolute;
    width: 1000px;
    height: 50px;
    background-color: #000000;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    overflow: auto;
    bottom: 0px;
    left: 0px;
    text-align: right;
}
.picaction a
{
    border: 1px solid #C0C0C0;
    width: 30px;
    height: 30px;
    float: right;
    line-height: 30px;
    text-decoration: none;
    text-align: center;
    color: #FFFFFF;
    font-weight: bold;
    margin-top: 10px;
    display: block;
    margin-right: 10px;
}
.pic
{
    width: 1000px;
    height: 400px;
    float: left;
}
.picselect
{
    background-color: #919191;
}

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgfpxx.html