基于jquery轮播图插件（简单实现）(原创)

 查看演示  website  立即下载

更新时间：2018/8/6 下午5:48:36

更新说明：应使用者需求，更新此轮播图插件，将原代码全部推翻重写，代码相对更加精简凝练。

更新内容:

    1.很多使用者希望这个轮播图插件能在同一个页面多次使用，本次更新已实现此需求。

    2.部分使用者不需要图片下标数字，现可配置不需要数字。

    3.本次更新可实现图片轮播方向，可向右或左轮播。

以下为配置使用方式:    

<!-- 引入文件 -->
<link rel="stylesheet" href="./css/style.css"> 
<script src="./js/jquery.min.js"></script> 
<script src="./js/carousel.js"></script>

配置插件

$('#carousel1').carousel({
    el: {
        imgsContainer: '.carousel', // 图片容器 
        prevBtn: '.carousel-prev', // 上翻按钮 
        nextBtn: '.carousel-next', // 下翻按钮
        indexContainer: '.carousel-index', // 下标容器  
    },
    conf: {
        auto: true, //是否自动播放 true/false 默认:true 
        needIndexNum: true, //是否需要下标数字 true/false 默认:true 
        animateTiming: 1000, //动画时长(毫秒) 默认:1000 
        autoTiming: 3000, //自动播放间隔时间(毫秒) 默认:3000 
        direction: 'right', //自动播放方向 left/right 默认:right   
    }
});

 如果有需要， 可添加以下代码提供用户体验：

 $(".carousel-prev").hover(function() {
     $(this).find("img").attr("src", "./images/icons/left_btn2.png");
 }, function() {
     $(this).find("img").attr("src", "./images/icons/left_btn1.png");
 });
 $(".carousel-next").hover(function() {
     $(this).find("img").attr("src", "./images/icons/right_btn2.png");
 }, function() {
     $(this).find("img").attr("src", "./images/icons/right_btn1.png");
 });
 $("#carousel3").find('.carousel-prev,.carousel-next,.carousel-index').hide();
 $("#carousel3").hover(function() {
     $(this).find(".carousel-prev,.carousel-next,.carousel-index").stop().fadeIn(300);
 }, function() {
     $(this).find(".carousel-prev,.carousel-next,.carousel-index").stop().fadeOut(300);
 });

使用遇到问题请留言...

使用方法

发布时间：2018-1-11 1:01

只需要引用以下文件

<script type="text/javascript" src="./scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./scripts/carousel.js"></script>

调用方法

$(".carousel-content").carousel({
	carousel : ".carousel",//轮播图容器
	indexContainer : ".img-index",//下标容器
	prev : ".carousel-prev",//左按钮
	next : ".carousel-next",//右按钮
	timing : 5000,//自动播放间隔
	animateTime : 800,//动画时间
	auto : true,//是否自动播放
});

引入插件并简单配置即可使用！

PREVIOUS:
NEXT:
jquery时间轴
全国多级联动下拉菜单（原创）