用jQuery如何手写一个简单的轮播图?(附代码)

用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

用 jQuery 手写轮播图

先上个效果截图:

1.png

主要包含以下功能点:

* 1、页面加载完,自动循环翻页

* 2、翻页按钮,翻页

* 3、定点翻页

* 4、翻页时同步圆点状态

* 5、鼠标进入,停止自动翻页

* 6、快速点击翻页的bug(加 isPaging 标志)

主要包含以下功能点:

* 1、页面加载完,自动循环翻页

* 2、翻页按钮,翻页

* 3、定点翻页

* 4、翻页时同步圆点状态

* 5、鼠标进入,停止自动翻页

* 6、快速点击翻页的bug(加 isPaging 标志)

好了,直接上代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>轮播图 - jQuery 版本</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            
            /**
             * 轮播图布局样式
             */
            
            /**
             * 0、轮播图容器
             */
            #container{
                position: relative;
                width: 600px;
                height: 400px;
                margin: 50px auto;
                overflow: hidden;
            }
            
            /**
             * 1、图片(模拟)
             */
            ul#imgs{
                position: absolute;
                width: calc(600px * 7);
                left: -600px;
            }
            ul#imgs li{
                float: left;
                width: 600px;
                height: 400px;
                
                background-color: #42B983;
                color: white;
                text-align: center;
                line-height: 400px;
                font-size: 100px;
            }
            #imgs li:nth-child(odd){
                /* 模拟图片 */
                /*background-color: #9ACD32;*/
            }
            
            /**
             * 2、前后翻页按钮
             */
            #prev,#next{
                position: absolute;
                top: calc(50% - 15px);;
                width: 40px;
                height: 30px;
                background-color: yellow;
                border: none;
                font-weight: bold;
                font-size: 16px;
                cursor: pointer;
                opacity: .6;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            #prev,#next:focus{
                outline: none;
            }
            #prev{
                left: 10px;
            }
            #next{
                right: 10px;
            }
            
            /**
             * 3、小圆点定点翻页
             */
            ul#index{
                position: absolute;
                top: 360px;
                left: calc(50% - 55px);
                height: 12px;
            }
            ul#index li{
                float: left;
                height: 12px;
                width: 12px;
                margin: 0 5px;
                border-radius:50%;
                background-color: #800080;
                opacity: .4;
                cursor: pointer;
            }
            ul#index li.active{
                opacity: 1;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!--
            1、进行页面布局
            2、js 代码
        -->
        <div id="container">
            <!--图片区-->
            <ul id="imgs">
                <li>
                    <div class="img">5</div>
                </li>
                <li>
                    <div class="img">1</div>
                </li>
                <li>
                    <div class="img">2</div>
                </li>
                <li>
                    <div class="img">3</div>
                </li>
                <li>
                    <div class="img">4</div>
                </li>
                <li>
                    <div class="img">5</div>
                </li>
                <li>
                    <div class="img">1</div>
                </li>
            </ul>
            <button id="prev">&lt;</button>
            <button id="next">&gt;</button>
            <ul id="index">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <script type="text/javascript">
            /**
             * 事件绑定
             * 1、页面加载完,自动循环翻页
             * 2、翻页按钮,翻页
             * 3、定点翻页
             * 4、翻页时同步圆点状态
             * 5、鼠标进入,停止自动翻页
             * 6、快速点击翻页的bug(加 isPaging 标志)
             */
            
            /**
             * 0、自动轮播
             */
            
            /**
             * 一些可以设置的参数
             */
            var PAGE_WIDTH = 600,
                PAGE_SLIDE_TIME = 600,    //单页滑动时间
                PAGE_INTERVAL = 1200 + PAGE_SLIDE_TIME,    //换页间隔时间
                curIndex = 1,    //合法取值 1 ~ 5(0 表示左边假的,6表示右边假的)
                isPaging = false    //是否正在翻页(用来处理连续点击翻页产生的bug)
                
            var intervalId;
            $(function(){
                intervalId = setInterval(next,PAGE_INTERVAL)
            })
            
            /**
             * 1、页面按钮
             */
            $("#next").click(function(){
                next()
            })
            
            $("#prev").click(function(){
                next(false)
            })
            
            $("#index li").click(function(){
                next($(this).index() + 1)
            })
            
            /**
             * 2、鼠标出入
             */
            $("#container").hover(function(){
                clearInterval(intervalId)
            },function(){
                intervalId = setInterval(next,PAGE_INTERVAL)            
            })
            
            /**
             * 翻页核心功能
             * next(boolean|number])
             * 
             *         boolean:    表示前后翻页
             *         number:        表示定点翻页
             */
            function next(flag=true){
                
                if(isPaging){
                    return
                }
                isPaging = true;
                
                var tempIndex = curIndex;
                
                //1 确定要翻过去的页码,计算 left 值
                typeof flag === "boolean" && (curIndex += flag ? 1 : -1)
                typeof flag === "number" && (curIndex = flag)
                left = - curIndex * PAGE_WIDTH
                
                //2 执行翻页动画
                $("#imgs").animate({"left":left},PAGE_SLIDE_TIME,function(){
                    if(curIndex == 0 || curIndex == 6){
                        //页码校正
                        curIndex == 0 && (curIndex = 5);
                        curIndex == 6 && (curIndex = 1)                        
                        
                        left = - curIndex * PAGE_WIDTH
                        $("#imgs").css("left",left)
                    }
                    //清除正在翻页标志
                    isPaging = false
                })
                
                //3 同步点的状态
                if(curIndex == 0 || curIndex == 6){
                    curIndex == 0 && updateIdxState(0,4);
                    curIndex == 6 && updateIdxState(4,0);
                }else{
                    updateIdxState(tempIndex -1,curIndex -1)
                }
                
                function updateIdxState(oldIdx,newIdx){
                    $("#index li").eq(oldIdx).removeClass("active")
                    $("#index li").eq(newIdx).addClass("active")
                }
            }
            
        </script>
    </body>
</html>

更多web前端知识,请查阅 HTML中文网 !!

以上就是用jQuery如何手写一个简单的轮播图?(附代码)的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