之前有写过一篇《简洁Jquery代码实现banner轮播淡入淡出效果》,哪一款不是很完美,但基本的效果还是有的,这一款算是上一款的升级版本吧,添加一些自适应跟全屏通栏以及鼠标滑入显示左右点击效果,废话不多说接下来附上源码:


<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>jQuery自适应全屏banner焦点图 &minus; 技术猫</title>
  <link rel="shortcut icon" href="../../favicon.ico" />
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  <!-- 演示框架 | 重构:宅小猫 | 设计:唐九 | 2017.3.26 !End !-->

  <!-- Javascript 外链地址 -->
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/superslide.2.1.js"></script>

  <!--[if lt IE 8]>
   <div class="old-browser"><a href="http://browsehappy.com/"><img src="http://demo.skillcat.me/files/images/older-browsers.png" alt="您的浏览器版本过低,为了保障您的访问安全,以及获得更友好的用户体验,建议您升级您的浏览器到最新版本。"></a></div>
  <![endif]-->

  <!-- CSS内容 · Start -->
  <style type="text/css">
  /* fullSlide */
  .banner{width:100%;position:relative;height:410px;background:#000;}
  .banner .bd{margin:0 auto;position:relative;z-index:0;overflow:hidden;}
  .banner .bd ul{width:100% !important;}
  .banner .bd li{width:100% !important;height:410px;overflow:hidden;text-align:center;}
  .banner .bd li a{display:block;height:410px;}
  .banner .hd{width:100%;position:absolute;z-index:1;bottom:0;left:0;height:30px;line-height:30px;}
  .banner .hd ul{text-align:center;}
  .banner .hd ul li{cursor:pointer;display:inline-block;*display:inline;zoom:1;width:42px;height:11px;margin:1px;overflow:hidden;background:#000;filter:alpha(opacity=50);opacity:0.5;line-height:999px;}
  .banner .hd ul .on{background:#f00;}
  .banner .prev,.banner .next{display:block;position:absolute;z-index:1;top:50%;margin-top:-30px;left:15%;z-index:1;width:40px;height:60px;background:url(images/slider-arrow.png) -126px -137px #000 no-repeat;cursor:pointer;filter:alpha(opacity=50);opacity:0.5;display:none;}
  .banner .next{left:auto;right:15%;background-position:-6px -137px;}
  </style>
  <!-- CSS内容 · End -->
 </head>
 <body class="htmleaf-container">
  <!-- 页头部分 -->
  <header class="htmleaf-header">
   <h1>jQuery自适应全屏banner焦点图<span>JQuery Adaptive Full Screen banner</span></h1>
   <div class="htmleaf-links">
    <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://blog.skillcat.me/" title="返回主页"><span>主页</span></a>
    <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="" onclick="history.go(-1)" title="返回"><span> 返回下载页</span></a>
   </div>
  </header>

  <!-- 源码内容 · Start -->
  <div class="htmleaf-content bgcolor-3">
   <div class="banner">
    <div class="bd">
     <ul>
      <li src="url(images/1.jpg)" style="background:#E2025E center 0 no-repeat;">
       <a href="#"></a>
      </li>
      <li src="url(images/2.jpg)" style="background:#DED5A1 center 0 no-repeat;">
       <a href="#"></a>
      </li>
      <li src="url(images/3.jpg)" style="background:#B8CED1 center 0 no-repeat;">
       <a href="#"></a>
      </li>
     </ul>
    </div>
    <div class="hd">
     <ul></ul>
    </div>
    <span class="prev"></span>
    <span class="next"></span>
   </div>
   <!--fullSlide end-->
  </div>
  <!-- 源码内容 · End -->

  <!-- Javascript 源码 · Start -->
  <script type="text/javascript">
   $(".banner").hover(function() {
    $(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
   },
   function() {
    $(this).find(".prev,.next").fadeOut()
   });
   $(".banner").slide({
    titCell: ".hd ul",
    mainCell: ".bd ul",
    effect: "fold",
    autoPlay: true,
    autoPage: true,
    trigger: "click",
    startFun: function(i) {
     var curLi = jQuery(".banner .bd li").eq(i);
     if(!!curLi.attr("src")) {
      curLi.css("background-image", curLi.attr("src")).removeAttr("src")
     }
    }
   });
  </script>
  <!-- Javascript 源码 · End -->

  <!-- 页脚部分 -->
  <footer class="htmleaf-footer">
   <p>适用浏览器:Chrome、FireFox、Safari、Opera、360、傲游、搜狗、世界之窗等主流浏览器. <span style="color: #3755AD;">不支持IE8及以下浏览器!</span></p>
   <p>Copyright &copy; 2016 <a href="http://www.skillcat.me">技术猫</a>. All rights reserved.</p>
   <p><h4>设计源于生活,细节成就品质</h4></p>
  </footer>
 </body>
</html>

[demo]http://demo.skillcat.me/jquery/banner-scrolling-two/index.html[/demo]

 

不同上一篇的是我把这里的外链js文件换成了本地JS文件,加载相对较快,我建议大家也尽量使用本地文件。往后我会继续分享更多相关源码,有需要的小伙伴们希望能即时收藏,分享给他人,感谢您的阅读,谢谢支持~


技术成就梦想,细节成就品质。