幻灯片效果在网页上很常见,本文介绍用 bxSlider 轻松实现的方法。

bxSlider是什么

bxSlider 是用 JQuery 和 CSS 实现网页中幻灯片效果的工具。可在

http://bxslider.com/

下载到。

制作幻灯片

下载之后,引入 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 在网页里添加幻灯片效果的更多相关文章

  1. 【jquery】幻灯片效果

    闲着无聊,用Jquery写了一个幻灯片效果. 我这人喜欢造轮子,除了jquery这种有强大开发团队的框架级别JS,其实的一些小程序都是尽量自己写. 一是因为怕出问题了没人问,二是自己写的改起来也方便. ...

  2. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  3. RCP:利用actionSet在菜单(menu)里添加内容

    eclipse的菜单menu.工具栏toolbar乃至视图的上下文菜单contextmenu都是使用Action或Command实现的. Action即是 org.eclipse.jface.acti ...

  4. Codrops 教程:实现内容倾斜的 3D 幻灯片效果

    今天给大家分享的优秀教程来自 Codrops 网站,实现一个内容倾斜的 3D 幻灯片效果.我们平常见到的都是那种水平或者垂直滚动的效果,这个倾斜的内容滑动效果相信会让你眼前一亮.因为使用了 CSS 3 ...

  5. css+js 控制幻灯片效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. 一个很好的幻灯片效果的jquery插件--kinMaxShow

    在做一些网站时,或多或少的要给网站做幻灯片效果,以前每次做这个效果,都是现成带网上找,找到的很多很杂,而且用完后就不会再理会更加不会去总结代码. 无意中找到了kinMaxShow这个插件,机会满足了我 ...

  7. ASP.NET网页动态添加、更新或删除数据行

    ASP.NET网页动态添加.更新或删除数据行 看过此篇<ASP.NET网页动态添加数据行> http://www.cnblogs.com/insus/p/3247935.html的网友,也 ...

  8. 在网页边角添加GitHub链接图标

    在网页边角添加GitHub链接图标 在页面添加HTML一下代码: <a href="https://github.com/you"> <img style=&qu ...

  9. js里添加的标签

    js里添加的标签.网页加载此标签绑定的js函数时,由于没有标签,故无法执行函数. 例如: js中添加了一个button: html1 += "<td><button typ ...

随机推荐

  1. Cheatsheet: 2015 11.01 ~ 11.30

    Golang Roadomatic: Node vs. Go Quick Guide to Golang for Java Developers 3 Go Gotchas Web Choosing a ...

  2. FreeSWITCH中文语音包

    一.中文语音资源的获取 官方提供的资源:http://files.freeswitch.org/releases/sounds/ 自己录音 实在不行可以@我给你发一份. 二.中文资源的安装 英文资源的 ...

  3. 深入理解CSS网页布局-理论篇

    在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...

  4. xshell 终端窗口目录显示为深蓝色的不易分辨问题

    xshell更改终端窗口目录展示深蓝色的不易分辨 经常使用xshell远程连接服务器,使用ls命令,目录的颜色都是深蓝色, 如果终端窗口背景颜色是黑色的(对眼睛较好的黑色的背景色,大家一般都选择黑色背 ...

  5. Gradle build设置自动log开关

    应用场景 通常情况下我们的apps发布后也就是release模式下log是不显示的,debug模式下是显示log的,但是在特殊情况下我们测试release包的时候需要log的时候,就无法使用Build ...

  6. Nginx模块之————RTMP模块在Ubuntu 14.04年的设置与搭建

    Nginx的设置,RTMP在Ubuntu 14.04 https://www.vultr.com/docs/setup-nginx-rtmp-on-ubuntu-14-04

  7. android音视频点/直播模块开发

      音视频 版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 随着音视频领域的火热,在很多领域(教育,游戏,娱乐,体育,跑步,餐饮,音乐等)尝试做音视频直播/点播功能,那么作为开发一个小白, ...

  8. __VA_ARGS__可变参数宏

    #define qWiFiDebug(format, ...) qDebug("[WiFi] "format" File:%s, Line:%d, Function:%s ...

  9. Android Material适配 为控件设置指定背景色和点击波纹效果

    Android Material适配 为控件设置指定背景色和点击波纹效果,有需要的朋友可以参考下. 大部分时候,我们都需要为控件设置指定背景色和点击效果 4.x以下可以使用selector,5.0以上 ...

  10. JS 概述

    HTML+javascript+CSSjavascript 1995出现,JQuery -2006出现--React.js 阿里/美团/去哪儿 2013, Facebook发布UI框架库React,引 ...