杨标的博客

菜单

Administrator
发布于 2020-07-24 / 9141 阅读 / 0 评论 / 0 点赞

jQuery实现轮播图

jQuery实现轮播图

jQuery的fadeIn与fadeOut两个方法可以实现渐隐渐现式的轮播图，而animate 的方法则可以实现滑动式的轮播图，现在我们通过这两个方法来实现两种轮播图

渐隐渐现式轮播

渐隐渐现式的轮播是前端最常见的效果，在以前的时候，我们可以通过原生的JS去实现这个效果，现在我们学习了jQuery以后，则可以通过jQuery的自带动画方法去实现它，现在我们列举代码如下

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手写渐隐渐现轮播</title>
    <link rel="stylesheet" href="./css/index.css" type="text/css">
</head>
<body>
    <div class="slideBox">
        <div class="imgBox">
            <img src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt="">
            <img src="./img/3.jpg" alt="">
            <img src="./img/4.jpg" alt="">
        </div>
        <div class="slide-navigation">
            <div class="prev">
                &lt;
            </div>
            <div class="next">
                &gt;
            </div>
        </div>
        <ul class="pagination">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

<script src="./js/jquery.js" type="text/javascript"></script>
<script>
    $(function(){
        var slideIndex=0;   //轮播图默认是第一张图片显示
        slideChange();

        $(".slide-navigation>div").click(function(){
            if($(this).index()==0){
                //左边
                slideIndex--;
            }
            else if($(this).index()==1){
                //右边
                slideIndex++;
            }
            if(slideIndex<0){
                //等于最后一张
                slideIndex=$(".imgBox>img").length-1;
            }
            else if(slideIndex>$(".imgBox>img").length-1){
                slideIndex=0;
            }
            
            //调用封装好的方法
            slideChange();
            
        });

        function slideChange(){
            $(".imgBox>img").eq(slideIndex).fadeIn().siblings().fadeOut();
            $(".pagination>li").eq(slideIndex).addClass("active").siblings().removeClass("active");
        }

        //点击小圆点的事件
        $(".pagination>li").click(function(){
            slideIndex=$(this).index();
            slideChange();
        })
    })
</script>
</html>

CSS样式代码

@charset "utf-8";
*{
    margin:0px;
    padding:0px;
    list-style-type:none;
}
.slideBox{
    width:440px;
    height:440px;
    position:relative;
    margin: auto;
}
.imgBox{
    width:440px;
    height:440px;
    border:1px solid red;
}
.imgBox img{
    position:absolute;
    left:0px;
    top:0px;
}
.slide-navigation{
    font-size:36px;
    position:absolute;
    width:100%;
    top:50%;
    transform:translateY(-50%);
}
.slide-navigation div{
    width:50px;
    height:50px;
    background-color:rgba(0,0,0,0.5);
    text-align:center;
    line-height:50px;
    border-radius:50%;
    color:white;
    cursor:pointer;
}
.slide-navigation .next{
    float:right;
}
.slide-navigation .prev{
    float:left
}
.pagination{
    text-align:center;
    position:absolute;
    width:100%;
    bottom:10px;
}
.pagination li{
    width:12px;
    height:12px;
    background-color:black;
    border-radius:50%;
    display:inline-block;
    cursor:pointer;
}
.pagination li.active{
    background-color:red;
}

效果图

当我们去点击左右的小箭头的时候，图片会慢慢的隐藏与显示，这就是渐隐渐现式的轮播图

渐隐渐现式的轮播图是一个比较简单的轮播图，多用于门户网站

滑动式轮播图

滑式动的轮播图相较于淡入淡出式的渐隐渐现轮播它，它的难度要大一些，主要使用到的就是jQuery里面的animate()这个方法以及回调，同时要做到循环滚动，相对麻烦，现在我们看一下主要代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1307637_9ki21p865sv.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>轮播图</title>   
</head>
<body>
    <div class="slideBox">
        <div class="imgBox clearfix">
            <img src="./img/4.jpg" alt="">
            <img src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt="">
            <img src="./img/3.jpg" alt="">
            <img src="./img/4.jpg" alt="">
            <img src="./img/1.jpg" alt="">
        </div>
        <div class="l_r">
            <div class="left icon-zuo iconfont"></div>
            <div class="right icon-you iconfont"></div>
        </div>
        <ul class="circle">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script src="./js/jquery.js" type="text/javascript"></script>
<script>
    var imgWidth;
    var slideIndex=1;
    $(function(){
        imgWidth=$(".imgBox img").width();
        $(".imgBox").css("left",imgWidth*slideIndex*(-1)+"px");
        $(".slideBox .l_r div").click(function(){
            //判断左右
            if($(this).index()==0){
                slideIndex--;
            }
            else if($(this).index()==1){
                //向右
                slideIndex++;
            }
            changeImage();
        });
        //点击小圆点，怎么搞
        $(".circle li").click(function(){
           slideIndex=$(this).index()+1;
           changeImage();
            
        });

        //封装成方法，让图片的切换单独成一个模块，方便调用
        function changeImage(){
            $(".imgBox").animate({
                "left":imgWidth*slideIndex*(-1)+"px"
            },200,function(){
                if(slideIndex>=$(".imgBox img").length-1){
                    slideIndex=1;
                }
                else if(slideIndex<=0){
                    slideIndex=$(".imgBox img").length-2;
                }
                $(".imgBox").css("left",imgWidth*slideIndex*(-1)+"px");
                $(".circle li").eq(slideIndex-1).addClass("active").siblings().removeClass("active");
            })
        }
    })
</script>
</html>

CSS代码

@charset "utf-8";
*{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.slideBox{
    width: 1366px;
    height: 768px;
    border: 2px solid red;
    margin: auto;
    position: relative;
    overflow:hidden;
}
.imgBox{
    width: calc(1366px * 6);
    position: absolute;
    left: 0px;
    top: 0px;
}
.imgBox img{
    float: left;
}
.slideBox .l_r{
    position: absolute;
    left: 0px;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
.slideBox .l_r .iconfont{
    font-size: 36px !important;
    color: lightgray;
}
.slideBox .l_r .left{
    float: left;
}
.slideBox .l_r .right{
    float: right;
}
.circle{
    text-align: center;
    position: absolute;
    bottom: 10px;
    width: 100%;
}
.circle li{
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: black;
    border-radius: 50%;
    cursor:pointer;
}
.circle li.active{
    background-color: red;
}

在上面的HTML与JS代码里面，我们要注意一点，如果要实现循环滚动的功能 ，这个时候，需要要第一张图片的前面添加最后一张图片，同时要在最后一张的后面添加第一张图片，以实现“视觉差”的效果

效果图

使用swiper实现轮播图

在日常的开发工作当中，我们可以借助于第三方的插件实现轮播图的效果，这个插件是swiper.js插件

swiper.js官方网站

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>swiper</title>
    <link rel="stylesheet" href="./js/swiper/css/swiper.css">
    <style>
        .swiper-container{
            width: 1366px;
            height: 768px;
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!--轮播的每一项-->
            <div class="swiper-slide">
                <img src="./img/1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/2.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/3.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/4.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 相当于轮播图里面的小圆点-->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 左右箭头-->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <!-- 滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
</body>
<script src="./js/swiper/js/swiper.js"></script>
<script>
    //初始化  ,第一个参数是swiperClass代表要初始化的轮播的class名称
    //第二个参数代表配置信息
    var mySwiper=new Swiper(".swiper-container",{
        loop:true,      //循环
        direction:"horizontal",    //水平的轮播     垂直是vertical
        //左右导航
        navigation:{
            nextEl:".swiper-button-next",   //下一个
            prevEl:".swiper-button-prev"    //上一个
        },
        //分页器
        pagination:{
            el: '.swiper-pagination'
        },
        scrollBar:{
            el:".swiper-scrollbar"
        }
    })
</script>
</html>

我们参照swiper.js的官方网站在这里实现了基本的轮播图效果，如下图所示

1567945104423

通过swiper.js实现的轮播图，我们可以进行鼠标滑动，这个插件可以在移动端与PC端时使用

在使用这个插件的过程中要注意几点配置

  1. new Swiper()在这里需要接收一个必选参数swiperClass这个代表我们要用哪一个元素做轮播
  2. 在实始化new Swiper()的过程当中，它的第二个参数代表配置项，基本常用的配置信息如下
    • loop是否实现循环
    • direction是横向的轮播还是纵向的轮播(它的值有horizontal与vertical)，默认为横向horizontal
    • navigation用于设置左右导航器，也就是左右的箭头
    • pagination用于设置下面的小圆点

使用swipe实现app常用内页切换效果

首先我们先看一下效果图

app内页切换效果

上面的app页切换效果是前端常见的效果，我们现在通过swiper.js这个插件去实现上面的效果

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>猫眼</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1307637_hyfbu2o9u8.css">
    <link rel="stylesheet" href="./css/maoyan.css">
    <link rel="stylesheet" href="./js/swiper/css/swiper.css">
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function () {
            //当前设备宽度/设计向的宽度*100的换算比例
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + "px";
        });
    </script>
</head>
<body>
    <div id="app">
        <div class="header">
            猫眼电影
        </div>
        <div class="content">
            <ul class="topNav">
                <li class="active">正在热映</li>
                <li>即将上映</li>
            </ul>
            <div class="innerContent">
                <div class="swiper-container">
                    <!-- 应该放图片轮播，我没有图片，应该放DIV -->
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-color: deeppink;opacity:0.5">Slide 0</div>
                        <div class="swiper-slide" style="background-color: orange;opacity:0.5">Slide 1</div>
                    </div>
                </div>
            </div>
        </div>
        <ul class="bottomBar">
            <li>
                <span class="iconfont icon-dianying"></span>
                <span>影片</span>
            </li>
            <li>
                <span class="iconfont icon-yingyuana"></span>
                <span>影院</span>
            </li>
            <li>
                <span class="iconfont icon-ranking"></span>
                <span>票房</span>

            </li>
            <li>
                <span class="iconfont icon-wode1"></span>
                <span>我的</span>
            </li>
        </ul>
    </div>
</body>
<script src="./js/swiper/js/swiper.js" type="text/javascript"></script>
<script src="./js/jquery.js" type="text/javascript"></script>
<script>
    $(function () {
        var mySwiper=new Swiper(".swiper-container",{
            //监听swiper的事件
            on:{
                slideChange:function(){
                    // mySwiper.activeIndex
 $(".topNav>li").eq(this.activeIndex).addClass("active").siblings().removeClass("active");
                }
            }
        });
        //绑定上面的点击事件
        $(".topNav>li").click(function(){
            $(this).addClass("active").siblings().removeClass("active");
            //在这里，我们能不能拿到索引
            var index=$(this).index();
            mySwiper.slideTo(index);
        });
    });
</script>
</html>

CSS代码

@charset "utf-8";
*{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
body{
    font-size: 16px;
}
#app{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
:root{
    --p_color:#E54847;
}
.header{
    height: 1rem;
    background-color: var(--p_color);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}
.bottomBar{
    height: 1.1rem;
    border-top: 1px solid #ececec;
    display: flex;
    justify-content: space-around;
    background-color: white;
}
.bottomBar li{
    display: flex;
    flex-direction: column;
    height: inherit;
    width: 1.1rem;
    align-items: center;
}
.bottomBar li .iconfont{
    font-size: .64rem;
}
.bottomBar li span:last-child{
    font-size: .24rem;
}
.content{
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
.topNav{
    display: flex;
    height: .9rem;
}
.topNav>li{
    flex: 1;
    border-bottom: 2px solid lightgray;
    display: flex;
    height: inherit;
    justify-content: center;
    align-items: center;
}
.topNav>li.active{
    color: var(--p_color);
    border-bottom-color: var(--p_color);
    font-weight: bold;
}
.innerContent{
    flex: 1;
    overflow: auto;
}
.swiper-container{
    width: 100%;
    height: 100%;
}

我们可以看到上面是两个内页的切换，如果是多个内页，我们只需在HTML里面多添加几个DIV即可

jQuery基础
jQuery扩展方法

评论