jQuery使用相关插件——图片浏览

最新推荐文章于 2021-06-04 20:59:41 发布

xiaofancn

最新推荐文章于 2021-06-04 20:59:41 发布

阅读量69

点赞数

分类专栏： web前端文章标签： jQuery CSS JavaScript IE HTML ViewUI

本文链接：https://blog.csdn.net/xiaofancn/article/details/83917174

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

效果图 （这个使用了jQuery的flashSlider插件）

html页面代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>图片展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="css/pic.css">
    <script type="text/javascript" src="jslib/jquery.js" charset="UTF-8"></script>
    <script type="text/javascript" src="jslib/jquery.flashSlider-1.0.min.js" charset="UTF-8"></script>
    <script type="text/javascript"charset="UTF-8">
        $(document).ready(function(){
            $("#slider").flashSlider();
        });
    </script>
</head>
<body>
<div id="slider">
        <ul>
            <li>
                <img src="images/01.jpg" alt="" /></li>
            <li>
                <img src="images/02.jpg" alt="" /></li>
            <li>
                <img src="images/03.jpg" alt="" /></li>
            <li>
                <img src="images/04.jpg" alt="" /></li>
            <li>
                <img src="images/05.jpg" alt="" /></li>
        </ul>
    </div>
</body>
</html>

css页面代码 css/pic.css

html { color: #000; background: #FFF;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
table {border-collapse: collapse;border-spacing: 0;}
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, strong, th, var {  font-style: normal;  font-weight: normal; }

li {
    list-style: none;
}

caption, th {
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
    font-variant: normal;
}

/* to preserve line-height and selector appearance */
sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/*to enable resizing for IE*/
input, textarea, select {
    *font-size: 100%;
}

/*because legend doesn't inherit in IE */
legend {
    color: #000;
}

del, ins {
    text-decoration: none;
}

/*容器*/

#slider ul, #slider li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*数字导航样式*/
#flashnvanum {
    bottom: 10px;
    position: absolute;
    right: 20px;
    width: 90px;
}

#flashnvanum span {
    background: transparent url(../images/flashbutton.gif) no-repeat scroll -15px 0;
    color: #86A2B8;
    cursor: pointer;
    float: left;
    font-family: Arial;
    font-size: 12px;
    height: 15px;
    line-height: 15px;
    margin: 1px;
    text-align: center;
    width: 15px;
}

#flashnvanum span.on {
    background: transparent url(../images/flashbutton.gif) no-repeat scroll 0 0;
    color: #FFFFFF;
    height: 15px;
    line-height: 15px;
    width: 15px;
}

xiaofancn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery使用相关插件——图片浏览

效果图（这个使用了jQuery的flashSlider插件）html页面代码&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt; &lt;t...
复制链接

扫一扫