jquery簡單圖片切換顯示效果實現(xiàn)方法
更新時間：2015年01月14日 10:01:05 投稿：shichen2014
這篇文章主要介紹了jquery簡單圖片切換顯示效果實現(xiàn)方法,可以實現(xiàn)簡單的圖片切換功能,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jquery簡單圖片切換顯示效果實現(xiàn)方法，分享給大家供大家參考。具體實現(xiàn)方法如下：
復制代碼 代碼如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jquery圖片切換效果</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#item li:not(:first)").css("display","none");//只顯示第一張圖片，其它隱藏
var bb = $("#item li:last");
var aa = $("#item li:first");
setInterval(function(){
if(bb.is(":visible")){
aa.fadeIn(1000).addClass("in");
bb.hide();
}else{
$("#item li:visible").addClass("in");
$("#item li.in").next().fadeIn(1000);
$("#item li.in").fadeOut(1000).removeClass("in");
}
},3000);
});
</script>
</head>
<style type="text/css">
li{list-style:none;display:block;width:500px;border:1px solid #ccc;padding:5px;}
.in{display:block;}
</style>
<body>
<ul id="item">
<li><img src="./images/11_b.jpg" /></li>
<li><img src="./images/22_b.jpg" /></li>
<li><img src="./images/33_b.jpg" /></li>
<li><img src="./images/44_b.jpg" /></li>
</ul>
</body>
</html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jquery圖片切換效果</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#item li:not(:first)").css("display","none");//只顯示第一張圖片，其它隱藏
var bb = $("#item li:last");
var aa = $("#item li:first");
setInterval(function(){
if(bb.is(":visible")){
aa.fadeIn(1000).addClass("in");
bb.hide();
}else{
$("#item li:visible").addClass("in");
$("#item li.in").next().fadeIn(1000);
$("#item li.in").fadeOut(1000).removeClass("in");
}
},3000);
});
</script>
</head>
<style type="text/css">
li{list-style:none;display:block;width:500px;border:1px solid #ccc;padding:5px;}
.in{display:block;}
</style>
<body>
<ul id="item">
<li><img src="./images/11_b.jpg" /></li>
<li><img src="./images/22_b.jpg" /></li>
<li><img src="./images/33_b.jpg" /></li>
<li><img src="./images/44_b.jpg" /></li>
</ul>
</body>
</html>
希望本文所述對大家的jQuery程序設計有所幫助。
您可能感興趣的文章:
- jquery實現(xiàn)圖片切換代碼
- 完美JQuery圖片切換效果的簡單實現(xiàn)
- 基于jquery實現(xiàn)左右按鈕點擊的圖片切換效果
- 基于jquery實現(xiàn)鼠標滾輪驅動的圖片切換效果
- jQuery實現(xiàn)的Tab滑動選項卡及圖片切換(多種效果)小結
- jQuery插件Slider Revolution實現(xiàn)響應動畫滑動圖片切換效果
- jquery簡單實現(xiàn)圖片切換效果的方法
- jquery圖片切換實例分析
- jQuery插件slick實現(xiàn)響應式移動端幻燈片圖片切換特效
- 完美兼容各大瀏覽器的jQuery插件實現(xiàn)圖片切換特效
- 基于jQuery實現(xiàn)的幻燈圖片切換
相關文章
解析Jquery的LigerUI如何實現(xiàn)文件上傳
本篇文章是對Jquery中的LigerUI實現(xiàn)文件上傳的方法，進行了分析介紹，需要的朋友可以參考下2013-07-07
JQuery給元素綁定click事件多次執(zhí)行的解決方法
這篇文章主要介紹了JQuery給元素綁定click事件多次執(zhí)行的解決方法,需要的朋友可以參考下2014-05-05
這是一個加了點淡入淡出效果的頂部tooltip控件，會自動消失,小功能大家參考使用吧2013-12-12
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡易的計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
jquery 鍵盤事件 keypress() keydown() keyup()用法總結
在本篇文章里小編給各位整理的是關于jquery 鍵盤事件 keypress() keydown() keyup()用法總結以及相關實例，需要的朋友們學習下。2019-10-10
這篇文章主要介紹了jQuery實現(xiàn)新消息閃爍標題提示的方法,實例分析了jQuery操作樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jquery插件hiAlert實現(xiàn)網頁對話框美化
hiAlert是一款基于jQuery的信息提示插件，它支持操作成功、操作失敗和操作提醒三種信息提示方式。hiAlert瀏覽器兼容性非常好，支持更改提示內容，支持定位提示框的位置，可配置插件參數(shù)。2015-05-05
這篇文章主要介紹了jquery實現(xiàn)平滑的二級下拉菜單效果,可實現(xiàn)鼠標滑過彈出二級下拉菜單,涉及jquery鼠標hover事件及fadeIn與fadeOut事件操作頁面元素隱藏及顯示的實現(xiàn)技巧,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jQuery實現(xiàn)的瀑布流加載效果,結合實例形式分析了jQuery基于數(shù)學運算與事件響應實現(xiàn)頁面瀑布流加載的功能,需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細介紹了如何簡單實現(xiàn)jQuery多選框功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01