logo星之书笔记

WienDesign | 左手代码,右手诗词

avatar

网名:Oliver Wien | 奥利弗·韦恩

职业:Web前端设计师、网页设计

现居地:陕西省-西安市-雁塔区

Phone:+86 182 2052 3738

Email:oliverwien@126.com

超简单响应式轮播图

这是一个超级简单的响应式轮播图,基于jquery封装的代码,整体下来不到3kb。它最原本在GitHub上放着,不过后来项目被移除,所以在在这里给大家分享一下。

unslider.png

<!DOCTYPE html>
<html>
<head>
<title>Wien Designs</title>
<meta name="author" content="Wien Designs">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
*{margin:0;padding:0;}
.banner{position:relative;width:100%;overflow:auto;font-size:18px;line-height:24px;text-align:center;color:rgba(255,255,255,.6);background:#5b4d3d;box-shadow:0 1px 2px rgba(0,0,0,.25);}
.banner ul{list-style:none;width:300%;}
.banner ul li{display:block;float:left;width:33%;min-height:350px;background-size:100% 100%;}
.banner .inner{padding:160px 0 110px;}
.banner h1,.banner h2{font-size:40px;line-height:52px;color:#fff;}
.banner .btn{display:inline-block;margin:25px 0 0;padding:9px 22px 7px;clear:both;color:#fff;font-size:12px;font-weight:bold;text-transform:uppercase;text-decoration:none;border:2px solid rgba(255,255,255,.4);border-radius:5px;}
.banner .btn:hover{background:rgba(255,255,255,.05);}
.banner .btn:active{-webkit-filter:drop-shadow(0 -1px 2px rgba(0,0,0,.5));}
.banner .dots{position:absolute;left:0;right:0;bottom:20px;}
.banner .dots li{display:inline-block;width:10px;height:10px;margin:0 4px;text-indent:-999em;border:2px solid #fff;border-radius:6px;cursor:pointer;opacity:.4;}
.banner .dots li.active{background:#fff;opacity:1;}
.banner .arrows{position:absolute;bottom:20px;right:20px;color:#fff;}
.banner .arrow{display:inline;padding-left:10px;cursor:pointer;}
</style>
</head>
<body>
<div class="banner">
  <ul>
    <li style="background-image: url('img/sunset.jpg');">
      <div class="inner">
        <h1>The jQuery slider that just slides.</h1>
        <p>就是这个不到3kb的插件!没有奇特的特效或无用的标签。</p>
    </li>
    <li style="background-image: url('img/wood.jpg');">
      <div class="inner">
        <h1>Fluid, flexible, fantastically minimal.</h1>
        <p>使用幻灯片中的任何HTML,使用CSS扩展。 你有完全的控制权。</p>
    </li>
  </ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/unslider.min.js"></script>
<script>
 
            if(window.chrome) {
                $('.banner li').css('background-size', '100% 100%');
            }
            $('.banner').unslider({
                arrows: true,
                speed: 500,               //为每张幻灯片设置动画的速度(以毫秒为单位)
                delay: 3000,              //幻灯片动画之间的延迟(以毫秒为单位)
                complete: function() {},  //在每个幻灯片动画后调用的函数
                keys: true,               //启用键盘(左,右)箭头快捷方式
                dots: true,               //显示导航点
                fluid: true            //支持响应式设计,可能打破无响应的设计
            });
        </script>
</body>
</html>


Comments 0