时间:2021-05-26
本文实例为大家分享了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>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了js实现鼠标切换图片的具体代码,供大家参考,具体内容如下实现效果,可以利用鼠标移动在对应的小点点上,或者点击左右两侧的箭头切换图片,并在图片
在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascr
左右切换图片控件大家都用ViewPager,ViewFipper比较多吧,我之前也用ViewPager实现了,使用ViewPager实现左右循环滑动图片,有兴趣
本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果。分享给大家供大家参考,具体如下:这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏
本文实例讲述了Jquery实现动态切换图片的方法。分享给大家供大家参考。具体实现方法如下:#tbl{border-collapse:collapse;borde