轮播图的制作 ——前端

第一步需要下载两个js 文件

http://www.dowebok.com/demo/222/js/jquery.easyfader.min.js 下载 jquery.easyfader.min.js

http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js

中间还有两个左右箭头请记得一起下载

图片下载方法：打开谷歌调试工具，F12。找到图片右键看到 open in new tab 点击打开另存为即可。

效果图：

轮播图源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyfader.min.js"></script>
    <style>
        * { margin: 0; padding: 0 }
        ul, li { list-style: none; }
        /*lbox*/
        .lbox { width: 75%; margin: 0 auto ; overflow: hidden ;}
        /*banner*/
        .banner { width: 100%; overflow: hidden; }
        .fader { position: relative; width: 100%; height: 450px; /*padding-top: 50%;*/ font-family: "futura", arial; overflow: hidden; }
        .fader .slide { position: absolute; width: 100%; top: 0; z-index: 1; opacity: 0; }
        .fader .slide img { width: 100%; height: 450px; margin: auto; }
        .fader .prev, .fader .next { position: absolute; height: 32px; line-height: 32px; width: 40px; top: 50%; left: 50px; z-index: 4; margin-top: -25px; cursor: pointer; opacity: 0; transition: all 150ms; }
        .fader .prev { background: url(image/left.png) no-repeat }
        .fader .next { left: auto; right: 50px; background: url(image/right.png) no-repeat }
        .fader .pager_list { position: absolute; width: 100%; height: 26px; padding: 0; line-height: 40px; bottom: 0; text-align: center; z-index: 4; }
        .fader .pager_list li { border-radius: 10px; display: inline-block; width: 10px; height: 10px; margin: 0 7px; background: #fff; opacity: .9; text-indent: -9999px; cursor: pointer; transition: all 150ms; }
        .fader .pager_list li:hover, .fader .pager_list li.active { opacity: 1; background: #12b7de; }
        .banner:hover .fader_controls .page.prev { opacity: .7; left: 20px }
        .banner:hover .fader_controls .page.next { opacity: .7; right: 20px }

    </style>
</head>
<body>

<div class="lbox">
        <div class="banner">
            <div id="banner" class="fader">
                <li class="slide" style=" z-index: 3;  opacity: 1;"><a  target="_blank"><img src="image/1.jpg"></a></li>

                <li class="slide" style=""><a target="_blank"><img src="image/2.jpg"></a></li>

                <li class="slide" style=""><a target="_blank"><img src="image/3.jpg"></a></li>

                <li class="slide" style=" "><a target="_blank"><img src="image/4.jpg"></a></li>

                <li class="slide" style=" "><a target="_blank"><img src="image/5.jpg"></a></li>

                <li class="slide" style=" "><a target="_blank"><img src="image/6.jpg"></a></li>

                <div class="fader_controls">
                    <div class="page prev" data-target="prev"></div>
                    <div class="page next" data-target="next"></div>
                    <ul class="pager_list">

                    </ul>
                </div>
            </div>
    </div>
</div>
<script>
    //banner
    $('#banner').easyFader();
</script>
</body>
</html>

轮播图的制作 ——前端

猜你喜欢