轮播

基于jquery实现的全屏轮播

在头部引入jquery.js

1	<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

样式表

<style>
        * {
        	margin: 0;
        	border: 0;
        	padding: 0;
        }
        ul, li {
        	list-style: none;
        }
        html, body {
        	background-color: #808080;
        }
        html, body, .banner, .banner li {
        width: 100%;
        height: 100%;
        min-width: 800px;
        min-height: 600px; /; /*这里的最小高宽是为了防止窗口太小图片变形*/
       }
       .banner {
       	position: relative;
       	overflow: hidden;
       }
      .banner li {
      		position: absolute;
      		top: 0;
      		left: 0;
      	}
      .banner li {
      	display: none;
      }
  </style>

html

<ul class="banner">
        <li><a href="#"><img src="image/1.png"></a></li>
        <li><a href="#"><img src="image/2.png"></a></li>
        <li><a href="#"><img src="image/3.png"></a></li>
        <li><a href="#"><img src="image/4.png"></a></li>
    </ul>

JS部分


var Fpic = $(".banner li");
        var Lpic = Fpic.find("img");
      //图片自适应浏览器窗口大小
        var winW, winH;
        function findSize() {
            if (window.innerHeight && window.innerWidth) {
                winW = window.innerWidth;
                winH = window.innerHeight;
            }
            if (document.documentElement.clientHeight && document.documentElement.clientWidth) {
                winW = document.documentElement.clientWidth;
                winH = document.documentElement.clientHeight;
            }
            if (document.body.clientHeight && document.body.clientWidth) {
                winW = document.body.clientWidth;
                winH = document.body.clientHeight;
            }
            Lpic.css({ "width": winW, "height": winH });
        }
        window.onload = findSize;
        window.onresize = window_resize;
        var resizeTimeoutId;
        function window_resize(e) {
            window.clearTimeout(resizeTimeoutId);
            resizeTimeoutId = window.setTimeout('findSize();', 100);
        }
        //图片轮播动画
        var FpicNum = Fpic.length;
        Fpic.eq(0).fadeIn();
        var now = 0;
        setInterval(function () {
            if (now >= FpicNum - 1) {
                Fpic.eq(FpicNum - 1).stop().fadeOut(500);
                now = -1;
            }
            Fpic.eq(now).stop().fadeOut(500);
            now++;
            Fpic.eq(now).stop().fadeIn(500);
        }, 3000);

这个效果感觉还可以啊，如果觉得喜欢的话，记得点赞哦

全屏轮播之fullpage插件

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：

支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

第一步：头部引入

我个人是去cdnjs官网，在线引入，你们也可以下载到本地,操作很简单，只需在官网搜索你想要的东西即可

1	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.css">

第二部：尾部引入

1 2	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script>

第三部：编写主体部分

<div id="fullpage">
    <div class="section section1 active">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
    </div>
</div>

第四部：写自己的js

     $(document).ready(function () {
        $("#fullpage").fullpage({
            //可以为每个section项分配一个颜色
            sectionsColor:["red","green","blue","yellow"],
            //控制箭头是否消失
            controlArrows:true,
            verticalCentered:false,
            //滑动滚动速度
            scrollingSpeed:2000,
            //锚链接,可以快速定位到某个页面
            anchors:["page1","page2","page3","page4"],
            //滚动到最顶部后是否连续滚动到地步
            loopTop:true,
            //滚动到最底部后是否连续滚动到顶步
            loopBottom:true,
            //横向slide幻灯片是否循环滚动
//            loopHorizontal:false,
            //如果设为false,将会使用浏览器自带的滚动条,不会按页滚动
            autoScrolling:true,
            //控制小圆点是否出现
            navigation:true,
            navigationPosition:"right",
            navigationTooltips:["page1","page2","page3","page4"],
            //是否显示当前页面的导航信息
            showActiveTooltip:true,
    //是否显示横向幻灯片的导航
            slidesNavigation:true,
        })
    })
</script>

要想知道更多信息，请参考文档

全屏轮播之bootstrap

我们可以在线上引入以下代码

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

样式设置很简单

html,body{
		width: 100%;
		height:100%;
	}
	.onepage,.container,#carousel-example-generic,.carousel-inner,.item{
		width: 100%;
		height:100%;
	}
	.carousel-caption{
		width:100%;
		height:100%;
		line-height: 100%;
		background-color: red;
		left:0;
		right:0;
	}

话不多说直接上代码

<div class="onepage">
    <div class="container" id="myCarousel">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active img"  >
                   <!--  <img src="img/4.jpg"   > -->
                    <div class="carousel-caption">
                       the first
                    </div>
                </div>
                <div class="item img">
                    <!-- <img src="img/2.jpg"> -->
                    <div class="carousel-caption">
                       syhdfh
                    </div>
                </div>
                <div class="item img">
                    <!-- <img src="img/3.jpg" > -->
                    <div class="carousel-caption">
                        syhdfh
                    </div>
                </div>
            </div>
    <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

要实现更多效果请参考官方文档bootstrap

2016-11-22