在做web前端开发的时候经常遇到图片滑动切换特效，接下来通过本文给大家分享使用jquery实现鼠标点击左右按钮滑动切换特效，感兴趣的朋友参考实现代码
使用jquery实现点击左右滑动切换特效：
html代码如下：
<!--整体背景p-->
<p class="warp">
<!--中间内容p-->
<p class="pcontent">
<p class="content">
<ul class="contentul">
<li>
<img src="/js1/img/1.jpg" />
<span>生命如歌，春天似梦 </span>
<hr />
<p>生命如歌，春天似梦，初春更是如诗如画。春似花季靓女，让人悸动，春似那雍容少妇，令人憧憬</p>
</li>
<li id="second">
<img src="/js1/img/2.jpg" />
<span>如花的季节，赞扬 </span>
<hr />
<p>一切的生命力开始复苏，温暖如我，正是如花的季节，不是吗？</p>
</li>
<li>
<img src="/js1/img/3_1.jpg" />
<span>梦想，不休不止</span>
<hr />
<p>畏惧忍受痛苦比忍受痛苦本身更加糟糕。没有一个心灵在追逐它的梦想时会忍受痛苦。</p>
</li>
<li>
<img src="/js1/img/4.jpg" />
<span>时间在叶子的摆动里</span>
<hr />
<p>时间会消磨一切的，她会让我们忘记的。突然想：如果我们忘记了时间，是不是想忘掉的就都能忘掉。</p>
</li>
<li>
<img src="/js1/img/5.jpg" />
<span>异乡的海韵,落日的余辉</span>
<hr />
<p>每个人或许都有一个愿望，希望在某年某月某天可以和相爱的人牵手漫步在夕阳西下，落日余晖的海滩中，细数彼此生活的点点滴滴。</p>
</li>
<li>
<img src="/js1/img/6.jpg" />
<span>城市夜，一个静谧的夜</span>
<hr />
<p>城市夜，一个静谧的夜。城市里，寒风瑟瑟。酒吧灯红酒绿，这，才是夜市的开始。</p>
</li>
</ul>
</p>
<!--向左按钮-->
<p class="leftbtn"><img src="/js1/img/left.png" /></p>
<!--向右按钮-->
<p class="rightbtn"><img src="/js1/img/right.png" /></p>
</p>
</p>
js代码如下：
$(document).ready(function(){
//向左按钮点击事件
var index = 0;
var lilen;
$(".leftbtn").click(function(){
index++;
lilen = $(".content ul.contentul li").length; //目前长度返回值为6
if(index >= 4)
{
$(".content ul.contentul").stop();
alert("已经到达最后一页！");
index = 3;
}else{
if(index == 1)
{
$(".content ul.contentul").animate({left:-index*330},700);
}else{
$(".content ul.contentul").animate({left:-index*305},700);
}
}
});
//向右按钮点击事件
$(".rightbtn").click(function(){
if(index == 0)
{
$(".content ul.contentul").stop();
alert("这是第一页，不能再往前翻了！");
}else{
index--;
if(index == 0)
{
$(".content ul.contentul").animate({left:-40},700);
}else{
$(".content ul.contentul").animate({left:-index*310},700);
}
}
});
});
以上就是jquery如何实现鼠标点击左右按钮滑动切换的示例的详细内容。