jqury实现图片轮播（自动轮播+手动轮播），简单易学，热血奉献

博主最近在搞图片轮播图，经过多方查阅资料，经典jquery轮播图分为两种，第一种呼吸轮播图，第二种是左右无缝滑动轮播图。本例为第二种方法，原理大同小异，最大的区别在于图片的摆放方式，呼吸轮播图是所有图片叠在一起通过display控制，本例使用的方法是animate 位移的进行控制，前端所有图片float排序，逐个依次循环显示，前台用LI代替图片，需要图片的自行引入，不加入图片也可以演示，本博主已通过JQ代码将LI已随机设置背景颜色，初学的朋友可直接复制最后一个代码段使用。

前端html代码：

<body>
    <div class="box">
        <ul class="img">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="move">
            <li>&lt;</li>
            <li>&gt;</li>
        </ul>
        <ul class="num"></ul>
    </div>
</body>

样式代码：

 <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #eee;
        }

        .box {
            width: 680px;
            height: 340px;
            margin: 50px auto;
            background: #fff;
            position: relative;
            overflow: hidden;
        }

        ul, li {
            list-style: none;
        }

        .box .img {
            width: 5000px;
            position: absolute;
            top: 0;
            left: 0;
            height: 340px;
        }

        .box:hover .move {
            display: block;
        }

        .img > li {
            width: 680px;
            height: 340px;
            float: left;
            /*opacity: 0.2;*/
        }

        .move {
            width: 30px;
            height: 50px;
            line-height: 50px;
            display: none;
        }

            .move li {
                top: 50%;
                margin-top: -25px;
                position: absolute;
                width: 30px;
                height: 50px;
                line-height: 50px;
                font-size: 30px;
                color: #fff;
                background: rgba(0,0,0,.6);
                text-align: center;
            }

                .move li:nth-of-type(2) {
                    right: 0;
                }

        .num {
            position: absolute;
            bottom: 10px;
            width: 100%;
            height: 15px;
            text-align: center;
        }

            .num li {
                width: 15px;
                height: 15px;
                border-radius: 50%;
                display: inline-block;
                background: orange;
                margin: 0 5px;
            }

                .num li.on {
                    background: lightgreen;
                }
    </style>

重点来了，jquery代码：

 <script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            /*图片滑动轮播台*/
            $(".box .img li").each(function (index) {
                $(this).css('background', "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")");
            });
            var i = 0;
            //获取图片的宽度
            var imgwidth = $(".img li").width();
            var length = $(".img li").length;
            //alert(length);
            //输出指示灯
            for (j = 1; j <= length; j++) {
                var li = "<li>" + j + "</li>";
                $('.num').append(li);
            }
            //获取图片的索引值
            var index = $(".img li").length - 1;
            //alert(index);
            //克隆第一张图片，
            var first = $(".img li").first().clone();
            //将克隆的图片排在最后一张后面
            $(".img").append(first);
            //左移按钮

            $(".move li:nth-of-type(1)").click(function () {
                i++;

                if (i > length) {

                    $(".img").css({ left: "0px" });
                    i = 1;
                }
                $(".img").animate({ left: -i * imgwidth + "px" });

                if (i > index) {

                    $(".num li").eq(0).addClass("on").siblings().removeClass();
                }
                else {
                    $(".num li").eq(i).addClass("on").siblings().removeClass();
                }


            });
            //右移按钮
            $(".move li:nth-of-type(2)").click(function () {
                i--;
                if (i < 0) {
                    $(".img").css({ left: -length * imgwidth + "px" });
                    i = index;
                }
                $(".img").animate({ left: -i * imgwidth + "px" });
                $(".num li").eq(i).addClass("on").siblings().removeClass();
            });
            //设置自动播放

            var timer = setInterval(function () {
                i++;
                if (i > length) {

                    $(".img").css({ left: "0px" });
                    i = 1;
                }
                $(".img").animate({ left: -i * imgwidth + "px" });
                if (i > index) {

                    $(".num li").eq(0).addClass("on").siblings().removeClass();
                }
                else {
                    $(".num li").eq(i).addClass("on").siblings().removeClass();
                }

            }, 3000);

            $(".box").mouseover(function () {
                clearInterval(timer);

            });
            $(".box").mouseout(function () {
                timer = setInterval(function () {
                    i++;
                    if (i > length) {

                        $(".img").css({ left: "0px" });
                        i = 1;
                    }
                    $(".img").animate({ left: -i * imgwidth + "px" });
                    if (i > index) {

                        $(".num li").eq(0).addClass("on").siblings().removeClass();
                    }
                    else {
                        $(".num li").eq(i).addClass("on").siblings().removeClass();
                    }

                }, 3000);

            })
            $(".num li").mouseover(function () {
                i = $(this).index();
                $(".img").animate({ left: -i * imgwidth + "px" });
                $(".num li").eq(i).addClass("on").siblings().removeClass();
            });
        });
    </script>

