Jquery 实现图片轮换

前端技术 2023/09/09 JavaScript

网站首页没有一点动画怎么可以，我以前用过Flash As3做过图片切换，效果非常不错，可是麻烦，改变起来麻烦。一直都想自己做个图片切换效果，总认为比较麻烦，今天自己实践了一下，其实还比较简单。不过有个小问题，IE8不兼容模式下 设置有透明效果的div 样式添加失效了，但是我用谷歌，IE8兼容测试都ok。

反正是给自己记录的，也不多话了，js没有与页面分离，也没有做出插件。一个网站要不了几个这种效果，先实现了再说吧。最后的效果还是很高大上的。

页面+JS代码

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
    <title>图片切换</title>
    <script src=\"jquery-1.8.0.js\" type=\"text/javascript\"></script>
    <link href=\"picchange.css\" rel=\"stylesheet\" type=\"text/css\" />
    </head>
<body>
    <div class=\"picMain\">
        <div class=\"picimg\" id=\"divImg\">
            <img src=\"images/pic1.jpg\" class=\"pic\" />
            <img src=\"images/pic2.jpg\" class=\"pic\" />
            <img src=\"images/pic3.jpg\" class=\"pic\" />
            <img src=\"images/pic4.jpg\" class=\"pic\" />
            <img src=\"images/pic5.jpg\" class=\"pic\" />
            <img src=\"images/pic6.jpg\" class=\"pic\" />
            <img src=\"images/pic7.jpg\" class=\"pic\" />
            <img src=\"images/pic8.jpg\" class=\"pic\" />
        </div>
        <div class=\"picaction\" id=\"divLink\">
            <a href=\"images/pic8.jpg\" title=\"8\" onclick=\" return picChange(8)\" class=\"\">8</a> <a href=\"images/pic7.jpg\" title=\"7\" onclick=\" return picChange(7)\">7</a> <a href=\"images/pic6.jpg\" title=\"6\"
                    onclick=\" return picChange(6)\">6</a> <a href=\"images/pic5.jpg\" title=\"5\" onclick=\" return picChange(5)\">
                        5</a> <a href=\"images/pic4.jpg\" title=\"4\" onclick=\" return picChange(4)\">4</a>
            <a href=\"images/pic3.jpg\" title=\"3\" onclick=\" return picChange(3)\">3</a> <a href=\"images/pic2.jpg\"
                title=\"2\" onclick=\" return picChange(2)\">2</a> <a href=\"images/pic1.jpg\" title=\"1\"
                    onclick=\" return picChange(1)\" class=\"\">1</a>
        </div>
        <div id=\"picremark\" class=\"picRemark\">
            测试介绍文件了啊</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.stayed.cn/item/23917

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案