鼠标滑动换图片html,jQuery实现鼠标滑动切换图片

本文实例为大家分享了jQuery实现鼠标滑动切换图片的具体代码，供大家参考，具体内容如下

手风琴

.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;

}

• 
• 
• 
• 
• 

$(function(){

$('.q li').mouseover(function(){

$('.q li').removeClass();

$(this).addClass('ww');

})

})

再补充一段：鼠标移动切换图片操作

Document

function picture(pic){

//id读取图片及路径

document.getElementById('pic').src='ps/'+pic;

}

//移上去事件

alt="" οnmοuseοver='picture("01.jpg")'οnmοuseοut='picture("02.jpg")'

//移出去事件

οnkeydοwn='picture("03.jpg")'>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。