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

所属分类： JQ特效媒体幻灯片和轮播图

查看演示立即下载

插件描述：此插件为jquery插件，代码简单易懂，均有注释

更新时间：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,//是否自动播放
});

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

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：全国多级联动下拉菜单（原创）
下一个特效： jquery时间轴