垂直竖向，水平滚动插件插件

来源：互联网发布：网络红歌2014火爆歌曲编辑：程序博客网时间：2024/06/01 10:12
这里写图片描述
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><title>jQuery内容滚动/滑动插件BoxSlider演示-垂直/竖向_dowebok</title><style>.box-slider { width: 900px; margin: 0 auto;}.box-slider .box-slider-seta-up { display: block; height: 30px; margin: 0 5px; background: url(img/seta-up.png) no-repeat center center #674172;}.box-slider .box-slider-seta-down { display: block; height: 30px; margin: 0 5px; background: url(img/seta-down.png) no-repeat center center #674172;}.box-slider .box-slider-content { height: 420px; margin: 10px 0; overflow: hidden;}.box-slider .box-slider-move { position: relative; top: 0; left: 0;}.box-slider .item { float: left; width: 33.3%;}.box-slider .item span { display: block; height: 200px; background-color: #aea8d3; margin: 5px 5px;}.box-slider .last-item span { background-color: red; text-align: center; font-family: Arial, Helvetica, sans-serif; color: #fff;}.box-slider-move { overflow: hidden; *zoom:1;}</style></head><body><h1>垂直/竖向</h1><div class="box-slider" id="dowebok">    <a href="#" class="box-slider-seta-up"></a>    <div class="box-slider-content">        <div class="box-slider-move">            <div class="item"><span></span></div>            <div class="item"><span></span></div>            <div class="item"><span></span></div>            <div class="item"><span></span></div>            <div class="item"><span></span></div>            <div class="item"><span></span></div>            <div class="item"><span></span></div>            <div class="item"><span></span></div>            <div class="item"><span></span></div>            <div class="item"><span></span></div>            <div class="item"><span></span></div>            <div class="item"><span></span></div>            <div class="item"><span></span></div>            <div class="item"><span></span></div>            <div class="item"><span></span></div>            <div class="item last-item"><span></span></div>        </div>    </div>    <a href="#" class="box-slider-seta-down"></a></div><script src="js/jquery-1.11.3.min.js"></script><script src="js/jquery-boxSlider.js"></script><script>$(function() {    $('#dowebok').boxSlider({        orientation: 'vertical',    });});</script><!-- 以下信息与演示无关，可不必理会 --><style>body { margin: 0; border-left: 200px solid #ccc;}h1 { margin: 40px 0; font: 32px "Microsoft Yahei"; text-align: center;}.menu { position: absolute; left: 0; top: 0; bottom: 0; width: 200px; padding-top: 100px; font-family: Consolas,arial,"宋体"; background-color: #ccc;}.menu a { display: block; height: 40px; margin: 0 0 1px 2px; padding-left: 10px; line-height: 40px; font-size: 14px; color: #333; text-decoration: none;}.menu a:hover { background-color: #eee;}.menu .cur { color: #000; background-color: #fff !important;}.vad { margin: 50px 0 10px; font-family: Consolas,arial,宋体,sans-serif; text-align:center;}.vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}.vad a:hover { color: #fff; background-color: #000;}.thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid transparent;}</style><p class="vad">    <a href="http://www.dowebok.com/" target="_blank">dowebok.com</a>    <a href="http://www.dowebok.com/183.html" target="_blank">说 明</a>    <a href="http://www.dowebok.com/183.html" target="_blank">下 载</a></p><div class="menu">    <a class="cur" href="index.html">1、垂直/竖向</a>    <a href="index2.html">2、水平/横向</a>    <a href="index3.html">3、回调函数</a></div></body></html>
0 0