jQuery實現(xiàn)鼠標(biāo)滑動切換圖片
更新時間：2020年05月27日 08:38:52 作者：楓思然
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)鼠標(biāo)滑動切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery實現(xiàn)鼠標(biāo)滑動切換圖片的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>手風(fēng)琴</title>
<script src="./jQuery.js"></script>
<style>
.bigbox{
width: 610px;
height: 270px;
border: 1px solid #ccc;
margin: 0 auto;
}
ul{
margin: 0;
padding: 0;
float: left;
height: 270px;
}
li{
float: left;
list-style: none;
width: 50px;
height: 270px;
border: 1px solid #ccc;
overflow: hidden;
}
img{
width: 400px;
}
.ww{
width: 400px;
}
</style>
</head>
<body>
<div class="bigbox">
<ul class="q">
<li class="ww"><img src="./image/d1.jpeg" alt=""></li>
<li><img src="./image/d2.jpeg" alt=""></li>
<li><img src="./image/d3.jpeg" alt=""></li>
<li><img src="./image/d4.jpeg" alt=""></li>
<li><img src="./image/d5.jpeg" alt=""></li>
</ul>
</div>
<script>
$(function(){
$('.q li').mouseover(function(){
$('.q li').removeClass();
$(this).addClass('ww');
})
})
</script>
</body>
</html>
再補(bǔ)充一段：鼠標(biāo)移動切換圖片操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function picture(pic){
//id讀取圖片及路徑
document.getElementById('pic').src='ps/'+pic;
}
</script>
</head>
<body>
<img id="pic" src="ps/01.jpg" width="400px"
//移上去事件
alt="" οnmοuseοver='picture("01.jpg")'οnmοuseοut='picture("02.jpg")'
//移出去事件
οnkeydοwn='picture("03.jpg")'>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文給大家總結(jié)了幾種使用jQuery實現(xiàn)的分頁插件，效果非常不錯，有需要的小伙伴可以參考下。2015-11-11
初步認(rèn)識JavaScript函數(shù)庫jQuery
這篇文章主要介紹了JavaScript函數(shù)庫jQuery的一些基本概念,包括其的添加方法和最基本的使用示例,需要的朋友可以參考下2015-06-06
jQuery File Upload 是一個Jquery文件上傳組件，支持多文件上傳、取消、刪除，上傳前縮略圖預(yù)覽、列表顯示圖片大小，支持上傳進(jìn)度條顯示；支持各種動態(tài)語言開發(fā)的服務(wù)器端.這篇文章主要介紹了jQuery File Upload文件上傳插件使用,需要的朋友可以參考下2016-12-12
jQuery實現(xiàn)圣誕節(jié)禮物動畫案例解析
這篇文章主要介紹了jQuery實現(xiàn)圣誕節(jié)禮物動畫案例解析的相關(guān)資料,需要的朋友可以參考下2016-12-12
詳解使用jQuery.i18n.properties實現(xiàn)js國際化
這篇文章主要介紹了使用jQuery.i18n.properties實現(xiàn)js國際化，具有一定的參考價值，感興趣的可以隨小編看一看2018-05-05
這種綁定方法會在整個document每pageinit一次,就對xxx進(jìn)行的某一事件進(jìn)行綁定,而pageinit事件什么時候會觸發(fā)，感興趣的朋友可以了解下2013-09-09
jquery關(guān)于事件冒泡和事件委托的技巧及阻止與允許事件冒泡的三種實現(xiàn)方法
大家都知道，jQuery事件觸發(fā)時有2種機(jī)制，一種是事件委托，另一種是事件冒泡,冒泡或默認(rèn)的事件發(fā)生,在某些時候是不需要的,在此就需要一些可以阻止冒泡和默認(rèn)的事件的方法,本文介紹三種方法做到不同程度的阻止，感興趣的朋友可以了解下，或許對你了解冒泡事件有所幫助2015-11-11
關(guān)于jquery中動態(tài)增加select,事件無效的快速解決方法
下面小編就為大家?guī)硪黄P(guān)于jquery中動態(tài)增加select,事件無效的快速解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
jquery實現(xiàn)點擊彈出帶標(biāo)題欄的彈出層(從右上角飛入)效果
這篇文章主要介紹了jquery實現(xiàn)點擊彈出帶標(biāo)題欄的彈出層(從右上角飛入)效果,涉及jQuery響應(yīng)鼠標(biāo)事件操作頁面元素動畫效果的實現(xiàn)技巧,需要的朋友可以參考下2015-09-09
jquery+json實現(xiàn)數(shù)據(jù)二級聯(lián)動的方法
這篇文章主要介紹了jquery+json實現(xiàn)數(shù)據(jù)二級聯(lián)動的方法,涉及jQuery基于get方法與后臺.net程序傳輸json交互實現(xiàn)二級聯(lián)動菜單,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11