前端开发jQuery实现图片轮播

前端开发 框架
原生app的前端开发框架
十大前端开发框架下

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
        <style type=”text/css”>
            * {
                margin: 0;
                padding: 0;
            }
            .image {
                list-style: none;
            }
            .box {
                width: 730px;
                height: 454px;
                position: relative;
                margin: 50px auto;
            }
            .image li {
                width: 100%;
                height: 454px;
                float: left;
                position: absolute;
                display: none;
            }
            .num {
                position: absolute;
                list-style: none;
                cursor: pointer;
                bottom: 20px;
                left: 281px;
            }
            .num li {
                float: left;
                color: white;
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background-color: gray;
                margin: 0 4px;
                text-align: center;
                line-height: 20px;
            }
            .num .current {
                background-color: red;
            }
            .arrow {
                height: 60px;
                width: 30px;
                position: absolute;
                cursor: pointer;
                background-color: black;
                color: white;
                opacity: 0.5;
                font-size: 20px;
                text-align: center;
                line-height: 60px;
                top: 197px;
                display: none;
            }
            .left {
                left: 0;
            }
            .right {
                right: 0;
            }
        </style>
    </head>
    <body>
        <div class=”box”>
            <ul class=”image”>
                <li>
                    <img
                        src=”https://www.rokub.com/wp-content/uploads/2018/11/325-320×320.jpg”
                    />
                </li>
                <li>
                    <img
                        src=”http://cdn.attach.qdfuns.com/notes/pics/201701/04/105805wn4uw06w711ulrtt.jpg”
                    />
                </li>
                <li>
                    <img
                        src=”https://www.rokub.com/wp-content/uploads/2018/11/325-320×320.jpg”
                    />
                </li>
                <li>
                    <img
                        src=”http://cdn.attach.qdfuns.com/notes/pics/201701/04/105805ngp3lbaiibggkndm.jpg”
                    />
                </li>
                <li>
                    <img
                        src=”https://www.rokub.com/wp-content/uploads/2018/11/325-320×320.jpg”
                    />
                </li>
                <li>
                    <img
                        src=”https://www.rokub.com/wp-content/uploads/2018/11/325-320×320.jpg”
                    />
                </li>
            </ul>
            <ul class=”num”>
                <li class=”current”>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <div class=”left arrow”><</div>
            <div class=”right arrow”>></div>
        </div>
        <script
            src=”http://libs.baidu.com/jquery/1.7.2/jquery.min.js
            type=”text/javascript”
            charset=”utf-8″
        ></script>
        <script type=”text/javascript”>
            var i = 0,
                timer
            var sum = $(‘.image li’).length
            $(function() {
                $(‘.image li’)
                    .eq(0)
                    .show()
                $(‘.box’).hover(
                    function() {
                        $(‘.arrow’).show()
                        clearInterval(timer)
                    },
                    function() {
                        $(‘.arrow’).hide()
                        iLunbo()
                    },
                )
                iLunbo()
                $(‘.arrow’).hover(function() {
                    clearInterval(timer)
                })
                /*左箭头控制轮播*/
                $(‘.left’).click(function() {
                    clearInterval(timer)
                    if (i == 0) {
                        i = sum
                    }
                    i–
                    startLunbo()
                    iLunbo()
                })
                /*右箭头控制轮播*/
                $(‘.right’).click(function() {
                    clearInterval(timer)
                    if (i == sum – 1) {
                        i = -1
                    }
                    i++
                    startLunbo()
                    iLunbo()
                })
                /*提示信息变换*/
                $(‘.num>li’).hover(function() {
                    clearInterval(timer)
                    i = $(this).index()
                    console.log(i)
                    startLunbo()
                })
            })
            /*自动轮播*/
            function iLunbo() {
                timer = setInterval(function() {
                    i++
                    if (i == sum – 1) {
                        i = -1
                    }
                    startLunbo()
                }, 2000)
            }
            /*图片轮播和提示信息*/
            function startLunbo() {
                $(‘.image>li’)
                    .eq(i)
                    .fadeIn()
                    .siblings()
                    .fadeOut()
                $(‘.num>li’)
                    .eq(i)
                    .addClass(‘current’)
                    .siblings()
                    .removeClass(‘current’)
            }
        </script>
    </body>
</html>
mvc 前端开发框架
h5游戏开发前端框架
移动web前端js开发框架
» 本文来自:前端开发者 » 《前端开发jQuery实现图片轮播》
» 本文链接地址:https://www.rokub.com/6913.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!