jquery简单实现幻灯片的方法
本文实例讲述了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> <style type="text/css"> .slide{position: relative; overflow: hidden;} .slide img{max-width: 100%; position: absolute; left: 0; top: 0;} .slide img:first-child{position: relative; visibility: visible;} </style> </head> <body> <div class="slide"> <img src="images/172233f3cyzidsc8rl8irz.jpg" /> <img src="images/172231vxzvzz2xvk92d5m0.jpg" /> <img src="images/172228jybldywbdwdflfzm.jpg" /> <img src="images/172223i8otbbsot8b232o5.jpg" /> </div> <script type="text/javascript"> var size = $('.slide img').size(); var _index = size; var timer = null; $('.slide').append($('.slide img:eq(0)').clone()); timer = setInterval(function(){ $('.slide img').eq(_index).fadeOut(800); _index == 1?_index=size:_index--; $('.slide img').eq(_index).fadeIn(800); },4000); </script> </body> </html>
希望本文所述对大家的jquery程序设计有所帮助。
相关推荐
-
jQuery插件animateSlide制作多点滑动幻灯片
首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片--全屏动画animateSlide(代码完全原创). 直接上代码,把html.css和jquery代码copy到页面上即可呈现完美画面. html代码如下: <div class="animateSlide"> <div class="animateSlideImgWrap"> <div class=&quo
-
jQuery通过Ajax返回JSON数据
服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据. JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教程. <ul id="userlist"> <li><a hre
-
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
本文实例讲述了jQuery实现时尚漂亮的幻灯片特效,基本能满足你在网页上使用幻灯片(焦点图)效果.分享给大家供大家参考.具体如下: 幻灯片效果描述:用鼠标点击右下角数字按钮幻灯片进行左右切换进行切换. 运行效果截图如下: 具体实现代码: <head> <title>Jquery幻灯片焦点图插件</title> <script src="js/jquery-1.4a2.min.js" type="text/javascript&qu
-
jQuery中使用each处理json数据
eg:给传进来的ID中当其对应的值为true时,即给对应的ID标签添加一个class 名为 focus,如: var obj = { id01:'true', id02:'flase', id03:'true'}; $.each(obj,function(key,val){ if(val == 'true'){ $('#' + key).addClass('focus'); } }); 结果:ID为id01及id03的标签会添加一个class标签: eg2: json数据如下: [ {"Id&
-
jQuery插件slick实现响应式移动端幻灯片图片切换特效
jQuery响应式手机端移动端幻灯片图片切换特效插件slick,基于jQuery,功能非常强大,支持左右按钮切换.支持圆点切换.支持自定义切换数量,支持自定义切换速度.支持图片预加载.支持自动播放定义,效果非常的不错,众多的参数自定义支持,觉得可以的可以参考他们的参数配置,还是值得学习使用的. 使用方法: 1.加载插件和jQuery <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> &l
-
jQuery插件Skippr实现焦点图幻灯片特效
史上效果最好的焦点图幻灯片jQuery插件Skippr,轻量级插件.响应式布局插件,强大的参数自定义 配置,可自定义切换速度.切换方式.是否显示左右箭头.是否自动播放.自动播放间隔时间等配置 参数,调用插件也非常简单易用,调用方式下面介绍下: 1.加载jQuery和插件 <link rel="stylesheet" href="css/jquery.skippr.css"> <script src="js/jquery.min.js&qu
-
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
jquery-slider是一款基于JSON格式数据的jQuery幻灯片插件.该幻灯片通过JSON数据来提供图片地址和描述信息等,你可以通过更换JSON数据来动态切换不同的图片. 在线预览 源码下载 使用方法 在页面中引入jquery和slider.js文件和font-awesome字体图标文件. <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-
-
jquery实现简单的自动播放幻灯片效果
本文实例讲述了jquery实现简单的自动播放幻灯片效果.分享给大家供大家参考.具体实现方法如下: html部分: <div id="slideshow"> <div> <img src="images/5224/5658667829_2bb7d42a9c_m.jpg"> </div> <div> <img src="images/5230/5638093881_a791e4f819_m.jp
-
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
一个仿腾讯娱乐频道焦点图轮播的插件 ui3g.js 复制代码 代码如下: /* 顶部大图滚动 */ var slide = (function() { var quadEaseOut; var doc = document; var $ = function(s){ return document.getElementById(s); } /** 获取索引值,工具类 @param {Element} current 当前
-
jquery简单实现幻灯片的方法
本文实例讲述了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> <m
-
jQuery简单创建节点的方法
本文实例讲述了jQuery简单创建节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1
-
jQuery简单实现日历的方法
本文实例讲述了jQuery简单实现日历的方法.分享给大家供大家参考.具体分析如下: 原理挺简单的,首先算出一个月有多少天,再算出这个月的第一天是星期几,接着顺序排下来就可以了. <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=d
-
jquery简单图片切换显示效果实现方法
本文实例讲述了jquery简单图片切换显示效果实现方法,分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>jquery图片切换效果</title> <script type="text/javascr
-
Jquery简单实现GridView行高亮的方法
本文实例讲述了Jquery简单实现GridView行高亮的方法.分享给大家供大家参考.具体实现方法如下: $("#gridID tr:not(tr:last-child)").filter(function () { return $('td', this).length && !('table', this).length }).hover(function () { $(this).toggleClass('hover_css'); }); 希望本文所述对大家的jQ
-
jQuery简单绑定单个事件的方法示例
本文实例讲述了jQuery简单绑定单个事件的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绑定单个事件</title> <script type="text/javascript" src="jquery-1.7.2.min.j
-
jQuery简单实现点击文本框复制内容到剪贴板上的方法
本文实例讲述了jQuery简单实现点击文本框复制内容到剪贴板上的方法.分享给大家供大家参考,具体如下: //点击文本框复制其内容到剪贴板上方法 function copyToClipboard(txt) { if (window.clipboardData) { window.clipboardData.clearData(); window.clipboardData.setData("Text", txt); alert("已经成功复制到剪帖板上!"); } e
-
jquery简单实现图片切换效果的方法
本文实例讲述了jquery简单实现图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
-
jQuery简单实现iframe的高度根据页面内容自适应的方法
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#iframeId").load(function () { var mainheight = $(this).contents().find("body").height() + 30; $(this).height(mainheight); }); 方式2: //注意:下面的代码
-
jQuery简单实现input文本框内灰色提示文本效果的方法
本文实例讲述了jQuery简单实现input文本框内灰色提示文本效果的方法.分享给大家供大家参考,具体如下: $(function(){ $(".grayTips").each(function(){ //遍历每个文本框 var objTextBox=$(this); var oldText=$.trim(objTextBox.val()); objTextBox.css("color","#888"); objTextBox.focus(fun
随机推荐
- javascript 正则修正符
- 气象 XML 数据源应用程序开发指南-简介
- jQuery焦点图插件SaySlide
- java与JSON数据的转换实例详解
- js点击事件链接的问题解决
- 在ASP.NET 2.0中操作数据之五十一:从GridView的页脚插入新记录
- Python实现抓取城市的PM2.5浓度和排名
- python调用fortran模块
- JSP开发之Struts2实现下载功能的实例
- C语言切割多层字符串(strtok_r strtok使用方法)
- mysql 左连接、右连接和内连接
- mysql alter table 修改表命令详细介绍
- 一条DELETE语句
- jQuery手风琴的简单制作
- jQuery 弹出层插件(推荐)
- 在Node.js中使用Javascript Generators详解
- java 指定某个jdk版本方法
- Android编程中Handler原理及用法实例分析
- iOS实现带有缩放效果的自动轮播图
- bootstrap响应式工具使用详解