分享一款支持PC端手机端幻灯片代码是一款支持移动触摸，支持鼠标拖拽切换，支持带进度条的自动播放模式。交果图如下 ：效果演示 源码下载 html代码： <div class="flex"><ul class="slides"><li data-title="Slide 1"><img alt="" src="img/beasts_feature.jpg"></li><li data-title="Slide 2"><img alt="" src="img/element-taiwan-thmb.jpg"></li><li data-title="Slide 3"><img alt="" src="img/streets-newyork.jpg"></...
简要教程 wallop是一款移动优先的纯javascript幻灯片插件。这个幻灯片插件仅4k大小，它的原理仅是为HTML元素添加和移除适当的class来显示和隐藏它们，至于这些class样式你可以完全自定义。特点有： 移动优先 动画和过渡效果都使用CSS来生成 轻量级，仅4k大小 高度灵活性和可扩展性 可自定义事件和API 没有任何外部依赖 使用方法 使用该幻灯片插件首先需要引入wallop.css和Wallop.min.js文件。<link rel="stylesheet" ...
上周看到一个朋友做了很炫的缩放式幻灯片，可能因为对此知识了解的不多，找了好久才找到几个web幻灯片工具。通过筛选决定用Geek的 impress.js 。 impress.js是一款新兴的幻灯工具，它的效果类似Prezi，但是拥有3D的功能，而且是在MIT&GPL协议下开源，对于有一定的Web开发基础的人而言，真是一个福音！只需要简单的用一些html指令，并加载impress.js就可以制作出一个很绚丽的缩放式幻灯。 制作时首先你需要写一些head，这和普通的We...
本文实例讲述了jQuery超精致图片轮播幻灯片特效。分享给大家供大家参考。具体如下： 这是一款基于jQuery实现超精致图片轮播幻灯片特效代码，实现过程很简单。 运行效果图： -------------------查看效果 下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 （1）在head区域引入CSS样式：<link href="styles/97zzw.css" rel="stylesheet" type="text/css" />（2）...
本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效。分享给大家供大家参考。具体如下： 这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码，实现过程很简单。 运行效果图：-------------------查看效果 下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的js实现3D图片逐张轮播幻灯片特效代码如下<head> <meta http-equiv="Content-Type" content="text/html; charset...
本文实例讲述了javascript带点自动图片轮播幻灯片特效。分享给大家供大家参考。具体如下： 这是一款基于javascript实现带点自动图片轮播幻灯片特效代码，实现过程很简单。 运行效果图：-------------------查看效果 下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 （1）在head区域引入CSS样式：<link rel="stylesheet" href="css/zzsc.css" type="text/css" media="screen" /> （2）js代码...
本文实例讲述了jQuery平滑旋转幻灯片特效。分享给大家供大家参考。具体如下： 这一款基于jQuery实现平滑旋转幻灯片代码，效果超酷，场面相当震撼；图片大小和颜色自定义请修改jQuery-jcImgScroll.js。 运行效果图： -------------------查看效果 下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 js关键代码：<script src="js/jQuery-1.7.1.js" language="javascript" type="t...
本文实例讲述了javascript淡入淡出焦点图幻灯片效果。分享给大家供大家参考。具体如下： 这是一款基于javascript实现的淡入淡出焦点图幻灯片效果代码，可以自定义标题，实现过程很简单。 运行效果图：-------------------查看效果 下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的js淡入淡出焦点图幻灯片效果代码如下<head> <meta http-equiv="Content-Type" content="text/htm...
本文实例讲述了jquery的幻灯片图片切换效果。分享给大家供大家参考。具体如下： 这是一款基于jquery的幻灯片图片切换效果代码，有缩略图和标题，可以自定义标题。 运行效果图： -------------------查看效果 下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 （1）在head区域引入CSS样式：<LINK rel=stylesheet type=text/css href="css/lrtk.css" charset=utf-8 media=screen> （2）js代...
本文实例讲述了js制作精美的幻灯片画集特效。分享给大家供大家参考。具体如下： 这是一款基于javascript制作的精美幻灯片画集特效的插件，跟其他幻灯片有别的图片画廊。为什么说有所区别呢，因为这款插件的图片切换时包含4个方向的，即上下左右切换也是可以的，大家可以在实例中进行使用。 运行效果图：-------------------查看效果 下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 本实例的...
本文实例讲述了jQuery实现时尚漂亮的幻灯片特效，基本能满足你在网页上使用幻灯片(焦点图)效果。分享给大家供大家参考。具体如下： 幻灯片效果描述：用鼠标点击右下角数字按钮幻灯片进行左右切换进行切换。 运行效果截图如下：具体实现代码：<head><title>Jquery幻灯片焦点图插件</title> <script src="js/jquery-1.4a2.min.js" type="text/javascript"></script> <script src="js/jquery.-1.2.1.min.js" type="text/javascrip...
这篇文章主要介绍了jQuery实现幻灯片焦点图，可实现非常炫目时尚的幻灯片效果，非常具有实用价值，基本能满足你在网页上使用幻灯片(焦点图)效果，具体如下 幻灯片效果描述：用鼠标滑过右下角数字按钮幻灯片进行左右切换进行切换。 自定义切换参数效果：向下切换、切换时间为8秒、鼠标滑过按钮时切换 运行效果截图如下：具体代码如下<head><title>Jquery幻灯片焦点图插件</title> <script src="js/jquery-1.4a2.min.js" type="tex...
这篇文章主要介绍了jQuery实现幻灯片焦点图，可实现非常炫目时尚的幻灯片效果，非常具有实用价值，基本能满足你在网页上使用幻灯片(焦点图)效果，需要的朋友可以参考下幻灯片效果描述：与前两节不同的是，这款特效可以打开页面随机选择切换方式（方向） 运行效果截图如下：具体代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Jquery幻灯片焦点图插件</title> <script src="js/...
这是一款基于jquery实现的底部带缩略图的幻灯片切换特效代码，幻灯片可以点击下方的缩略图切换，用户还可以自定义对应幻灯片的标题与文字说明，是一款非常实用的幻灯片特效源码。 为大家分享的jQuery幻灯片带缩略图轮播代码如下<html> <head><title>带缩略图的jQuery幻灯片轮播效果</title> <link href="css/css.css" rel="stylesheet" type="text/css"> <script src="js/jquery-1[1].2.1.pack.js" type="text/javascript"></scrip...
本文实例讲述了jquery简单实现幻灯片的方法。分享给大家供大家参考。具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>幻灯片</title> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <...