jquery小项目--轮播图

最新推荐文章于 2023-01-17 22:07:52 发布

l1621834733

最新推荐文章于 2023-01-17 22:07:52 发布

阅读量177

点赞数

文章标签： jQuery 轮播图图片切换小圆点控制前端开发

本文链接：https://blog.csdn.net/l1621834733/article/details/109705815

版权

jquery小项目–轮播图

比起原生js，使用jquery制作轮播图更加简洁高效，能够节省出大约一百行代码，以下是代码，附带有详细注释，需要引入jquery库，网上很容易找

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
<!--         去除初始样式-->
*{
    margin:0;
    padding: 0;
}
.inner{
    width: 600px;
    height: 400px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}
.imgList{
    /*position: relative;*/
    margin: 0;
    padding: 0;
    height: 400px;
    width: 4200px;
    position: relative;
    left: -600px;
}
/*        轮播图*/
.imgList li{
    float:left;
    list-style:none;
    height: 400px;
}
/*.pointList .first{*/
/*    border-color: red;*/
/*}*/
/*圆点容器*/
.pointList{
    width: 220px;
    height: 30px;
    position: absolute;
    bottom:20px;
    left:50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    justify-content:space-around;

}
/*小圆点*/
.pointList span{
    float: left;
    height: 0px;
    border: 7px solid darkred;
    border-radius: 50%;

}
.arrow {
    display: block;
    width: 40px;
    height: 40px;
    /*background-color: red;*/
    position: absolute;
    text-decoration: none;
    line-height: 40px;
    text-align: center;
    font-size: 40px;
    background-color: RGBA(0, 0, 0, 0.3);
    color: #fff;
    /*display: none;*/
}
.arrow:hover {
    background-color: RGBA(0, 0, 0, 0.7);
}
#next{
    right: 20px;
    top:50%;
    transform: translateY(-50%);
    opacity: 0;
}
#prev{
    left: 20px;
    top:50%;
    transform: translateY(-50%);
    opacity: 0;
}
.pointList .on{
   border-color:red;
}
    </style>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
    <script type="text/javascript">
        window.onload=function (){
        //轮播制作步骤
        //    轮播分为顺序轮播和点击圆点跳变轮播两大板块
        //    其中，顺序轮播和自动轮播可用逻辑判断来完成，而圆点跳变轮播则需用下标来判断


        //    获得左右两个点击块
            var $next=$('#next');
            var $prev=$('#prev');
        //    获得图片容器
            var $imgList=$('.imgList')
        //    获得小圆点序列
            var $pointList=$('.pointList span');
        //    获得图片张数
            var $images=$pointList.length;
        //    获得图片宽度
            var $IMAGEWIDTH=$('.inner').width();
        //设置每一张图片的总时长
            var TIME=800;
        //    设置帧数
            var FRAMENUMBER=20;
        //    设置每一步走过的步长
            var STEPLENGTH=$IMAGEWIDTH/(TIME/FRAMENUMBER);
        //    获得图片初始left值
            var STARTLEFT=$imgList.position().left;
        //    初始滑动事件是否结束
            var isMoving=false;
        //    初始化小圆点下标
            var index=0;
        //    绑定点击事件
            $next.on('click',function (){
                slider(true)
            })
            $prev.on('click',function (){
                slider(false)
            })
            $pointList.on('click',function (){
                var index=$(this).index()
                slider(index)
            })
        //    设置图片滑动函数,这里通过判断是布尔值还是下标值来分别进行顺序移动和跳变移动
            function slider (next){
            //    设置一个缓冲值来防止点击过快
                if(isMoving){
                    return
                }
                else{
                    isMoving=true;
                //    如果next是布尔值，则进行顺序切换,目标距离为一张图片宽度
                        //设置一个新步长防止外部变量被污染
                    var slidStep=0;
                        //判断布尔值正负，分别对应左右两个方向
                    if (typeof next==='boolean'){
                        next==true?slidStep=STEPLENGTH:slidStep=-STEPLENGTH
                        var targetWidth=STARTLEFT-slidStep*TIME/FRAMENUMBER;
                    }
                    //如果next不为布尔值，则进行小圆点跳变
                   else {
                       var targetWidth=STARTLEFT-(next -index)*$IMAGEWIDTH;
                        //这里的步长是本次点击小圆点与原本的小圆点对应的图片的距离差除以每帧的时间
                        slidStep=(next-index)*$IMAGEWIDTH/(TIME/FRAMENUMBER);
                    }
                        var timer=setInterval(
                            function (){
                                STARTLEFT-=slidStep;
                                if(STARTLEFT==targetWidth){
                                    clearInterval(timer)
                                    isMoving=false
                                //    修正图片位置
                                    if(STARTLEFT==-($images+1)*$IMAGEWIDTH){
                                        STARTLEFT=-$IMAGEWIDTH;
                                    }
                                    else if(STARTLEFT==0){
                                        STARTLEFT=-$images*$IMAGEWIDTH
                                    }
                                }
                                $imgList.css('left',STARTLEFT)
                            },FRAMENUMBER
                        )
                    renew(next);
                }
            //    这里调用小圆点变色函数

            }
        //    设置小圆点变色函数
            function renew(next){
                if(typeof next==='boolean'){
                    next?index=index+1:index=index-1
                }else {
                    index=next;
                }
                //修正小圆点下标
                if(index>=$images){
                    index=0;
                }else if(index<0){
                    index=$images-1
                }
                $pointList.filter('span').removeClass('on')
                $pointList.eq(index).addClass('on')
            }
        //    自动播放
            var auto=setInterval(
              function (){
                  slider(true)
              },3000
            )
        //    鼠标移入停止自动播放,且左右点击块慢慢出现
            $('.inner').hover(function (){
                clearInterval(auto);
                $('#next').animate({
                    opacity:1
                },500)
                $('#prev').animate({
                    opacity:1
                },500)
            },function (){
                //这个地方需要注意不能使用var,否则会重新开辟一块内存，第二次起鼠标移入无法清除定时器
                 auto=setInterval(
                    function (){
                        slider(true)
                    },3000
                )
                $('#next').animate({
                    opacity:0
                },500)
                $('#prev').animate({
                    opacity:0
                },500)
            })
        }
    </script>
</head>
<body>
<div id="wrap">

        <div class="inner">
            <ul class="imgList">
                <li><img src="../../练习/练习3_轮播图/img/5.jpg"></li>
                <li><img src="../../练习/练习3_轮播图/img/1.jpg"></li>
                <li><img src="../../练习/练习3_轮播图/img/2.jpg"></li>
                <li><img src="../../练习/练习3_轮播图/img/3.jpg"></li>
                <li><img src="../../练习/练习3_轮播图/img/4.jpg"></li>
                <li><img src="../../练习/练习3_轮播图/img/5.jpg"></li>
                <li><img src="../../练习/练习3_轮播图/img/1.jpg"></li>
            </ul>
            <div class="pointList">
                <span class="on"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <a href="javascript:;" id="prev" class="arrow"><</a>
            <a href="javascript:;" id="next" class="arrow">></a>
        </div>
    </div>
</body>
</html>

通过修改图片路径，就能实现自己的轮播图效果。

l1621834733

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery小项目--轮播图

jquery小项目–轮播图比起原生js，使用jquery制作轮播图更加简洁高效，能够节省出大约一百行代码，以下是代码，附带有详细注释，需要引入jquery库，网上很容易找<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scala
复制链接

扫一扫