Jquery 实现图片轮换_jquery-tutorial js-php.cn

Jquery 实现图片轮换_jquery

WBOY

Lepaskan： 2016-05-16 16:17:39

asal

1295 人浏览过

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

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

页面+JS代码

复制代码代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

    图片切换

            8 7                     onclick=" return picChange(6)">6
                        5 4
            3                 title="2" onclick=" return picChange(2)">2                     onclick=" return picChange(1)" class="">1

测试介绍文件了啊

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;

}