- 浏览: 112088 次
- 性别:
- 来自: 江西
-
文章分类
最新评论
-
antsshadow：
如何在IE6、IE7、IE8中使用HTML5 canvas -
fei_6666：
请问 $('#livemargins_contro' ).bg ...
jquery.bgiframe.js解决下拉列表框被遮盖（iE 6下存在的情况） -
geliyang：
function(value,element)这里的value ...
Jquery Validator 的addMethod用法備忘
<!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">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.2.6-vsdoc-cn.js"></script>
<style type="text/css">
img{ width:100px; height:100px; }
a.current{ color:#f00;}
</style>
<script type="text/javascript">
(function ($) {
var defaults = {
speed: 3000,
frist: 0,
auto: 1
};
$.fn.extend({
slideshowpic: function (options) {
var slidedata = $.extend({}, defaults, options);
slidedata.slidepicbox = this;
$(document).ready(function () {
picplay(slidedata.frist, slidedata);
if (slidedata.slidebtnbox) {
slidebtn = slidedata.slidebtnbox.children();
slidebtn.each(function (i) {
$(this).bind("click", function () {
//alert(i);
if (slidedata.auto) { clearTimeout(slidedata.autotime); }
picplay(i, slidedata);
});
});
}
});
}
});
picplay = function (num, mydata) {
var slidepic = mydata.slidepicbox.children();
var total = slidepic.length;
slidepic.filter(":visible").fadeOut("fast", function () {
$(this).removeClass("current");
slidepic.eq(num).fadeIn("slow");
slidepic.eq(num).addClass("current");
});
if (mydata.slidetitlebox) {
var slidetitle = mydata.slidetitlebox.children();
slidetitle.filter(":visible").hide("fast", function () {
$(this).removeClass("current");
slidetitle.eq(num).show();
slidetitle.eq(num).addClass("current");
});
}
if (mydata.slidebtnbox) {
var slidebtn = mydata.slidebtnbox.children();
slidebtn.eq(num).addClass("current");
slidebtn.eq(num).siblings().removeClass("current");
}
if (mydata.auto) {
var index = num >= total - 1 ? 0 : num + 1;
//alert(index);
mydata.autotime = setTimeout(function () { picplay(index, mydata); }, mydata.speed);
}
}
})(jQuery);
</script>
</head>
<body>
<div>
<div id="slidepic">
<a href="#" title="标题1"><img src="image/pic1.jpg" />1</a>
<a href="#" title="标题2"><img src="image/pic2.jpg" />2</a>
<a href="#" title="标题3"><img src="image/pic1.jpg" />3</a>
<a href="#" title="标题4"><img src="image/pic2.jpg" />4</a>
</div>
<div id="slidetitle">
<a href="#">标题1</a>
<a href="#">标题2</a>
<a href="#">标题3</a>
<a href="#">标题4</a>
</div>
<div id="slidebtn">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
<script type="text/javascript">
var configdata = {
slidetitlebox:$("#slidetitle"),//标题对象（可无）
slidebtnbox: $("#slidebtn"), //按钮对象（可无）
auto:1,//1自动播放/0不自动播放
speed: 3000,//播放速度
frist: 0//从第几张开始
};
$("#slidepic").slideshowpic(configdata);
</script>
</div>
</body>
</html>
发表评论
-
在js文件中显示jquery的智能提示VS2010
2012-05-25 15:30 0///<reference path="jqu ... -
英文强制自动换行
2012-03-22 17:48 858<div style="width:150px ... -
DIV+CSS布局中自适应两列等高的解决方法
2011-12-14 11:48 871<!doctype html> <html ... -
关于浏览器内核的一些概念
2011-12-14 11:37 878什么是浏览器内核 要想搞清楚浏览器内核是什么， ... -
介绍 10 个 CSS3 属性
2011-12-14 11:24 686介绍 10 个 CSS3 属性 border-rad ... -
将手机网站做成手机应用的JS框架
2011-11-30 14:26 972将手机网站做成手机应用的JS框架 发表于 2010年09月1日 ... -
图片水平垂直居中
2011-11-18 11:17 837<!DOCTYPE html PUBLIC " ... -
jquery实现无缝图片滚动
2011-10-24 13:58 954<!DOCTYPE HTML> <html& ... -
HTML Head 参数详解
2011-10-18 15:14 1973head区是指首页HTML代码的<head> ... -
IE6文字溢出BUG
2011-10-18 15:09 825在IE6下，经常会产生一些灵异事件，比如：HTML代码里是&q ... -
div背景半透明，文字不透明
2011-10-18 15:06 2094有时候某些纯色的半透明效果，不需要用图片来完成，可以直接使用d ... -
JS变量的作用域
2011-10-18 14:53 801JavaScript中变量的作用域非常奇特，如果不仔细研究，一 ... -
图片延迟加载之随滚动条显示
2011-10-18 14:38 1453经常上tudou网，发现tudou首页加载图片的功能很有意思， ... -
三列等高。中间列优先
2011-09-28 16:48 807<!DOCTYPE html> <html& ... -
a空标签设成块元素后ie7不能点击
2011-09-20 18:12 1756a空标签设成块元素后ie7不能点击,加上空背景后就可以了。 ... -
ie6支持position:fixed
2011-09-08 13:58 697pfP{position:fixed;_position:ab ... -
jquery实现tab选项卡
2011-09-08 10:36 1129<section class="recomme ... -
常用JS代码大全
2011-09-07 18:42 2194事件源对象 event.srcElement ... -
jquery实现自定义select表单
2011-09-06 19:09 923<!DOCTYPE html PUBLIC " ... -
js控制图片自动等比例缩放
2011-08-29 16:17 885function imgfix(){ var maxw ...
相关推荐
下面我们将深入探讨jQuery幻灯片切换的实现原理、关键技术和应用。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在幻灯片切换中，jQuery的核心功能体现在...
下面将详细阐述jQuery幻灯片切换的核心原理、实现方式以及相关知识点。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务。在幻灯片切换中，jQuery提供了便利的API，如`.fadeIn()...
本教程将详细讲解如何利用jQuery实现游戏图片的幻灯片切换效果，这对于游戏宣传页或者游戏展示平台来说，是非常吸引用户的一种动态展示方式。 首先，我们需要了解幻灯片切换的基本原理。幻灯片切换通常通过改变图片...
【jQuery网站宽屏banner幻灯片切换代码】是一款用于网页设计的特效插件，它能够实现大屏幕横幅（banner）上的多张图片自动轮播和切换，为网站增添动态视觉效果，提升用户体验。这个代码基于JavaScript库jQuery，...
"jQuery新闻组图幻灯片切换代码"是一个实现这种效果的技术方案，它利用流行的JavaScript库jQuery，为网站的新闻或图片展示创建一个自动切换的幻灯片组件。这个组件通常用于在有限的空间内展示多张图片或新闻摘要，...
**jQuery响应式宽屏幻灯片无缝切换代码详解** 在网页设计中，幻灯片（Slider）是一种常用的功能，用于展示一系列图片、内容或者信息，它通常具备自动切换和交互控制的能力。本教程将深入探讨如何利用jQuery实现一个...
本教程将详细讲解如何利用jQuery实现一个带有缩略图控制的弹性图片幻灯片切换效果，特别适用于全屏幻灯片展示。 一、jQuery基础 jQuery库提供了一套丰富的API，包括选择器、事件处理、动画效果和Ajax操作等。在...
总的来说，"jQuery图片垂直切换幻灯片代码"是一个将jQuery的动态效果与Bootstrap的布局优势相结合的实例，它展示了如何通过JavaScript和前端框架实现创新的用户体验。对于开发者来说，理解并掌握这样的代码有助于...
接下来是核心部分，即 jQuery 代码，用于实现图片的自动切换和左右按钮控制： ```javascript $(document).ready(function() { var slideIndex = 0; showSlides(); function showSlides() { var i; var slides...
标题中的“jQuery缩略图片幻灯片切换特效.zip”表明这是一个使用jQuery库实现的图片幻灯片切换效果的代码资源。jQuery是一个广泛应用于Web开发的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画设计。这...
在幻灯片切换场景中，通常会有一个图片数组，每个元素代表一张待显示的图片。开发者可以使用`setInterval()`或`setTimeout()`函数创建一个定时器，按照预设的时间间隔自动切换图片。在每次切换时，旧图片淡出，新...
在本文中，我们将深入探讨如何使用jQuery来实现一个图像幻灯片效果，特别是上下滑动的图片切换功能。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画制作，使得创建交互式网页变得更加容易。...
jQuery全屏通栏幻灯片轮播代码基于jquery.banner.js和jquery1.8.3.min.js插件制作，创新网络工作室首页使用的焦点图代码，图片淡入淡出的切换效果。带左右切换箭头，索引按钮。
【标题】中的“仿阿里巴巴首页jQuery幻灯片切换代码”是指一种使用JavaScript库jQuery实现的网页动态效果，这种效果常用于网站的首页，用来展示一系列图片或内容，以吸引用户的注意力并提供良好的用户体验。...
一款带缩略图的支持所有主流浏览器和移动设备的jQuery手机滑动切换幻灯片代码，支持IE7以上的IE浏览器，只是在IE7-IE9浏览器中没有动画过渡效果。 js代码 [removed][removed] [removed][removed] [removed] ...
本文将深入探讨如何使用名为"kevinSlide"的jQuery插件来实现图片幻灯片功能。 首先，kevinSlide插件是专为创建动态、引人入胜的图片滑动展示而设计的。这种类型的组件常用于网站的首页或产品展示区域，以吸引用户...
**jQuery自适应浏览器全屏幻灯片切换代码详解** 在网页设计中，全屏幻灯片切换效果是一种常见的展示方式，它可以吸引用户注意力并提供视觉冲击力。本篇将深入探讨如何利用jQuery实现一个自适应不同浏览器的全屏幻灯...
幻灯片切换通常涉及到计时器和动画效果，例如使用`.setTimeout()`或`.setInterval()`来定时切换图片，`.animate()`方法可以实现平滑的图片切换。此外，可能还会使用到jQuery的`.data()`方法来存储和访问图片索引，...