读书人

仿趣玩网5屏带标题的jQuery幻灯效果 分

发布时间: 2012-09-09 09:27:54 作者: rapoo

仿趣玩网五屏带标题的jQuery幻灯效果 分享

此代码参考网上修改的,上面要收费,我花了一小时整理修改的。。。还算节约了一瓶可乐钱。。。

?

下面附上代码和源码。。。

?

效果图

仿趣玩网5屏带标题的jQuery幻灯效果 分享

1.页面

@CHARSET "UTF-8";.slides {    overflow: hidden;    position: relative;    height: 380px;    width: 690px;}.slides * {    list-style: none outside none;    margin: 0;    padding: 0;}.slides ul {    list-style-type: none;}.slides li {    list-style-type: none;}.slides a img, *:link img, *:visited img {    border: 0 none;}.slides a:link {    color: #000000;    text-decoration: none;}.slides a:visited {    color: #000000;    text-decoration: none;}.slides a:hover {    color: #000000;    text-decoration: underline;}.slides .slide-pic {    overflow: hidden;    width: 690px;}.slides .slide-pic img {    height: 380px;    width: 690px;}.slides .slide-pic li {    display: none;}.slides .slide-pic li.cur {    display: block;}.slides .slide-li {    bottom: 0;    left: 0;    position: absolute;}.slides .slide-li li {    float: left;    height: 30px;    line-height: 30px;    margin-right: 1px;    text-align: center;    width: 137px;}.slides .slide-li a {    color: #FFFFFF;    display: block;    font-size: 14px;    height: 30px;    width: 137px;}.slides .slide-li a, .slide-li a:link, .slide-li a:visited {    color: #FFFFFF;}.slides .slide-li .cur a, .slide-li a:hover {    color: #333333;    text-decoration: none;}.slides .op li {    background: none repeat scroll 0 0 #666666;    opacity: 0.6;}.slides .op li.cur {    background: none repeat scroll 0 0 #FFFFFF;}.slides .slide-txt span {    display: none;}

?3.jquery(下载地址)

?

?

?

读书人网 >Web前端

热点推荐