实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
AخA
 
1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
    <head>
4
        <meta charset="utf-8">
5
        <title>anoSlide演示8种焦点图轮播效果</title>
6
        <style>
7
            .carousel { position: relative; width: 900px; margin: 0 auto;  background: url(/api/jq/anoSlide/images/loader.gif) center center no-repeat;}
8
            .carousel .next, .carousel .prev { display: none; position: absolute; bottom:20px; left:50%; width: 56px; height: 56px; margin-top:-28px; z-index:9999; cursor:pointer;}
9
            .carousel .prev { margin-left: -60px; background: url(/api/jq/anoSlide/images/prev.png) 0 0 no-repeat; }
10
            .carousel .next { margin-right: -60px;  background: url(/api/jq/anoSlide/images/next.png) 0 0 no-repeat;}
11
            .carousel li { display: none;}
12
            .carousel li img { display: block; width: 100%; border: 0 none;}
13
            .paging { position:absolute; z-index:9998;}
14
            .paging a { float:left; width: 40px; height: 40px; background:url(/api/jq/anoSlide/images/dots.png) 0px -40px no-repeat; cursor:pointer;}
15
            .paging a:hover, .paging a.current { background:url(/api/jq/anoSlide/images/dots.png) 0px 0px no-repeat;}
16
        </style>
17
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
18
        <script src="/api/jq/anoSlide/js/jquery.anoslide.js"></script>
19
        <script>
20
            $(function() {
21
                $('.carousel ul').anoSlide({
22
                    items: 1,