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

2018.12.26 Jquery 使用 slideBox 实现滚动效果相关推荐

训练日志 2018.12.26
今天看了一天网络流最大流,看到自闭...全程就是 wc 这也能实现,wc 这还能实现,wc 为什么这个模版的运行跟我手撸的结果不一样...跪了... 下午学院开会的时候跟实验室的几个大佬交流了一下进度 ...
2018.12.26 作业
作业链接:https://pan.baidu.com/s/1wdO5CIBgM3fJW8xAUI2Ajg 提取码:u8qr 一.笔记选择结构:Java提供了if控制语句和switch控制语句来实现. ...
jQuery实现自动左右滚动效果的代码实例
2019独角兽企业重金招聘Python工程师标准>>> jQuery实现自动左右滚动效果的代码实例思路: 点击滚动模式下,是为点击(向前/向后/数字)添加click事件,通过控制展 ...
jquery实现多行滚动效果
2019独角兽企业重金招聘Python工程师标准>>> 有时jquery博客想,整那么多demo有什么用呢? 有些前端新手朋友不会,为他们服务吧.还有喜欢自己留点字迹,也好方便自己回 ...
水平滚动选择图片 html,jquery实现图片水平滚动效果代码分享
本文实例讲述了jquery实现图片水平滚动效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果 ...
html图片自动滚动播放器,jQuery+css实现图片滚动效果(附源码)
bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间 ...
JQuery——BreakingNews.js新闻滚动效果
BreakingNews.js新闻滚动效果这里是直观效果展示使用这种效果我们需要三个包 jq.min.js BreakingNews.css breakingnews.js breakingnew ...
[2018.12.26]BZOJ1022 [SHOI2008]小约翰的游戏John
发现此题是Anti-Nim游戏. 实在太模板了,以至于我不必再写一次. 其实就是懒之前接触博弈论比较少,以至于这是第一次接触此类问题. code: #include<bits/stdc++.h ...
2018/12/26
1 GeoServer配置参数 1.1. war包版本GeoServer信息: <version 2.8.8 /> <GeoTools版本 14.2 /> <GeoWeb ...
《惢客创业日记》2018.12.26（周三）重要的事情说两遍　上篇
由于,昨天分享的<惢客初心论>内容较多,对与您了解惢客有很重要的帮助,因此,今天继续分享<惢客初心论>. 惢客到底是谁的惢客?这个问题需要反复思考,而且需要时时刻刻思考.一提到 ...

2018.12.26 Jquery 使用 slideBox 实现滚动效果

2018.12.26 Jquery 使用 slideBox 实现滚动效果相关推荐

最新文章

热门文章

2018.12.26 Jquery 使用 slideBox 实现滚动 效果

2018.12.26 Jquery 使用 slideBox 实现滚动 效果相关推荐

最新文章

热门文章

2018.12.26 Jquery 使用 slideBox 实现滚动效果

2018.12.26 Jquery 使用 slideBox 实现滚动效果相关推荐