基于jQuery实现的幻灯图片切换_jquery

话不多说,直接附上源码,仅供大家参考

// JavaScript Document
;(function($){
 $.fn.extend({
 "zj_ppt":function(value){
 //默认参数定义
 var $this = $(this);
 value = $.extend({
 "time":2000, //间隔变化动画时间
 "con":0,
 "sto":true,
 "count":"count", //切换小图的父级class名字
 "src":"src", //切换小图片路径
 "src_cur":"src_cur" //当前切换小图片路径
 },value);
 //图片切换函数
 function autopic(){
 $("li",$this[0]).hide();
 $("li:eq("+value.con+")",$this[0]).show();
 $(value.count).find("ul li img").attr("src",value.src);
 $(value.count).find("ul li img:eq("+value.con+")").attr("src",value.src_cur);
 if(value.con>$("li",$this[0]).length-2){
 value.con = 0;
 }else{
 value.con += 1;
 }
 }
 //每间隔多少时间执行一次图片切换
 function sett(){
 if(value.sto){autopic()};
 setTimeout(sett,value.time);
 }
 //鼠标悬停时切换图片,并停止自动切换
 $(value.count).find("ul li").hover(function(){
 var _index = $(this).index();
 value.con = _index;
 value.sto = false;
 autopic();
 },function(){
 var _index = $(this).index();
 value.sto = true;
 value.con = _index;
 });
 sett();
 //反回原对像,以便连缀JQuery的其它方法
 return $this;
 }
 });
})(jQuery);

以上是插件部分代码;

下面可以下载demo

[下载].demo

以上就是本文的全部内容,希望对大家有所帮助,谢谢对的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jq
图片切换
jquery实现图片切换、jquery幻灯片切换、jquery幻灯片左右切换、jquery实现幻灯片效果、jquery幻灯片自动切换,以便于您获取更多的相关知识。

时间: 2025-01-29 22:10:56

基于jQuery实现的幻灯图片切换_jquery的相关文章

jQuery简单实现banner图片切换_jquery

主要运用了定时器的原理,bind,trigger应用等 复制代码 代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>banner切换实现</title>    <style type="text/css">        /*        * @description: banner切换样式 

jQuery鼠标经过方形图片切换成圆边效果代码分享_jquery

这是一款基于jQuery鼠标经过方形图片切换成圆边特效代码,点击图片会弹出浮层,用户还可以自定义对应图片的标题与文字说明,适合图片页面的展示,是一款非常实用的图片特效源码. 运行效果图: --------------------------------效果演示 源码下载---------------------------------- 鼠标经过方形图片切换成圆边效果 点击图片会弹出浮层 为大家分享的jQuery鼠标经过方形图片切换成圆边效果代码如下 <head> <title>j

基于jQuery实现多标签页切换的效果(web前端开发)_jquery

这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,html和css代码如下: <ul id="tab"> <li id="tab1" onclick="show(1)">10元套餐</li> <li id="tab2" onclick=&quo

使用jQuery简单实现banner图片切换

 本篇文章主要是对使用jQuery简单实现banner图片切换的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 主要运用了定时器的原理,bind,trigger应用等   代码如下: <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>banner切换实现</title>     <style type=&q

基于jQuery IE6下PNG图片背景透明问题解决方法

基于jQuery IE6下PNG图片背景透明问题解决方法 IE6问题真的很多,其中有一个问题是PNG图片背景无法变成透明,取而代之的是一个色块,有时候我们想用png透明图片来做小图标,这个在IE6下就纠结了,下面我们用一个jquery插件来解决这个问题,希望能帮上大家. 首先下载SuperSleight for jQuery,再下载一张透明gif图片transparent.gif. 引用脚本: <script type="text/网页特效" src="/scripts

运用jQuery定时器的原理实现banner图片切换_jquery

主要运用了定时器的原理,bind,trigger应用等 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>banner切换实现</title> <style type="text/css"> /* * @description: banner切换样式 * @author: lanfeng(beryl) * @tim

基于jquery的15款幻灯片插件_jquery

1,Gallerific Galleriffic 是使用 Mike Alsup 的 jQuery Cycle plugin 创建的图片展示效果,包括缩略图.图片标题和描述等详细功能,是一个非常不错的高质量画廊相册展示工具. 2,ZoomImage zoomimage ,以一种独具魅力的方式展示图片效果.缩略图链接在本页弹出大图,并且可以可以随意拖拽该悬浮图片. 3,EasySlider Easy Slider 可以实现图片或其他任意内容,在水平或垂直方向上的滑动效果,你还可以通过 CSS 自定义

基于jQuery的日期选择控件_jquery

但是也有些问题,第一画日历有点慢,第二兼容性不太好IE Only,第三它不是基于jQuery的哈哈. 那还是老规矩,做之前先看下效果   这下是更酷的Ext风格了. 从上图我们可以看出这个控件其实有两个视图一个日期月视图,还有一个是年月选择视图. 1:还是先从HTML入手 日期控件确定HTML其实还是比较简单,因为明摆着是列表的数据格式,当然主要是采用table了. 两个视图分别用两个Div包裹,控制div的显示隐藏即可以切换视图了.完整的HTMl结构大家可以用IEDeveloper看一下Dem

【经典源码收藏】基于jQuery的项目常见函数封装集合_jquery

本文实例汇总了基于jQuery的项目常见函数封装.分享给大家供大家参考,具体如下: /// <reference path="jquery-1.8.0.min.js" /> /* * DIV或元素居中 * @return */ jQuery.fn.mCenterDiv = function () { this.css("position", "absolute"); this.css("border", "