大佬教程收集整理的这篇文章主要介绍了Jquery制作内容切换插件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
//需求：点击左右导航箭头，实现内容的切换
//@L_772_1@如下
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<style type="text/css">
*{
@H_979_40@margin: 0;
}
ul{
}
}
ul{
}
ul li{
BACkground-color: red;
@H_979_40@margin-right: 20px;
}
.prev,.next{
BACkground-color: rgba(200,200,0.4);
}
.prev{
}
.next{
}
</style>
</head>
<body>
<div class="Box">
<ul>
</ul>
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
</div>
<div class="Box1">
<ul>
</ul>
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
</div>
<script type="text/javascript" src="jquery.1.11.1.min.js"></script>
<script type="text/javascript">
jQuery.fn.extend({
// num:每次切换的内容的个数
changeImg:function change(count,num,speed){
console.log($(this));
var $ul = $(this).find("ul");
var $li = $(this).find("ul li");
var $prev = $(this).find(".prev");
var $next = $(this).find(".next");
// liWidth,每一个li的宽度（@L_574_13@margin）
var liWidth =$li.eq(0).outerWidth(true);
$(this).css("width",count*liWidth-20);
$next.click(function(){
//原索引加上改变值得到新索引
// 最后一li可以显示的索引为li的长度-窗口显示li的个数
if (index>len-count) {
index=0;
},speed);
});
$prev.click(function(){
if (index<0) {
left:(-1)*index*liWidth,speed);
});
$(".Box").changeImg(2,2,2000);
$(".Box1").changeImg(4,4,2000);
</script>
</body>
</html>
以上是大佬教程为你收集整理的Jquery制作内容切换插件全部内容，希望文章能够帮你解决Jquery制作内容切换插件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。