2018.12.26 Jquery 使用 slideBox 实现滚动 效果

1.需要下载相关的插件，并引用进来

　　<link href="css/jquery.slideBox.css" rel="stylesheet" />

　　<script src="js/jquery-1.7.1.min.js"></script>

　　<script src="js/jquery.slideBox.min.js"></script>

2.在HTML页面中　设置好　要滚动的　图片的　路径　和　DIV 标签的 ID

　　<div id="demo1" class="slideBox">

　　　　<ul class="items">

　　　　　　<li><a href="#" title="标题一"><img src="img/1.jpg"></a></li>
　　　　　　<li><a href="#" title="标题二"><img src="img/2.jpg"></a></li>
　　　　　　<li><a href="#" title="标题三"><img src="img/3.jpg"></a></li>
　　　　　　<li><a href="#" title="标题四"><img src="img/4.jpg"></a></li>
　　　　　　<li><a href="#" title="标题五"><img src="img/5.jpg"></a></li>
　　　　</ul>
　　</div>

3.根据 ID 来为刚才 写的 DIV 设置 滚动属性

　　有三种设置方式都可以 实现滚动

　　　　<1>直接 Jquery（function（$）{

　　　　　　$.('#对应ID').slideBox();

　　　　}）

　　　　　　这是 默认样式 ，默认的样式为，左右轮播，滚动持续0.6秒，滚动延迟3秒，滚动效果swing，初始焦点第1张，点选按键自动隐藏，按键边框半径（IE8-只方不圆）5px

　　　　<2>$('#demo2').slideBox({

　　　　　　　　　direction:'top',//left,top#方向
               duration: 0.3,//滚动持续时间，单位：秒
               easing: 'linear',//swing,linear//滚动特效
               delay: 5,//滚动延迟时间，单位：秒
               startIndex: 1//初始焦点顺序
          });
　　　　<3>$('#demo3').slideBox({

                duration: 0.3,//滚动持续时间，单位：秒
                easing: 'linear',//swing,linear//滚动特效
                delay: 5,//滚动延迟时间，单位：秒
                hideClickBar: false,//不自动隐藏点选按键
                clickBarRadius: 10
            });

代码来自：https://www.cnblogs.com/shinelhui/archive/2013/12/11/3468832.html

 

转载于:https://www.cnblogs.com/yang845029748/p/10179436.html