用jQuery实现鼠标点击左右按钮滑动切换

使用jQuery实现点击左右滑动开关的特效；

HTML代码如下：

！-整体背景div-div class=' warp '！-middle content div-div class=' div content ' div class=' content ' ul class=' content ul ' liimg src=' http :/js1/img/1 . jpg '/span人生如歌，春如梦，早春如画。春天像花季里的美少女，让人悸动，而春天又像亭亭玉立的少妇，让人期待/p/Li Li id=' second ' img src=' http :/js1/img/2 . jpg '/span。赞/span hr/p所有活力开始复苏，和我一样温暖。现在是花季，不是吗？/p/Li liimg src=' http :/js1/img/3 _ 1 . jpg '/span梦想，永不停止/span hr/p怕苦比苦本身更可怕。没有一个灵魂能在追逐梦想的时候忍受痛苦。/p/Li liimg src=' http :/js1/img/4 . jpg '/span树叶摆动中的时间/span hr/p时间会扼杀一切，她会让我们忘记。我突然想到，如果我们忘记了时间，我们就可以忘记所有我们想忘记的事情。/p/Li liimg src=' http :/js1/img/5 . jpg '/span异乡的海的魅力和夕阳的余晖/span hr/p每个人都可能有一个愿望，希望在夕阳和夕阳的余晖中，与爱人携手走在沙滩上。/p/Li Li img src=' http :/js1/img/6 . jpg '/span城市之夜，一个安静的夜晚/span hr/p城市之夜，一个安静的夜晚。在城市里，冷风在吹。酒吧正在宴饮，这是夜市的开始。/p /li /ul /div！-左按钮-div class=' left BTN ' img src=' http :/js1/img/left . png '/div！-右按钮-div class=' right BTN ' img src=' http :/js1/img/right . png '/div/div/div js代码如下：

$(文档)。ready(function(){//左键点击事件var index=0；var liLen$('.left Btn’)。单击(function(){ index；liLen=$('。content ul . content ul Li’)。长度；//如果(索引=4){ $(. ' content ul . content ul ')，则当前长度的返回值为6。stop()；Alert('已到达最后一页！');索引=3；}else{ if(index==1) { $(')。content ul . content ul’)。动画({left:-index*330}，700)；}else{ $('。content ul . content ul’)。动画({left:-index*305}，700)；} } });//单击事件$('。right BTN’)。单击(function(){ if(index==0){ $(. ' content ul . content ul ')。stop()；Alert('这是第一页，不能再往前走了！' );} else { index-；if(index==0) { $(')。content ul . content ul’)。动画({left:-40}，700)；}else{ $('。content ul . content ul’)。动画({left:-index*310}，700)；} } });});以上是边肖用jQuery点击左右按钮实现滑动切换的介绍。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！