之前有写过一篇《简洁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.cn/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="https://blog.skillcat.cn/" 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.cn">技术猫</a>. All rights reserved.</p>
　　　<p><h4>设计源于生活，细节成就品质</h4></p>
　　</footer>
　</body>
</html>

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

 

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

赏

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