快捷導(dǎo)航

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>

希望本文所述對大家的jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

解析Jquery的LigerUI如何實現(xiàn)文件上傳
本篇文章是對Jquery中的LigerUI實現(xiàn)文件上傳的方法，進(jìn)行了分析介紹，需要的朋友可以參考下
2013-07-07
JQuery給元素綁定click事件多次執(zhí)行的解決方法
這篇文章主要介紹了JQuery給元素綁定click事件多次執(zhí)行的解決方法,需要的朋友可以參考下
2014-05-05
jquery插件tooltipv頂部淡入淡出效果使用示例
這是一個加了點(diǎn)淡入淡出效果的頂部tooltip控件，會自動消失,小功能大家參考使用吧
2013-12-12
jQuery實現(xiàn)簡易的計算器
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)簡易的計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
jquery 鍵盤事件 keypress() keydown() keyup()用法總結(jié)
在本篇文章里小編給各位整理的是關(guān)于jquery 鍵盤事件 keypress() keydown() keyup()用法總結(jié)以及相關(guān)實例，需要的朋友們學(xué)習(xí)下。
2019-10-10
jQuery實現(xiàn)新消息閃爍標(biāo)題提示的方法
這篇文章主要介紹了jQuery實現(xiàn)新消息閃爍標(biāo)題提示的方法,實例分析了jQuery操作樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
jquery插件hiAlert實現(xiàn)網(wǎng)頁對話框美化
hiAlert是一款基于jQuery的信息提示插件，它支持操作成功、操作失敗和操作提醒三種信息提示方式。hiAlert瀏覽器兼容性非常好，支持更改提示內(nèi)容，支持定位提示框的位置，可配置插件參數(shù)。
2015-05-05
jquery實現(xiàn)平滑的二級下拉菜單效果
這篇文章主要介紹了jquery實現(xiàn)平滑的二級下拉菜單效果,可實現(xiàn)鼠標(biāo)滑過彈出二級下拉菜單,涉及jquery鼠標(biāo)hover事件及fadeIn與fadeOut事件操作頁面元素隱藏及顯示的實現(xiàn)技巧,需要的朋友可以參考下
2015-08-08
jQuery實現(xiàn)的瀑布流加載效果示例
這篇文章主要介紹了jQuery實現(xiàn)的瀑布流加載效果,結(jié)合實例形式分析了jQuery基于數(shù)學(xué)運(yùn)算與事件響應(yīng)實現(xiàn)頁面瀑布流加載的功能,需要的朋友可以參考下
2016-09-09
簡單實現(xiàn)jQuery多選框功能
這篇文章主要為大家詳細(xì)介紹了如何簡單實現(xiàn)jQuery多選框功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01