jquery實現圖片滑動切換（附代碼）
這次帶給大家jquery實現圖片滑動切換（附程式碼），jquery實現圖片滑動切換的注意事項有哪些，以下就是實戰案例，一起來看一下。
JQuery實作簡單的圖片滑動切換特效
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>t图片的滑动</title>
<meta charset="utf-8" />
<style type="text/css" >
*{
margin:0;
padding:0;
}
#main{
width:1089px;
height:360px;
margin:100px;
background:url(../image/7.png);
}
ul li{
list-style:none ;
width:100px;
height:360px;
float:left;
}
a{
color:#ffffff;
text-decoration:none;
}
.txt{
width:100px;
height:360px;
float:left;
background:rgb(182, 255, 0);
}
p{
font-family :"Arial.black",Gadugi.sans-serif ;
font-size:18x;
position:relative ;
width:18px;
font-weight:bold ;
margin-top :120px;
margin-left:48px;
}
.li1 {
background: url( ../image/43.png);
}
.li2{background: url( ../image/42.png);}
.li3{background: url( ../image/39.png);}
.li4{background: url( ../image/47.png);}
</style>
</head>
<body>
<p id="main">
<ul>
<li class=" li1"><a href=" #"><p class=" txt"><p>风景1</p></p></a></li>
<li class=" li2"><a href=" #"><p class=" txt"><p>风景2</p></p></a></li>
<li class=" li3"><a href=" #"><p class=" txt"><p>风景3</p></p></a></li>
<li class=" li4"><a href=" #"><p class=" txt"><p>风景4</p></p></a></li>
</ul>
</p>
<script type="text/javascript" src="../Jqurey/jquery.min.js"></script>
<script >
$('ul li').hover(function(){
$(this).stop(true).animate({ width: '789px' }, 500).siblings().stop(true).animate({width:'100'},500);
})
</script>
</body>
</html>
jQuery圖片從下往上捲動效果是一款jquery animate方法製作的圖片從下往上滾動效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现图片从下往上滑动切换效果</title>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.box .box1').mouseover(function(){
$(this).stop().animate({"top":"-514px"}, 200);
})
$('.box .box1').mouseout(function(){
$(this).stop().animate({"top":"0"}, 200);
})
})
</script>
</head>
<body>
<p id="in_ct">
<!----------in_ct开始---------->
<p class="in_ct">
<!----------in_ct1 开始---------->
<p class="in_ct1">
<ul class="box">
<li>
<p class="box1">
<p class="toll_img"><img src="images/in_img1.jpg" width="272" height="514"/></p>
<p class="toll_info"><a href="" target="_blank"><img src="images/in_img1_ho.jpg" height="514" width="272" /></a></p>
</p>
</li>
<li>
<p class="box1">
<p class="toll_img"><img src="images/in_img2.jpg" width="272" height="514"/></p>
<p class="toll_info"><a href="" target="_blank"><img src="images/in_img2_ho.jpg" height="514" width="272" /></a></p>
</p>
</li>
<li>
<p class="box1">
<p class="toll_img"><img src="images/in_img3.jpg" width="272" height="514"/></p>
<p class="toll_info"><a href="" target="_blank"><img src="images/in_img3_ho.jpg" height="514" width="272" /></a></p>
</p>
</li>
<li>
<p class="box1">
<p class="toll_img"><img src="images/in_img4.jpg" width="272" height="514"/></p>
<p class="toll_info"><a href="" target="_blank"><img src="images/in_img4_ho.jpg" height="514" width="272" /></a></p>
</p>
</li>
</ul>
</p>
<!----------in_ct1 结束---------->
</p>
<!----------in_ct结束---------->
</p>
</body>
</html>上示範圖
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
jquery實作疊層3D文字方法詳解
以上是jquery實現圖片滑動切換（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
win11家庭版切換專業版操作教學_win11家庭版切換專業版操作教學
Mar 20, 2024 pm 01:58 PM
Win11家庭版怎麼轉換成Win11專業版?在Win11系統中，分為了家庭版、專業版、企業版等，而大部分Win11筆電都是預先安裝Win11家用版系統。而今天小編就帶給大家win11家庭版切換專業版操作步驟!1、先在win11桌面此電腦上右鍵屬性。 2、點選更改產品金鑰或升級windows。 3、然後進入後點選更改產品金鑰。 4.再輸入啟動金鑰：8G7XN-V7YWC-W8RPC-V73KB-YWRDB，選擇下一步。 5.接著就會提示成功，這樣就可以將win11家用版升級win11專業版了。
jQuery中如何使用PUT請求方式？
Feb 28, 2024 pm 03:12 PM
jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u
excel切換工作簿快速鍵的使用方法
Mar 20, 2024 pm 01:50 PM
在excel軟體的應用程式裡，我們已經習慣使用快捷鍵，讓有些操作變得更簡單和快捷，excel的多個表格之間有時候會有相關的數據，我們在查看時，要不停的切換工作簿，如果有更快捷的切換方法，就會省下很多切換浪費的時間，對工作效率的提高有很大的幫助，什麼辦法可以完成快速的切換呢，針對這個問題，小編今天要講的內容是：excel切換工作簿快速鍵的使用方法。 1.首先在開啟的excel表格的下方可以看到有多個工作簿，需要快速切換不同的工作簿，如下圖所示。 2、然後按下鍵盤上的Ctrl鍵不動，如果需要向右選擇工作
認識全角與半角：切換技巧一覽
Mar 25, 2024 pm 01:36 PM
在日常生活中，我們經常會遇到全角和半角的問題，但可能很少有人深入了解它們的意義和差異。全角和半角，其實是一種字元編碼方式的概念，而在電腦輸入、編輯、排版等方面都有其特殊的應用。本文將深入探討全角和半角的差異、切換技巧以及在實際生活中的應用。首先，全角和半角在漢字文字領域中的定義是：一個全角字元佔用一個字元位置，而一個半角字元佔用半個字元位置。在計算機中，通
jQuery小技巧：快速修改頁面所有a標籤的文本
Feb 28, 2024 pm 09:06 PM
標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：<
使用jQuery修改所有a標籤的文字內容
Feb 28, 2024 pm 05:42 PM
標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：
輕鬆學會全角半角切換方法
Mar 25, 2024 pm 03:42 PM
全角半角是指中文輸入法中的兩種不同輸入狀態。全角是指每個字元佔用一個全角字元位置，而半角則是每個字元佔用一個半角字元位置。使用電腦輸入中文時，有時需要在全角和半角之間切換，以適應不同的輸入場景。接下來我們就來介紹幾種常用的全角半角切換方法，讓大家輕鬆學會如何在中文輸入中進行全角半角的切換。方法一：使用快速鍵切換全角半角在大多數中文輸入法軟體中，可以使
了解jQuery中eq的作用及應用場景
Feb 28, 2024 pm 01:15 PM
jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s
