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

前端技术 2023/09/04 JavaScript

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

前段代码：

复制代码 代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<link rel=\"stylesheet\" href=\"css/css.css\" type=\"text/css\" />
<script type=\"text/javascript\" src=\"js/jquery-1.7.2.min.js\"></script>
<script type=\"text/javascript\" src=\"js/kxbdSuperMarquee.js\"></script>
<script type=\"text/javascript\" src=\"js/indexPic.js\"></script>
<script type=\"text/javascript\">
jQuery(document).ready(function() {
        $(\'.indexNews div.core\').kxbdSuperMarquee({
            isEqual:false,
            distance:18,
            time:4,
            //btnGo:{up:\'#goU\',down:\'#goD\'},
            direction:\'up\'
        });
    });
</script>
</script>
<title></title>
</head>
<body>
<div class=\"outer\">
    <div class=\"banner\">
        <div class=\"flash_img\" id=\"fadImgs\">
            <ul class=\"img-box\"  style=\"\">

                <li><a target=\"_blank\" href=\"#\"><img alt=\"首页AD-1\" src=\"Images/ad-1.jpg\" width=\"1980\" height=\"449\"></a></li>

                <li><a target=\"_blank\" href=\"#\"><img alt=\"首页AD-2\" src=\"images/ad-2.jpg\" width=\"1980\" height=\"449\"></a></li>

                <li><a target=\"_blank\" href=\"#\"><img alt=\"首页AD-3\" src=\"images/ad-3.jpg\" width=\"1980\" height=\"449\"></a></li>

                <li><a target=\"_blank\" href=\"#\"><img alt=\"首页AD-4\" src=\"Images/ad-4.jpg\" width=\"1980\" height=\"449\"></a></li>

            </ul>
        </div>
    </div>
    <div class=\"indexNews\">
        <strong class=\"fl mr10\"><a href=\"#\">新闻中心</a></strong>
        <div class=\"core\">
          <ul>

            <li><a href=\"#\" title=\"新闻1\">新闻标题1</a></li>

            <li><a href=\"#\" title=\"新闻2\">新闻标题2</a></li>

            <li><a href=\"#\" title=\"新闻3”\">新闻标题3</a></li>

            <li><a href=\"#\" title=\"新闻4\">新闻标题4</a></li>

            <li><a href=\"#\" title=\"新闻5\">新闻标题5</a></li>

          </ul>
        </div>
    </div>
</div>
<script type=\"text/javascript\">
    $(function() {
        var len = $(\".img-box li\").length;
        var imgW = $(\".img-box li\").width() * len;
        $(\".img-box\").width(imgW);
        $(\".info_slide_dots span\").hide();
    })
    $(\"#fadImgs\").slideImg({
        speed: \"slow\",
        timer: 5000
    });
</script>
</body>
</html>

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) 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;}

本文地址：https://www.stayed.cn/item/9006

转载请注明出处。

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

我的博客

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

我的标签

随笔档案