JQuery实现的图文自动轮播效果插件

   本文实例讲述了JQuery实现的图文自动轮播效果插件。分享给大家供大家参考。具体如下:

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

intervalID = setInterval(cycleImage, slidetime);
$(".main_image .desc").show(); // 展示图片
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); // 设置透明度
//点击和悬停事件
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").click(function(){
// 设置参数
var imgAlt = $(this).find('img').attr("alt");
var imgTitle = $(this).find('a').attr("href");
var imgDesc = $(this).find('.block').html(); // 从类block中获取html
var imgDescHeight = $(".main_image").find('.block').height();
// 计算类block的高度
if ($(this).is(".active")) { // 如果已经激活了,之后的操作...
return false;
} else {
// 动画操作
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}
$(".image_thumb ul li").removeClass('active');
$(this).addClass('active');
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
// Toggle Teaser
$("a.collapse").click(function(){
$(".main_image .block").slideToggle();
$("a.collapse").toggleClass("show");
});

  希望本文所述对大家的jQuery程序设计有所帮助。

时间: 2024-10-04 10:42:06

JQuery实现的图文自动轮播效果插件的相关文章

JQuery实现的图文自动轮播效果插件_jquery

本文实例讲述了JQuery实现的图文自动轮播效果插件.分享给大家供大家参考.具体如下: intervalID = setInterval(cycleImage, slidetime); $(".main_image .desc").show(); // 展示图片 $(".main_image .block").animate({ opacity: 0.85 }, 1 ); // 设置透明度 //点击和悬停事件 $(".image_thumb ul li:f

jquery实现简单的banner轮播效果【实例】_jquery

朋友给我看了一个轮播效果,把js下载一看,丫丫的一个这么简单的效果,这么的就能写个几百行的,严重影响浏览器加载速度嘛,以为人家宽带流量不要钱玩的哦..无奈之下给他写了个简单的,把所有代码放上去都没有超过70行,还有圆角的那个CSS,不是每个浏览器都是圆角的,不过不影响美观,嘻嘻. <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title> <scri

jQuery制作简洁的图片轮播效果_jquery

演示图: 核心代码: $(document).ready(function(){ var $iBox = $('.imgBox'), $iNum = $('.imgNum'), //缓存优化 indexImg = 1, //初始下标 totalImg = 4, //图片总数量 imgSize = 300, //图片尺寸 宽度 moveTime = 1100, //切换动画时间 setTime = 2500, //中间暂停时间 clc = null; function moveImg(){ if(

bootstrap实现每隔5秒自动轮播效果_javascript技巧

本文实例为大家分享了bootstrap轮播的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>轮播</title> <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <sty

jQuery制作简洁的图片轮播效果

 演示图: 核心代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 $(document).ready(function(){ var $iBox = $('.imgBox'), $iNum = $('.imgNum'), //缓存优化 indexImg = 1, //初始下标 totalI

jquery实现定时自动轮播特效_jquery

这次的轮播图是在上一篇文章jQuery手动点击实现图片轮播特效的基础上写出来的,也就是本次展示的是手动点击轮播效果以及定时自动轮播效果的程序,建议想连贯学习的小伙伴把我之前的文章看一看,看完后再看这篇文章~~~~ 下面来看看我做的最终定时自动轮播效果以及手动点击轮播效果:   对于上面的展示动画速度比较快的原因是因为我的截图软件是绿色版,免费的~~~你们懂得,就是卡卡的,真正的效果比这个速度慢,而且还是匀速,可以商用~~~所以上面的展示动画只能当做完成效果的参考.一.主体程序 <!DOCTYPE

基于jQuery实现自动轮播旋转木马特效_jquery

本文实例讲述了jQuery实现自动轮播旋转木马特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现自动轮播旋转木马特效代码,实现过程很简单. 运行效果图:           -------------------查看效果 下载源码------------------- 简要教程 jquery.caroursel.js是一款非常实用的可自动轮播的jQuery旋转木马插件.该旋转木马将图片进行堆叠,轮流的将图片推送到最前面来展示,形成旋转木马的效果.  使用方法该jQuery旋转木

Android实现轮播效果的两种方法

实现轮播效果有2种方法: (1)使用ViewPager+ImageView,通过Handler进行间隔发送消息,实现自动轮播效果 xml代码: <android.support.v4.view.ViewPager android:id="@+id/fragment_viewPager" android:layout_width="match_parent" android:layout_height="200dp" /> privat

jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果_jquery

Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效果. 下载源码 Flexslider具有以下特性:支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素. 自适应屏幕尺寸. 可控制滑动单元个数. 更多选项设置和回调函数.  HTML首先在页面head部位载入jquery库文件和