jQuery實(shí)現(xiàn)鼠標(biāo)滑動(dòng)切換圖片
更新時(shí)間：2020年05月27日 08:38:52 作者：楓思然
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑動(dòng)切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)鼠標(biāo)滑動(dòng)切換圖片的具體代碼，供大家參考，具體內(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)移動(dòng)切換圖片操作
<!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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用JQuery實(shí)現(xiàn)的分頁(yè)插件分享
本文給大家總結(jié)了幾種使用jQuery實(shí)現(xiàn)的分頁(yè)插件，效果非常不錯(cuò)，有需要的小伙伴可以參考下。2015-11-11
初步認(rèn)識(shí)JavaScript函數(shù)庫(kù)jQuery
這篇文章主要介紹了JavaScript函數(shù)庫(kù)jQuery的一些基本概念,包括其的添加方法和最基本的使用示例,需要的朋友可以參考下2015-06-06
jQuery File Upload 是一個(gè)Jquery文件上傳組件，支持多文件上傳、取消、刪除，上傳前縮略圖預(yù)覽、列表顯示圖片大小，支持上傳進(jìn)度條顯示；支持各種動(dòng)態(tài)語(yǔ)言開(kāi)發(fā)的服務(wù)器端.這篇文章主要介紹了jQuery File Upload文件上傳插件使用,需要的朋友可以參考下2016-12-12
jQuery實(shí)現(xiàn)圣誕節(jié)禮物動(dòng)畫(huà)案例解析
這篇文章主要介紹了jQuery實(shí)現(xiàn)圣誕節(jié)禮物動(dòng)畫(huà)案例解析的相關(guān)資料,需要的朋友可以參考下2016-12-12
詳解使用jQuery.i18n.properties實(shí)現(xiàn)js國(guó)際化
這篇文章主要介紹了使用jQuery.i18n.properties實(shí)現(xiàn)js國(guó)際化，具有一定的參考價(jià)值，感興趣的可以隨小編看一看2018-05-05
這種綁定方法會(huì)在整個(gè)document每pageinit一次,就對(duì)xxx進(jìn)行的某一事件進(jìn)行綁定,而pageinit事件什么時(shí)候會(huì)觸發(fā)，感興趣的朋友可以了解下2013-09-09
jquery關(guān)于事件冒泡和事件委托的技巧及阻止與允許事件冒泡的三種實(shí)現(xiàn)方法
大家都知道，jQuery事件觸發(fā)時(shí)有2種機(jī)制，一種是事件委托，另一種是事件冒泡,冒泡或默認(rèn)的事件發(fā)生,在某些時(shí)候是不需要的,在此就需要一些可以阻止冒泡和默認(rèn)的事件的方法,本文介紹三種方法做到不同程度的阻止，感興趣的朋友可以了解下，或許對(duì)你了解冒泡事件有所幫助2015-11-11
關(guān)于jquery中動(dòng)態(tài)增加select,事件無(wú)效的快速解決方法
下面小編就為大家?guī)?lái)一篇關(guān)于jquery中動(dòng)態(tài)增加select,事件無(wú)效的快速解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
jquery實(shí)現(xiàn)點(diǎn)擊彈出帶標(biāo)題欄的彈出層(從右上角飛入)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊彈出帶標(biāo)題欄的彈出層(從右上角飛入)效果,涉及jQuery響應(yīng)鼠標(biāo)事件操作頁(yè)面元素動(dòng)畫(huà)效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-09-09
jquery+json實(shí)現(xiàn)數(shù)據(jù)二級(jí)聯(lián)動(dòng)的方法
這篇文章主要介紹了jquery+json實(shí)現(xiàn)數(shù)據(jù)二級(jí)聯(lián)動(dòng)的方法,涉及jQuery基于get方法與后臺(tái).net程序傳輸json交互實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11