找回密码
当前位置：前端开发者 > jQuery > 正文

前端开发 jQuery幻灯片

2018-07-29 分类：jQuery 阅读(864) 评论(0)

sql数据库前端开发java|idea前端开发打包|html5前端开发试题

代码片段 1

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″ />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
    <meta name=”renderer” content=”webkit” />
    <meta name=”keywords” content=”” />
    <meta name=”description” content=”” />
    <meta name=”copyright” content=”” />
    <title>前端开发 mac os x:jquery写的幻灯片，支持全屏切换和简易相册</title>
    <link rel=”stylesheet” type=”text/css” href=”http://www.yinjiazeng.com/static/css/base.css” media=”screen” />
    <style type=”text/css”>
        /* ui slide */
        .ui-slidewrap,
        .ui-slide {
            overflow: hidden;
            height: 100%;
        }
        .ui-slide-thumb-img p span img,
        .ui-slide li a img,
        .ui-slide li a {
            display: block;
            width: 100%;
            height: 100%;
        }
        .ui-slidewrap {
            position: relative;
        }
        .ui-slide-btn {
            display: none;
            position: absolute;
            top: 50%;
            width: 48px;
            height: 60px;
            margin-top: -30px;
            cursor: pointer;
            background: url(http://www.yinjiazeng.com/static/images/slide-btn.png) no-repeat;
        }
        .ui-slide-prev {
            background-position: 10px center;
            left: 0;
        }
        .ui-slide-next {
            background-position: -67px center;
            right: 0;
        }
        .ui-slide,
        .ui-slide li,
        .ui-slide li a {
            height: 100%;
            width: 100%;
        }
        .ui-slide {
            position: absolute;
            top: 0;
            left: 0;
        }
        .ui-slide li {
            float: left;
            background: url(http://www.yinjiazeng.com/static/images/loading.gif) no-repeat center;
        }
        .ui-slide-list {
            position: absolute;
            bottom: 10px;
            z-index: 1;
            width: 100%;
            text-align: center;
        }
        .ui-slide-list b {
            display: inline-block;
            overflow: hidden;
            margin-left: 5px;
            width: 10px;
            height: 10px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 0;
            background-color: #fff;
        }
        .ui-slide-list b.s-crt {
            background-color: #458A9B;
        }
        .ui-slide-title {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30px;
            line-height: 30px;
        }
        .ui-slide-title {
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
            background: rgba(0, 0, 0, 0.5);
            background: transparent\;
        }
        .ui-slide-title span {
            color: #fff;
        }
        .ui-slide-thumb {
            position: relative;
            margin-top: 10px;
            height: 71px;
        }
        .ui-slide-thumbtn {
            position: absolute;
            bottom: 1px;
            width: 15px;
            height: 64px;
            background: #939393 url(http://www.yinjiazeng.com/static/images/slide-thumb-btn.png) no-repeat;
            cursor: pointer;
        }
        .ui-slide-thumb-prev {
            left: 0;
            background-position: 3px center;
        }
        .ui-slide-thumb-next {
            right: 0;
            background-position: -39px center;
        }
        .ui-slide-thumbtn.s-dis {
            cursor: default;
            background-color: #ccc;
        }
        .ui-slide-thumb-img {
            overflow: hidden;
            position: relative;
            top: 0;
            margin: 0 30px;
            height: 100%;
        }
        .ui-slide-thumb-img p {
            position: absolute;
            left: 0;
            bottom: 0;
        }
        .ui-slide-thumb-img p span {
            position: relative;
            float: left;
            margin-right: 10px;
            padding: 1px;
            width: 96px;
            height: 60px;
            border: 1px solid #fff;
        }
        .ui-slide-thumb-img p span i {
            position: absolute;
            left: 50%;
            top: -12px;
            margin-left: -6px;
            display: none;
        }
        .ui-slide-thumb-img p span i {
            line-height: 0;
            font-size: 0;
            border: 6px dashed transparent;
            border-bottom-style: solid;
            border-bottom-color: #458A9B;
        }
        .ui-slide-thumb-img p span.s-crt {
            border-color: #458A9B;
        }
        .ui-slide-thumb-img p img,
        .ui-slide-thumb-img p span.s-crt i {
            display: block;
        }
        /* demo */
        #demo1 {
            height: 400px;
            position: relative;
        }
        #demo2 {
            width: 600px;
            height: 375px;
            position: relative;
        }
        #demo3 {
            width: 600px;
            height: 375px;
            position: relative;
        }
        #demo3 .ui-slide-list {
            display: none;
        }
        #demo3 .ui-slide-title {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id=”demo1″>
        <ul class=”ui-slide”>
            <li>
                <a href=”#” data-src=”http://www.yinjiazeng.com/static/images/1.jpg”></a>
            </li>
            <li>
                <a href=”#” data-src=”http://www.yinjiazeng.com/static/images/2.jpg”></a>
            </li>
            <li>
                <a href=”#” data-src=”http://www.yinjiazeng.com/static/images/3.jpg”></a>
            </li>
        </ul>
    </div>
    <div id=”demo2″ style=”margin:20px auto;”>
        <ul class=”ui-slide”>
            <li>
                <a href=”#”>
                    <img data-src=”http://www.yinjiazeng.com/static/images/1m.jpg” width=”600″ height=”375″ alt=”漩涡鸣人” />
                </a>
            </li>
            <li>
                <a href=”#”>
                    <img data-src=”http://www.yinjiazeng.com/static/images/2m.jpg” width=”600″ height=”375″ alt=”旗木卡卡西” />
                </a>
            </li>
            <li>
                <a href=”#”>
                    <img data-src=”http://www.yinjiazeng.com/static/images/3m.jpg” width=”600″ height=”375″ alt=”犬冢牙” />
                </a>
            </li>
        </ul>
    </div>
    <div id=”demo3″ style=”margin:20px auto;”>
        <ul class=”ui-slide”>
            <li>
                <a href=”#”>
                    <img data-src=”http://www.yinjiazeng.com/static/images/1m.jpg” data-thumb=”http://www.yinjiazeng.com/static/images/1t.jpg”
                     width=”600″ height=”375″ alt=”漩涡鸣人” />
                </a>
            </li>
            <li>
                <a href=”#”>
                    <img data-src=”http://www.yinjiazeng.com/static/images/2m.jpg” data-thumb=”http://www.yinjiazeng.com/static/images/2t.jpg”
                     width=”600″ height=”375″ alt=”旗木卡卡西” />
                </a>
            </li>
            <li>
                <a href=”#”>
                    <img data-src=”http://www.yinjiazeng.com/static/images/3m.jpg” data-thumb=”http://www.yinjiazeng.com/static/images/3t.jpg”
                     width=”600″ height=”375″ alt=”犬冢牙” />
                </a>
            </li>
            <li>
                <a href=”#”>
                    <img data-src=”http://www.yinjiazeng.com/static/images/4m.jpg” data-thumb=”http://www.yinjiazeng.com/static/images/4t.jpg”
                     width=”600″ height=”375″ alt=”宇智波佐助” />
                </a>
            </li>
            <li>
                <a href=”#”>
                    <img data-src=”http://www.yinjiazeng.com/static/images/5m.jpg” data-thumb=”http://www.yinjiazeng.com/static/images/5t.jpg”
                     width=”600″ height=”375″ alt=”春野樱” />
                </a>
            </li>
            <li>
                <a href=”#”>
                    <img data-src=”http://www.yinjiazeng.com/static/images/6m.jpg” data-thumb=”http://www.yinjiazeng.com/static/images/6t.jpg”
                     width=”600″ height=”375″ alt=”夕日红” />
                </a>
            </li>
            <li>
                <a href=”#”>
                    <img data-src=”http://www.yinjiazeng.com/static/images/7m.jpg” data-thumb=”http://www.yinjiazeng.com/static/images/7t.jpg”
                     width=”600″ height=”375″ alt=”白” />
                </a>
            </li>
            <li>
                <a href=”#”>
                    <img data-src=”http://www.yinjiazeng.com/static/images/8m.jpg” data-thumb=”http://www.yinjiazeng.com/static/images/8t.jpg”
                     width=”600″ height=”375″ alt=”山中井野” />
                </a>
            </li>
            <li>
                <a href=”#”>
                    <img data-src=”http://www.yinjiazeng.com/static/images/9m.jpg” data-thumb=”http://www.yinjiazeng.com/static/images/9t.jpg”
                     width=”600″ height=”375″ alt=”御手洗红豆” />
                </a>
            </li>
            <li>
                <a href=”#”>
                    <img data-src=”http://www.yinjiazeng.com/static/images/10m.jpg” data-thumb=”http://www.yinjiazeng.com/static/images/10t.jpg”
                     width=”600″ height=”375″ alt=”天天” />
                </a>
            </li>
        </ul>
    </div>
    <script type=”text/javascript” src=”http://www.yinjiazeng.com/static/js/jquery.js”></script>
    <script type=”text/javascript” src=”http://www.yinjiazeng.com/static/js/jquery.slide.js”></script>
    <script type=”text/javascript”>
        //清除IE6下鼠标出现加载闪烁图标BUG
        document.execCommand(‘BackgroundImageCache’, false, true);
        $(‘#demo1’).slide({ resize: true, backdrop: true, auto: false });
        $(‘#demo2’).slide({ width: 600 });
        $(‘#demo3’).slide({ width: 600, title: true, thumb: true, auto: false, fadeIn: true });
    </script>
</body>
</html>

css前端开发pdf|vue前端开发 pdf|.net跟前端开发有关吗

赞(0)
前端开发者 » 前端开发 jQuery幻灯片
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论