本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 首 页
  • VPS/云主机
  • 利用jQuery实现响应式Banner图片轮播代码
    时间:2020-01-07 18:10 来源:开源之家 作者:开源之家测试提供 下载:129 次
    • 源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    • 源码类型:特效源码
    • 源码大小:303 KB
    • 运行环境:HTML
    • 下载次数:129 次
    • 推荐VPS:
    • 提取密码/源码编号:
    • 本地下载
    • 本地下载
    • 》网盘下载,每日更新

    利用jQuery实现响应式Banner图片轮播代码

    特效描述:利用jQuery实现 响应式 Banner图片 轮播代码,利用jQuery实现响应式Banner图片轮播代码

    代码结构

    1. 引入CSS

    1
    <link rel="stylesheet" href="css/style.css" />

    2. 引入JS

    1
    <script type="text/javascript" src="js/jquery.min.js"></script>

    3. HTML代码

    <div class="c-banner">
        <div class="banner">
            <ul>
                <li><img src="img/lunbo1.jpg"></li>
                <li><img src="img/lunbo2.jpg"></li>
                <li><img src="img/lunbo3.jpg"></li>
            </ul>
        </div>
        <div class="nexImg">
            <img src="img/nexImg.png" />
        </div>
        <div class="preImg">
            <img src="img/preImg.png" />
        </div>
        <div class="jumpBtn">
            <ul>
                <li jumpImg="0"></li>
                <li jumpImg="1"></li>
                <li jumpImg="2"></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
    //定时器返回值
    var time=null;
    //记录当前位子
    var nexImg = 0;
    //用于获取轮播图图片个数
    var imgLength = $(".c-banner .banner ul li").length;
    //当时动态数据的时候使用,上面那个删除
    // var imgLength =0;
    //设置底部第一个按钮样式
    $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
    //页面加载
    $(document).ready(function(){
        // dynamicData();
        //启动定时器,设置时间为3秒一次
        time =setInterval(intervalImg,3000);
    });
    //点击上一张
    $(".preImg").click(function(){
        //清楚定时器
        clearInterval(time);
        var nowImg = nexImg;
        nexImg = nexImg-1;
        console.log(nexImg);
        if(nexImg<0){
            nexImg=imgLength-1;
        }
        //底部按钮样式设置
        $(".c-banner .jumpBtn ul li").css("background-color","white");
        $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
        //将当前图片试用绝对定位,下一张图片试用相对定位
        $(".c-banner .banner ul img").eq(nowImg).css("position","absolute");
        $(".c-banner .banner ul img").eq(nexImg).css("position","relative");
        //轮播淡入淡出
        $(".c-banner .banner ul li").eq(nexImg).css("display","block");
        $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000);
        $(".c-banner .banner ul li").eq(nowImg).stop().animate({"opacity":0},1000,function(){
            $(".c-banner ul li").eq(nowImg).css("display","none");
        });
        //启动定时器,设置时间为3秒一次
        time =setInterval(intervalImg,3000);
    })
    //点击下一张
    $(".nexImg").click(function(){
        clearInterval(time);
        intervalImg();
        time =setInterval(intervalImg,3000);
    })
    //轮播图
    function intervalImg(){
        if(nexImg<imgLength-1){
            nexImg++;
        }else{
            nexImg=0;
        }
        //将当前图片试用绝对定位,下一张图片试用相对定位
        $(".c-banner .banner ul img").eq(nexImg-1).css("position","absolute");
        $(".c-banner .banner ul img").eq(nexImg).css("position","relative");
        $(".c-banner .banner ul li").eq(nexImg).css("display","block");
        $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000);
        $(".c-banner .banner ul li").eq(nexImg-1).stop().animate({"opacity":0},1000,function(){
            $(".c-banner .banner ul li").eq(nexImg-1).css("display","none");
        });
        $(".c-banner .jumpBtn ul li").css("background-color","white");
        $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
    }
    //轮播图底下按钮
    //动态数据加载的试用应放在请求成功后执行该代码,否则按钮无法使用
    $(".c-banner .jumpBtn ul li").each(function(){
        //为每个按钮定义点击事件
        $(this).click(function(){
            clearInterval(time);
            $(".c-banner .jumpBtn ul li").css("background-color","white");
            jumpImg = $(this).attr("jumpImg");
            if(jumpImg!=nexImg){
                var after =$(".c-banner .banner ul li").eq(jumpImg);
                var befor =$(".c-banner .banner ul li").eq(nexImg);
                //将当前图片试用绝对定位,下一张图片试用相对定位
                $(".c-banner .banner ul img").eq(nexImg).css("position","absolute");
                $(".c-banner .banner ul img").eq(jumpImg).css("position","relative");
                after.css("display","block");
                after.stop().animate({"opacity":1},1000);
                befor.stop().animate({"opacity":0},1000,function(){
                    befor.css("display","none");
                });
                nexImg=jumpImg;
            }
            $(this).css("background-color","black");
            time =setInterval(intervalImg,3000);
        });
    });
        //动态数据轮播图
        //动态数据加载的时候不要直接点击demo.html运行否则可能请求不到本地json数据
    // function dynamicData(){
    //  $.ajax({
    //      url:"js/test.json",
    //      type:"get",
    //      dataType:"json",
    //      success:function(data){
    //          if(data.code==1){
    //              var data = data.data;
    //              $.each(data,function(i){
    //                  $(".c-banner .banner ul").append('<li><img src="'+this.img+'"></li>');
    //                  $(".c-banner .jumpBtn ul").append('<li jumpImg="'+i+'"></li>')
    //              })
    //          }
    //          //获取图片总数量
    //          imgLength = $(".c-banner .banner ul li").length;
    //          //为底部按钮定义单击事件
    //          $(".c-banner .jumpBtn ul li").each(function(){
    //              //为每个按钮定义点击事件
    //              $(this).click(function(){
    //                  clearInterval(time);
    //                  $(".c-banner .jumpBtn ul li").css("background-color","white");
    //                  jumpImg = $(this).attr("jumpImg");
    //                  if(jumpImg!=nexImg){
    //                      var after =$(".c-banner .banner ul li").eq(jumpImg);
    //                      var befor =$(".c-banner .banner ul li").eq(nexImg);
    //                      
    //                      //将当前图片试用绝对定位,下一张图片试用相对定位
    //                      $(".c-banner .banner ul img").eq(nexImg).css("position","absolute");
    //                      $(".c-banner .banner ul img").eq(jumpImg).css("position","relative");
    //                      
    //                      after.css("display","block");
    //                      after.stop().animate({"opacity":1},1000);
    //                      befor.stop().animate({"opacity":0},1000,function(){
    //                          befor.css("display","none");
    //                      });
    //                      nexImg=jumpImg;
    //                  }
    //                  $(this).css("background-color","black");
    //                  time =setInterval(intervalImg,3000);
    //              });
    //          });
    //      }
    //  })
    // }
    </script>
    <div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    </div>

    利用jQuery实现响应式Banner图片轮播代码

    郑重声明:
    本站资源均由高价购买、会员分享,全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    若您需要商业运营或用于其它商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。如有侵犯您的版权,请提交软件证书/图片地址和源码链接 我们尽快处理。

    开源之家广告栏目A
    开源之家广告栏目B
    开源之家广告栏目C
    在线客服
    客服微信

    扫一扫......加客服微信