bxSlider 在网页里添加幻灯片效果
幻灯片效果在网页上很常见,本文介绍用 bxSlider 轻松实现的方法。
bxSlider是什么
bxSlider 是用 JQuery 和 CSS 实现网页中幻灯片效果的工具。可在
下载到。
制作幻灯片
下载之后,引入 js 和 css 文件,同时 jquery 也是需要的。
加载图片。
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
再调用
$('.bxslider').bxSlider();
即可。
制作没有按钮且自动播放的幻灯片
<div class="bxslider">
<img src="data:images/mainImg.jpg" alt="">
<img src="data:images/mainImg_2.jpg" alt="">
<img src="data:images/mainImg_3.jpg" alt="">
<img src="data:images/mainImg_4.jpg" alt="">
</div>
不用 ul 和 li 的形式也是可以的。
另外,不需要按钮的话,css 就不必引入了,只要 js 文件就好。
其后,
slider = $('.bxslider').bxSlider({
auto: true,
autoControls: false,
pager: false,
controls: false,
touchEnabled: true
});
为使得窗口大小发生变化时,也不影响幻灯片的播放,还需要以下代码
window.onresize = function(){
var pi = slider.getCurrentSlide(); //获取当前的幻灯片
slider.destroySlider(); //删除当前幻灯片
slider = $('.bxslider').bxSlider({ //重新创建幻灯片
auto: true,
autoControls: false,
pager: false,
controls: false,
touchEnabled: true,
startSlide: pi //起始页为上一次的幻灯片
});
}
bxSlider 在网页里添加幻灯片效果的更多相关文章
- 【jquery】幻灯片效果
闲着无聊,用Jquery写了一个幻灯片效果. 我这人喜欢造轮子,除了jquery这种有强大开发团队的框架级别JS,其实的一些小程序都是尽量自己写. 一是因为怕出问题了没人问,二是自己写的改起来也方便. ...
- Android -- 真正的 高仿微信 打开网页的进度条效果
(本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...
- RCP:利用actionSet在菜单(menu)里添加内容
eclipse的菜单menu.工具栏toolbar乃至视图的上下文菜单contextmenu都是使用Action或Command实现的. Action即是 org.eclipse.jface.acti ...
- Codrops 教程:实现内容倾斜的 3D 幻灯片效果
今天给大家分享的优秀教程来自 Codrops 网站,实现一个内容倾斜的 3D 幻灯片效果.我们平常见到的都是那种水平或者垂直滚动的效果,这个倾斜的内容滑动效果相信会让你眼前一亮.因为使用了 CSS 3 ...
- css+js 控制幻灯片效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 一个很好的幻灯片效果的jquery插件--kinMaxShow
在做一些网站时,或多或少的要给网站做幻灯片效果,以前每次做这个效果,都是现成带网上找,找到的很多很杂,而且用完后就不会再理会更加不会去总结代码. 无意中找到了kinMaxShow这个插件,机会满足了我 ...
- ASP.NET网页动态添加、更新或删除数据行
ASP.NET网页动态添加.更新或删除数据行 看过此篇<ASP.NET网页动态添加数据行> http://www.cnblogs.com/insus/p/3247935.html的网友,也 ...
- 在网页边角添加GitHub链接图标
在网页边角添加GitHub链接图标 在页面添加HTML一下代码: <a href="https://github.com/you"> <img style=&qu ...
- js里添加的标签
js里添加的标签.网页加载此标签绑定的js函数时,由于没有标签,故无法执行函数. 例如: js中添加了一个button: html1 += "<td><button typ ...
随机推荐
- Cheatsheet: 2015 11.01 ~ 11.30
Golang Roadomatic: Node vs. Go Quick Guide to Golang for Java Developers 3 Go Gotchas Web Choosing a ...
- FreeSWITCH中文语音包
一.中文语音资源的获取 官方提供的资源:http://files.freeswitch.org/releases/sounds/ 自己录音 实在不行可以@我给你发一份. 二.中文资源的安装 英文资源的 ...
- 深入理解CSS网页布局-理论篇
在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...
- xshell 终端窗口目录显示为深蓝色的不易分辨问题
xshell更改终端窗口目录展示深蓝色的不易分辨 经常使用xshell远程连接服务器,使用ls命令,目录的颜色都是深蓝色, 如果终端窗口背景颜色是黑色的(对眼睛较好的黑色的背景色,大家一般都选择黑色背 ...
- Gradle build设置自动log开关
应用场景 通常情况下我们的apps发布后也就是release模式下log是不显示的,debug模式下是显示log的,但是在特殊情况下我们测试release包的时候需要log的时候,就无法使用Build ...
- Nginx模块之————RTMP模块在Ubuntu 14.04年的设置与搭建
Nginx的设置,RTMP在Ubuntu 14.04 https://www.vultr.com/docs/setup-nginx-rtmp-on-ubuntu-14-04
- android音视频点/直播模块开发
音视频 版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 随着音视频领域的火热,在很多领域(教育,游戏,娱乐,体育,跑步,餐饮,音乐等)尝试做音视频直播/点播功能,那么作为开发一个小白, ...
- __VA_ARGS__可变参数宏
#define qWiFiDebug(format, ...) qDebug("[WiFi] "format" File:%s, Line:%d, Function:%s ...
- Android Material适配 为控件设置指定背景色和点击波纹效果
Android Material适配 为控件设置指定背景色和点击波纹效果,有需要的朋友可以参考下. 大部分时候,我们都需要为控件设置指定背景色和点击效果 4.x以下可以使用selector,5.0以上 ...
- JS 概述
HTML+javascript+CSSjavascript 1995出现,JQuery -2006出现--React.js 阿里/美团/去哪儿 2013, Facebook发布UI框架库React,引 ...