JQuery页面图片切换和新闻列表滚动效果的具体实现

这篇文章介绍了JQuery页面图片切换和新闻列表滚动效果的具体实现,有需要的朋友可以参考一下

最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下:

前段代码:

复制代码 代码如下:















   
   

        新闻中心
       

         
       

   






css文件夹包含一个样式表css.css:

复制代码 代码如下:

/* reset.css */
body{background:#fff;color:#444;height:100%;line-height:1.4;}
html{height:100%;overflow-y:scroll;-webkit-text-size-adjust:none;}
body,input,button,textarea,select,h1,h2,h3,h4,h5,h6{font:12px/1.5 Arial,Tahoma,Helvetica,"\5b8b\4f53",sans-serif;}
body,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,blockquote,th,td{margin:0;padding:0;}
img{vertical-align:bottom;}
/* base.css */
a:link,a:visited,a:hover,a:active{cursor:pointer;text-decoration:none;}
a:active,a:focus {-moz-outline:none;outline:none;ie-dummy:expression(this.hideFocus=true);}
a:hover {text-decoration:underline;}
li {list-style:none;}
ol li {display:inline;}
/*common.css*/
.outer{position:relative; overflow:hidden; background:url(../images/line.gif) repeat-x bottom; border-bottom:solid 1px #fff; margin:0 auto;}
.banner{position:absolute; left:50%; top:0; margin-left:-990px; height:400px; width:1980px;overflow:hidden;}
    .flash_img {
        overflow: hidden;
        width: 1980px;
        height: 400px;
        position: relative
    }
    .banner{height:400px;}

    .flash_img .img-box {
        position: absolute;
    }
    .flash_img .img-box li{float:left;}

    .flash_img img {
        display: block;
    }

    .flash_item {
        position: absolute;
        right: 510px;
        bottom: 10px;
        height: 12px;
    }

    .flash_item li {
        background:url(../images/flash_item.png-600) no-repeat right;
        color: #D94B01;
        cursor: pointer;
        float: left;
        font-size: 12px;
        height: 12px;
        line-height: 12px;
        margin-left: 15px;
        text-align: center;
        width: 12px;
    }

    .flash_item li.on
    {
        background-position:left;
        color: #FFFFFF;
        font-weight: bold;
        height: 12px;
        line-height: 12px;
        width: 12px;
    }

    .flash_item li img {
        display: block
    }   
/*default.css*/
.indexNews{width:700px; height:29px; bottom:0; left:50%; position:absolute; margin-left:-480px; z-index:999;}
.indexNews strong{color:#409dd9;float: left;}
.indexNews strong a{color:#409dd9;text-decoration:none;}
.indexNews .core{height:18px; line-height:18px; overflow:hidden;}
.indexNews .core span{color:#409dd9; margin-right:20px;}
.indexNews .core a{margin-left:10px;color:#666;}
.outer{height:440px;}

以上就是JQuery页面图片切换和新闻列表滚动效果的具体实现的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程