Home >Web Front-end >HTML Tutorial >html fade carousel

html fade carousel

WBOY
WBOYOriginal
2016-08-04 08:53:181582browse

This is what I downloaded from a template when I used it before. Now that I have used it again, I looked it up again. To prevent me from forgetting it next time, I write this down:

Download plugins: jquery-2.1.4.min.js and slider.js

Homepage carousel page homepage index.html:

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/1999/xhtml"</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html; charset=utf-8"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="css/banner.css"</span><span style="color: #ff0000;"> rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="banner_tabs"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="flexslider"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="slides"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">title</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> target</span><span style="color: #0000ff;">="_blank"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="1010"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="450"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="background: url(images/bgi1.jpg) no-repeat center;"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="images/alpha.png"</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">title</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="1010"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="450"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="background: url(images/bgi2.jpg) no-repeat center;"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="images/alpha.png"</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">title</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="1010"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="450"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="background: url(images/bgi3.jpg) no-repeat center;"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="images/alpha.png"</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">title</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="1010"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="450"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="background: url(images/bgi4.jpg) no-repeat center;"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="images/alpha.png"</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">title</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="1010"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="450"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="background: url(images/bgi5.jpg) no-repeat center;"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="images/alpha.png"</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flex-direction-nav"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flex-prev"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="javascript:;"</span><span style="color: #0000ff;">></span>Previous<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flex-next"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="javascript:;"</span><span style="color: #0000ff;">></span>Next<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">ol </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="bannerCtrl"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="flex-control-nav flex-control-paging"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>4<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>5<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/jquery-2.1.4.min.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/slider.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #000000;">
$(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">() {
    </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> bannerSlider </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Slider($(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#banner_tabs</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">), {
        time: 36</span><span style="background-color: #f5f5f5; color: #000000;">00</span><span style="background-color: #f5f5f5; color: #000000;">,
        delay: </span><span style="background-color: #f5f5f5; color: #000000;">400</span><span style="background-color: #f5f5f5; color: #000000;">,
        event: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">hover</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,
        auto: </span><span style="background-color: #f5f5f5; color: #0000ff;">true</span><span style="background-color: #f5f5f5; color: #000000;">,
        mode: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">fade</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,
        controller: $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#bannerCtrl</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">),
        activeControllerCls: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">active</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">
    });
    $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#banner_tabs .flex-prev</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).click(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">() {
        bannerSlider.prev()
    });
    $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#banner_tabs .flex-next</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).click(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">() {
        bannerSlider.next()
    });
})
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

html style banner.css

            <span style="color: #008000;">/*</span><span style="color: #008000;">index.html轮播</span><span style="color: #008000;">*/</span><span style="color: #800000;">
ul</span>{<span style="color: #ff0000;">list-style-type</span>:<span style="color: #0000ff;"> none</span>;}<span style="color: #800000;">
ul li</span>{<span style="color: #ff0000;">list-style-type</span>:<span style="color: #0000ff;"> none</span>;}<span style="color: #800000;">
.flexslider </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">1200px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">400px</span>;<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;"> overflow</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0 auto</span>;}<span style="color: #800000;">
.flexslider .slides li </span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">list-style-type</span>:<span style="color: #0000ff;"> none</span>;}<span style="color: #800000;">
.flex-direction-nav a </span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 70px</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;"> 70px</span>;<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;"> 99em</span>;<span style="color: #ff0000;">overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;"> -35px 0 0</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> url(../images/ad_ctr.png) no-repeat</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">z-index</span>:<span style="color: #0000ff;"> 10</span>;<span style="color: #ff0000;">cursor</span>:<span style="color: #0000ff;"> pointer</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">filter</span>:<span style="color: #0000ff;"> alpha(opacity=0)</span>;<span style="color: #ff0000;">-webkit-transition</span>:<span style="color: #0000ff;"> all .3s ease</span>;<span style="color: #ff0000;">border-radius</span>:<span style="color: #0000ff;"> 35px</span>;}<span style="color: #800000;">
.flex-direction-nav .flex-next </span>{<span style="color: #ff0000;">background-position</span>:<span style="color: #0000ff;"> 0 -70px</span>;<span style="color: #ff0000;">right</span>:<span style="color: #0000ff;"> 0</span>;}<span style="color: #800000;">
.flex-direction-nav .flex-prev </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;"> 0</span>;}<span style="color: #800000;">
.flexslider:hover .flex-next </span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0.8</span>;<span style="color: #ff0000;">filter</span>:<span style="color: #0000ff;"> alpha(opacity=25)</span>;}<span style="color: #800000;">
.flexslider:hover .flex-prev </span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0.8</span>;<span style="color: #ff0000;">filter</span>:<span style="color: #0000ff;"> alpha(opacity=25)</span>;}<span style="color: #800000;">
.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover </span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">filter</span>:<span style="color: #0000ff;"> alpha(opacity=50)</span>;}<span style="color: #800000;">
.flex-control-nav </span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">bottom</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;"> center</span>;}<span style="color: #800000;">
.flex-control-nav li </span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;"> 0 2px</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">*display</span>:<span style="color: #0000ff;"> inline</span>;}<span style="color: #800000;">
.flex-control-paging li a </span>{<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> url(../images/dot.png) no-repeat 0 -16px</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">text-indent</span>:<span style="color: #0000ff;"> -99em</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">cursor</span>:<span style="color: #0000ff;"> pointer</span>;}<span style="color: #800000;">
.flex-control-paging li a.flex-active,
.flex-control-paging li.active a </span>{<span style="color: #ff0000;">background-position</span>:<span style="color: #0000ff;"> 0 0</span>;}<span style="color: #800000;">
.flexslider .slides a img </span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;"> block</span>;}

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn