html图片轮播_【技能提升】用jQuery如何手写一个简单的轮播图？（附代码）

最新推荐文章于 2023-09-30 13:24:43 发布

0000 0000

最新推荐文章于 2023-09-30 13:24:43 发布

阅读量141

点赞数

文章标签： html图片轮播

本文链接：https://blog.csdn.net/weixin_28875281/article/details/113077717

版权

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

用 jQuery 手写轮播图

先上个效果截图：

主要包含以下功能点：

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

* 2、翻页按钮，翻页

* 3、定点翻页

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

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

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

主要包含以下功能点：

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

* 2、翻页按钮，翻页

* 3、定点翻页

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

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

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

好了，直接上代码：

<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>                <div id="container">                        <ul id="imgs">                <li>                    <div class="img">5div>                li>                <li>                    <div class="img">1div>                li>                <li>                    <div class="img">2div>                li>                <li>                    <div class="img">3div>                li>                <li>                    <div class="img">4div>                li>                <li>                    <div class="img">5div>                li>                <li>                    <div class="img">1div>                li>            ul>            <button id="prev">>button>            <button id="next"><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>

来源 | html中文网

审核 | 吕梁曾琦李明辉(总编辑)

监制 | 方正

山东传媒职业学院信息工程系

新媒体中心

0000 0000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html图片轮播_【技能提升】用jQuery如何手写一个简单的轮播图？（附代码）

用jQuery如何手写一个简单的轮播图？下面本篇文章通过代码示例来给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。用 jQuery 手写轮播图先上个效果截图：主要包含以下功能点：* 1、页面加载完，自动循环翻页* 2、翻页按钮，翻页* 3、定点翻页* 4、翻页时同步圆点状态* 5、鼠标进入，停止自动翻页* 6、快速点击翻页的bug(加 isPaging 标...
复制链接

扫一扫