JQuery實(shí)現(xiàn)的圖文自動(dòng)輪播效果插件
本文實(shí)例講述了JQuery實(shí)現(xiàn)的圖文自動(dòng)輪播效果插件。分享給大家供大家參考。具體如下:
intervalID = setInterval(cycleImage, slidetime);
$(".main_image .desc").show(); // 展示圖片
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); // 設(shè)置透明度
//點(diǎn)擊和懸停事件
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").click(function(){
// 設(shè)置參數(shù)
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();
// 計(jì)算類block的高度
if ($(this).is(".active")) { // 如果已經(jīng)激活了,之后的操作...
return false;
} else {
// 動(dòng)畫操作
$(".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");
});
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jquery實(shí)現(xiàn)簡(jiǎn)單自動(dòng)輪播圖效果
- jquery實(shí)現(xiàn)定時(shí)自動(dòng)輪播特效
- 基于jQuery實(shí)現(xiàn)自動(dòng)輪播旋轉(zhuǎn)木馬特效
- jquery帶有索引按鈕且自動(dòng)輪播切換特效代碼分享
- 12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開發(fā)必備
- Jquery代碼實(shí)現(xiàn)圖片輪播效果(一)
- 原生js和jquery實(shí)現(xiàn)圖片輪播特效
- jQuery圖片輪播的具體實(shí)現(xiàn)
- 基于JQuery的實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
- jquery實(shí)現(xiàn)圖片自動(dòng)輪播效果
相關(guān)文章
jQuery實(shí)現(xiàn)的圖片點(diǎn)擊放大縮小功能案例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的圖片點(diǎn)擊放大縮小功能,結(jié)合具體案例形式分析了jquery基于事件響應(yīng)與頁(yè)面屬性動(dòng)態(tài)變換實(shí)現(xiàn)的圖片放大縮小功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-01-01
一個(gè)有意思的鼠標(biāo)點(diǎn)擊文字特效jquery代碼
這篇文章主要介紹了一個(gè)有意思的鼠標(biāo)點(diǎn)擊文字特效jquery代碼,需要的朋友可以參考下2017-09-09
jQuery實(shí)現(xiàn)的五星點(diǎn)評(píng)功能【案例】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的五星點(diǎn)評(píng)功能,結(jié)合具體實(shí)例形式分析了jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)五星點(diǎn)評(píng)功能相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
jquery 重寫 ajax提交并判斷權(quán)限后 使用load方法報(bào)錯(cuò)解決方法
這篇文章主要介紹了jquery 重寫 ajax提交并判斷權(quán)限后 使用load方法報(bào)錯(cuò)解決方法 的相關(guān)資料,需要的朋友可以參考下2016-01-01
jquery實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建form并提交的方法示例
這篇文章主要介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建form并提交的方法,結(jié)合實(shí)例形式分析了jQuery form表單創(chuàng)建與提交相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
jquery 面包屑導(dǎo)航 具體實(shí)現(xiàn)
jquery 面包屑導(dǎo)航 具體實(shí)現(xiàn),需要的朋友可以參考一下2013-06-06

