jQuery實現(xiàn)鼠標(biāo)滑動切換圖片

更新時間：2020年05月27日 08:38:52 作者：楓思然

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)鼠標(biāo)滑動切換圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了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>

再補充一段：鼠標(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)文章

使用JQuery實現(xiàn)的分頁插件分享
本文給大家總結(jié)了幾種使用jQuery實現(xiàn)的分頁插件，效果非常不錯，有需要的小伙伴可以參考下。
2015-11-11
初步認(rèn)識JavaScript函數(shù)庫jQuery
這篇文章主要介紹了JavaScript函數(shù)庫jQuery的一些基本概念,包括其的添加方法和最基本的使用示例,需要的朋友可以參考下
2015-06-06
jQuery File Upload文件上傳插件使用詳解
jQuery File Upload 是一個Jquery文件上傳組件，支持多文件上傳、取消、刪除，上傳前縮略圖預(yù)覽、列表顯示圖片大小，支持上傳進度條顯示；支持各種動態(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
jquery mobile事件多次綁定示例代碼
這種綁定方法會在整個document每pageinit一次,就對xxx進行的某一事件進行綁定,而pageinit事件什么時候會觸發(fā)，感興趣的朋友可以了解下
2013-09-09
jquery關(guān)于事件冒泡和事件委托的技巧及阻止與允許事件冒泡的三種實現(xiàn)方法
大家都知道，jQuery事件觸發(fā)時有2種機制，一種是事件委托，另一種是事件冒泡,冒泡或默認(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