零基础学做网站教程

当前位置:

自己做网站如何制作幻灯片/轮播切换图

轮播切换图在很多网站上都能看到,它可以自动的轮播图片和广告,也可以手动的去切换图片。如下图就是一网站上的一个轮播图:

1

我们自己做网站时,怎么在我们自己的网站上制作出这样的幻灯片/轮播切换图呢?按照下面的方法就可以轻松的制作出与这个一毛一样的幻灯片/轮播切换图。

制作方法:

  1. 下载幻灯片/轮播切换图所需要的JS文件,下载地址:https://pan.baidu.com/s/1eS2w4IA
  2. 将下载下来的JS文件夹上传到自己的空间根目录下(一般为web文件夹)
  3. 用DW软件打开自己需要显示轮播切换图的网页,在</head>上方粘贴下面的代码,并改成自己网站的域名。(用于调用JS文件)3
    
    
    1
    2
    <script type="text/javascript" src="http://你的域名/js/jquery.js"></script>
    <script type="text/javascript" src="http://你的域名/js/scripts.js"></script>
  4. 在网页需要显示轮播切换图的位置粘贴下方的代码,来显示轮播切换图。
    
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    </pre>
    <div class="sswrap">
    <div id="slide-holder">
    <div id="slide-runner"> <a href="/"><img id="slide-img-1" src="http://你的域名/js/images/a1.jpg" class="slide" alt="" /></a> <a href="/"><img id="slide-img-2" src="http://你的域名/js/images/a2.jpg" class="slide" alt="" /></a> <a href="/"><img id="slide-img-3" src="http://你的域名/js/images/a3.jpg" class="slide" alt="" /></a> <a href="/"><img id="slide-img-4" src="http://你的域名/js/images/a4.jpg" class="slide" alt="" /></a> <a href="/"><img id="slide-img-5" src="http://你的域名/js/images/a5.jpg" class="slide" alt="" /></a> <a href="/"><img id="slide-img-6" src="http://你的域名/js/images/a6.jpg" class="slide" alt="" /></a> <a href="/"><img id="slide-img-7" src="http://你的域名/js/images/a4.jpg" class="slide" alt="" /></a>
    <div id="slide-controls">
    <p id="slide-client" class="text"><strong>联盟推荐: </strong><span></span></p>
    <p id="slide-desc" class="text"></p>
    <p id="slide-nav"></p>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"第一条的标题在这里","desc":"第一条的这里是描述信息"},{"id":"slide-img-2","client":"标题在这里","desc":"这里是描述信息"},{"id":"slide-img-3","client":"标题在这里","desc":"这里是描述信息"},{"id":"slide-img-4","client":"标题在这里","desc":"这里是描述信息"},{"id":"slide-img-5","client":"标题在这里","desc":"这里是描述信息"},{"id":"slide-img-6","client":"标题在这里","desc":"这里是描述信息"},{"id":"slide-img-7","client":"标题在这里","desc":"这里是描述信息"}];
    </script>
    </div>
    代码里的文字和链接地址可以更换成你自己网站的文字和链接。
  5. 在自己网站的CSS文件里,再放入以下的CSS代码来控制幻灯片/轮播切换图。
    
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    /*轮播图的样式*/
    section#lunbotu {
        box-shadow: 1px 4px 15px #A39F9F;
    }
    div.sswrap a {
        color: #fff;
    }
    div#slide-holder {
        width : 628px;
        height : 278px;
    }
    div#slide-runner {
        width : 628px;
        height : 278px;
        overflow : hidden;
        position : absolute;
    }
    div#slide-holder img {
        margin : 0;
        display : none;
        position : absolute;
    }
    div#slide-controls {
        left : 0;
        bottom : 0px;
        width : 628px;
        height : 46px;
        display : none;
        position : absolute;
    }
    div#slide-controls p.text {
        float : left;
        color : #fff;
        display : inline;
        font-size : 10px;
        line-height : 16px;
        margin : 15px 0 0 20px;
        text-transform : uppercase;
    }
    p#slide-nav {
        float : right;
        height : 24px;
        display : inline;
        margin : 11px 15px 0 0;
    }
    p#slide-nav a {
        float : left;
        width : 24px;
        height : 24px;
        display : inline;
        font-size : 11px;
        margin : 0 5px 0 0;
        line-height : 24px;
        font-weight : bold;
        text-align : center;
        text-decoration : none;
        background-position : 0 0;
        background-repeat : no-repeat;
    }
    p#slide-nav a.on {
        background-position : 0 -24px;
    }
    p#slide-nav a {
        background-image : url(http://你的域名/js/images/silde-nav.png);
    }
    #content_warp {
        margin-top: 20px;
    }
    article {
        width: 628px;
        display: inline-block;
        vertical-align: top;
    }
    aside {
        width: 347px;
        display: inline-block;
        margin-left: 20px;
    }
    section#silid {
        width: 628px;
        box-shadow: 1px 4px 15px #333;
    }
    div.newtitle {
        height: 45px;
        line-height: 45px;
        background: url(http://你的域名/js/images/title_bg.jpg) repeat-x;
        padding-left: 10px;
    }
    div.newtitle a {
        font-weight: 400;
        color: #444;
        font-size: 16px;
    }
    #newlist ul li {
        font-size: 0
    }
    #newlist ul li a {
        display: inline-block;
        vertical-align: top;
        color: #fff;
    }
    #newlist ul li a img {
        width: 315px;
        height: 165px
    }
    #newlist ul li a.newwz {
        width: 313px;
        height: 165px;
        background: #3598dc;
        padding: 10px 15px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
    }
    #newlist ul li a.newwz h3 {
        font-size: 18px;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #FFF;
    }
    #newlist ul li a.newwz p {
        font-size: 13px;
        text-indent: 2em;
        padding: 10px 0;
        height: 124px;
        overflow: hidden;
        box-sizing: border-box;
    }
    .sjx {
        width: 20px;
        height: 20px;
        position: absolute;
        left: -9px;
        top: 20px;
        background: #3598dc;
        transform: rotate(45deg);
    }
    section#hdlist_a li {
        display: inline-block;
        vertical-align: top;
        margin-right: 9px;
    }
    section#hdlist_a li:img{width:150px;height:150px}
    section#hdlist_a li:last-child {
        margin-right: 0;
    }
    section#hdlist_b {
        display:inline-block;
        width: 469px;
        margin-right: 9px;
        vertical-align:top;
        }
    section#hdlist_b li {
        width:100%;
        display:inline-block;
        vertical-align:bottom;
        white-space:nowrap;
        overflow:hidden;
        text-overflow: ellipsis;
        counter-increment: mycounter;
        margin-top:13px;
    }
    section#hdlist_b li:before {
        content: counter(mycounter);
        background: #444;
        color: #FFF;
        margin-right: 10px;
        padding:2px 7px;
    }
    section#hdlist_b li:nth-child(1):before,section#hdlist_b li:nth-child(2):before,section#hdlist_b li:nth-child(3):before{background:#39C}
    section#hdlist_b li:last-child:before{padding:4px;font-size:12px;}
    section#hdlist_b li a {color: #444;}
    section#hdlist_b li a:hover{text-shadow:1px 4px 9px #444;transition: text-shadow 1s linear;}
    section#hdlist_c {
        display: inline-block;
    }
    section#hdlist_c li:first-child,section#hdlist_c li:first-child img{width:150px;height:205px;margin-bottom:10px;}
    section#hdlist_c li:last-child,section#hdlist_c li:last-child img{width:150px;height:150px;}
    代码里面的图片路径同样要改成你网站的地址。
  6. 通过以上几步的操作,你的网站就会显示和上图一样的幻灯片/轮播切换图了。

 

Tags:

, ,

上一课: 下一课:

发表评论

*

* 绝不会泄露