Jquery 实现grid绑定模板_jquery-JS 튜토리얼-php.cn

网站首页没有一点动画怎么可以，我以前用过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;
        
}