jQuery实现鼠标滑动切换图片
更新时间：2020年05月27日 08:38:52 作者：枫思然
这篇文章主要为大家详细介绍了jQuery实现鼠标滑动切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery实现鼠标滑动切换图片的具体代码，供大家参考，具体内容如下
<!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>手风琴</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>
再补充一段：鼠标移动切换图片操作
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文给大家总结了几种使用jQuery实现的分页插件，效果非常不错，有需要的小伙伴可以参考下。2015-11-11
这篇文章主要介绍了JavaScript函数库jQuery的一些基本概念,包括其的添加方法和最基本的使用示例,需要的朋友可以参考下2015-06-06
jQuery File Upload 是一个Jquery文件上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端.这篇文章主要介绍了jQuery File Upload文件上传插件使用,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了jQuery实现圣诞节礼物动画案例解析的相关资料,需要的朋友可以参考下2016-12-12
详解使用jQuery.i18n.properties实现js国际化
这篇文章主要介绍了使用jQuery.i18n.properties实现js国际化，具有一定的参考价值，感兴趣的可以随小编看一看2018-05-05
这种绑定方法会在整个document每pageinit一次,就对xxx进行的某一事件进行绑定,而pageinit事件什么时候会触发，感兴趣的朋友可以了解下2013-09-09
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
大家都知道，jQuery事件触发时有2种机制，一种是事件委托，另一种是事件冒泡,冒泡或默认的事件发生,在某些时候是不需要的,在此就需要一些可以阻止冒泡和默认的事件的方法,本文介绍三种方法做到不同程度的阻止，感兴趣的朋友可以了解下，或许对你了解冒泡事件有所帮助2015-11-11
关于jquery中动态增加select,事件无效的快速解决方法
下面小编就为大家带来一篇关于jquery中动态增加select,事件无效的快速解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
这篇文章主要介绍了jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果,涉及jQuery响应鼠标事件操作页面元素动画效果的实现技巧,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了jquery+json实现数据二级联动的方法,涉及jQuery基于get方法与后台.net程序传输json交互实现二级联动菜单,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
最新评论