全文件代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #eee;
        }

        .box {
            width: 680px;
            height: 340px;
            margin: 50px auto;
            background: #fff;
            position: relative;
            overflow: hidden;
        }

        ul, li {
            list-style: none;
        }

        .box .img {
            width: 5000px;
            position: absolute;
            top: 0;
            left: 0;
            height: 340px;
        }

        .box:hover .move {
            display: block;
        }

        .img > li {
            width: 680px;
            height: 340px;
            float: left;
            /*opacity: 0.2;*/
        }

        .move {
            width: 30px;
            height: 50px;
            line-height: 50px;
            display: none;
        }

            .move li {
                top: 50%;
                margin-top: -25px;
                position: absolute;
                width: 30px;
                height: 50px;
                line-height: 50px;
                font-size: 30px;
                color: #fff;
                background: rgba(0,0,0,.6);
                text-align: center;
            }

                .move li:nth-of-type(2) {
                    right: 0;
                }

        .num {
            position: absolute;
            bottom: 10px;
            width: 100%;
            height: 15px;
            text-align: center;
        }

            .num li {
                width: 15px;
                height: 15px;
                border-radius: 50%;
                display: inline-block;
                background: orange;
                margin: 0 5px;
            }

                .num li.on {
                    background: lightgreen;
                }
    </style>
    <script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            /*图片滑动轮播台*/
            $(".box .img li").each(function (index) {
                $(this).css('background', "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")");
            });
            var i = 0;
            //获取图片的宽度
            var imgwidth = $(".img li").width();
            var length = $(".img li").length;
            //alert(length);
            //输出指示灯
            for (j = 1; j <= length; j++) {
                var li = "<li>" + j + "</li>";
                $('.num').append(li);
            }
            //获取图片的索引值
            var index = $(".img li").length - 1;
            //alert(index);
            //克隆第一张图片，
            var first = $(".img li").first().clone();
            //将克隆的图片排在最后一张后面
            $(".img").append(first);
            //左移按钮

            $(".move li:nth-of-type(1)").click(function () {
                i++;

                if (i > length) {

                    $(".img").css({ left: "0px" });
                    i = 1;
                }
                $(".img").animate({ left: -i * imgwidth + "px" });

                if (i > index) {

                    $(".num li").eq(0).addClass("on").siblings().removeClass();
                }
                else {
                    $(".num li").eq(i).addClass("on").siblings().removeClass();
                }


            });
            //右移按钮
            $(".move li:nth-of-type(2)").click(function () {
                i--;
                if (i < 0) {
                    $(".img").css({ left: -length * imgwidth + "px" });
                    i = index;
                }
                $(".img").animate({ left: -i * imgwidth + "px" });
                $(".num li").eq(i).addClass("on").siblings().removeClass();
            });
            //设置自动播放

            var timer = setInterval(function () {
                i++;
                if (i > length) {

                    $(".img").css({ left: "0px" });
                    i = 1;
                }
                $(".img").animate({ left: -i * imgwidth + "px" });
                if (i > index) {

                    $(".num li").eq(0).addClass("on").siblings().removeClass();
                }
                else {
                    $(".num li").eq(i).addClass("on").siblings().removeClass();
                }

            }, 3000);

            $(".box").mouseover(function () {
                clearInterval(timer);

            });
            $(".box").mouseout(function () {
                timer = setInterval(function () {
                    i++;
                    if (i > length) {

                        $(".img").css({ left: "0px" });
                        i = 1;
                    }
                    $(".img").animate({ left: -i * imgwidth + "px" });
                    if (i > index) {

                        $(".num li").eq(0).addClass("on").siblings().removeClass();
                    }
                    else {
                        $(".num li").eq(i).addClass("on").siblings().removeClass();
                    }

                }, 3000);

            })
            $(".num li").mouseover(function () {
                i = $(this).index();
                $(".img").animate({ left: -i * imgwidth + "px" });
                $(".num li").eq(i).addClass("on").siblings().removeClass();
            });
        });
    </script>
</head>
<body>
    <div class="box">
        <ul class="img">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="move">
            <li>&lt;</li>
            <li>&gt;</li>
        </ul>
        <ul class="num"></ul>
    </div>
</body>
</html>

jqury实现图片轮播（自动轮播+手动轮播），简单易学，热血奉献

继续阅读

用jQuery实现一个简易的聊天框

使用canvas制作简易的数据结构核心算法演示系统——线性表(三)——头插法

Jquery 拖动窗口

用js实现的一个加载中状态的动态效果

jquery实现复制到剪贴板通用

Jquery 实现复制到剪贴板

ZeroClipboard2.2.0版本跨浏览器复制（兼解决IE下兼容问题）

推荐一些有用的网站一键分享制作网站小图标插件网站seo 相关的网站地图 api二维码相关

jQuery实现Ajax通讯的几种常用方式

jqGrid的使用笔记：5. 事件

jQuery实现百度搜索框

2010年终总结--技术篇

jQuery练习一. 选择器练习二. DOM操作练习三. 事件练习

struts2 +jquey uploadify3.2 实现多文件上传，可预览、删除、排序

JQuery--dom捕获html元素

jquery_126_demo