{"id":1177,"date":"2018-05-21T22:48:56","date_gmt":"2018-05-21T14:48:56","guid":{"rendered":"http:\/\/www.yusian.com\/blog\/?p=1177"},"modified":"2020-12-01T12:47:01","modified_gmt":"2020-12-01T04:47:01","slug":"jquery%e5%ae%9e%e7%8e%b0%e8%87%aa%e5%8a%a8%e8%bd%ae%e6%92%ad%e5%9b%be","status":"publish","type":"post","link":"https:\/\/www.yusian.com\/blog\/h5\/2018\/05\/21\/2248561177.html","title":{"rendered":"jQuery\u5b9e\u73b0\u81ea\u52a8\u8f6e\u64ad\u56fe"},"content":{"rendered":"<p>1\u3001\u6f14\u793a\u5730\u5740\uff1a<a href=\"http:\/\/www.yusian.com\/jquery\/carousel.html\" rel=\"noopener noreferrer\" target=\"_blank\">http:\/\/www.yusian.com\/jquery\/carousel.html<\/a><\/p>\n<p>2\u3001\u6e90\u4ee3\u7801<!--more--><\/p>\n<pre lang=\"html\" line=\"1\"><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\r\n    <script src=\"https:\/\/cdn.bootcss.com\/jquery\/3.3.1\/jquery.js\"><\/script>\r\n    <title>Bootstrap<\/title>\r\n    <style>\r\n        .container {\r\n            margin:0 auto;\r\n            width: 800px;\r\n            overflow: hidden;\r\n            position:relative;\r\n        }\r\n        .carousel{\r\n            margin-top: 100px;\r\n            position:relative;\r\n            font-size: 0;\r\n            box-sizing: border-box;\r\n        }\r\n        .carousel a{\r\n            position: relative;\r\n            display: inline-block;\r\n            width: 800px;\r\n            height: 300px;\r\n            font-size: 200px;\r\n            color: white;\r\n            text-align: center;\r\n            text-decoration: none;\r\n        }\r\n        .mark{\r\n            position:absolute;\r\n            bottom: 20px;\r\n            right: 20px;\r\n        }\r\n        .mark a{\r\n            color:white;\r\n            font-size: 24px;\r\n            padding: 0 10px;\r\n            background: red;\r\n            text-decoration: none;\r\n            border-radius: 10%;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container\">\r\n        <!-- \u8f6e\u64ad\u56fe\u7247 -->\r\n        <div class=\"carousel\">\r\n            <a href=\"javascript:\" rel=\"1\"><img decoding=\"async\" src=\"https:\/\/dummyimage.com\/800x300\/933\/fff\/?text=1\" alt=\"\"><\/a>\r\n            <a href=\"javascript:\" rel=\"2\"><img decoding=\"async\" src=\"https:\/\/dummyimage.com\/800x300\/393\/fff\/?text=2\" alt=\"\"><\/a>\r\n            <a href=\"javascript:\" rel=\"3\"><img decoding=\"async\" src=\"https:\/\/dummyimage.com\/800x300\/339\/fff\/?text=3\" alt=\"\"><\/a>\r\n        <\/div>\r\n        <!-- \u5e8f\u53f7\u6807\u8bb0 -->\r\n        <div class=\"mark\">\r\n            <a href=\"javascript:\" rel=\"1\">1<\/a>\r\n            <a href=\"javascript:\" rel=\"2\">2<\/a>\r\n            <a href=\"javascript:\" rel=\"3\">3<\/a>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ \u521d\u59cb\u53d8\u91cf\r\n        let items = $('.carousel a');   \/\/ \u8f6e\u64ad\u56fe\u94fe\u63a5\u96c6\u5408\r\n        let count = items.length;       \/\/ \u8f6e\u64ad\u56fe\u6570\u91cf\r\n        let width = parseInt(items.first().css('width'));\/\/ \u5355\u5f20\u8f6e\u64ad\u56fe\u5bbd\u5ea6\r\n        let car_w = width*count + 'px'; \/\/ \u8f6e\u64ad\u56fe\u63a7\u4ef6\u603b\u5bbd\u5ea6\r\n        $('.carousel').css({width:car_w});\r\n        \/\/ \u5e8f\u53f7\u6807\u8bb0\u70b9\u51fb\u4e8b\u4ef6\r\n        $('.mark a').click(function(e){\r\n            $('.carousel').stop();\r\n            \/\/ \u6839\u636e\u5f53\u524d\u70b9\u51fb\u5e8f\u53f7\uff0c\u627e\u5230\u5bf9\u5e94\u8f6e\u64ad\u56fe\u6dfb\u52a0active\u7c7b\r\n            let index = $(this).attr('rel') - 1;\r\n            items.removeClass('active');\r\n            items.eq(index).addClass('active');\r\n            \/\/ \u8c03\u7528\u81ea\u52a8\u8f6e\u64ad\u65b9\u6cd5\uff0c\u5e76\u6807\u8bb0\u4e3a\u624b\u52a8\u89e6\u53d1\r\n            autoScroll(true);\r\n        });\r\n        \/\/ \u9ed8\u8ba4\u81ea\u52a8\u5faa\u73af\u8f6e\u64ad\r\n        var play = setInterval(function(){\r\n            autoScroll();\r\n        }, 1500);\r\n        \/\/ \u63a7\u4ef6\u9ed8\u8ba4\u9f20\u6807\u4e0a\u6d6e\u5219\u6682\u505c\u8f6e\u64ad\uff0c\u79fb\u5f00\u5219\u7ee7\u7eed\r\n        $('.container').hover(function(){\r\n            clearInterval(play);\r\n        },function(){\r\n            play = setInterval(function(){\r\n                autoScroll();\r\n            }, 1500)\r\n        });\r\n\r\n        \/\/ \u8f6e\u64ad\u65b9\u6cd5\u4e3b\u4f53\r\n        function autoScroll(click=false){\r\n            if (click) items.first().css({left:0});\r\n            \/\/ \u627e\u5230\u5f53\u524dactive\u7684\u8f6e\u64ad\u56fe\uff0c\u5982\u679c\u6ca1\u6709\u9ed8\u8ba4\u4e3a\u7b2c\u4e00\u5f20\r\n            let item = $('.carousel').find('.active');\r\n            if (item.length === 0){\r\n                item = items.first();\r\n                item.addClass('active');\r\n            }\r\n            \/\/ \u8ba1\u7b97\u9700\u8981\u6ed1\u52a8\u7684\u8ddd\u79bb\uff0c\u5b9e\u73b0\u63a7\u4ef6\u52a8\u753b\r\n            let offset = item.position().left;\r\n            $('.carousel').animate({\r\n                left:-offset\r\n            },600,function(){\r\n                \/\/ \u5982\u679c\u5f53\u524d\u662f\u7b2c\u4e00\u5f20\uff0c\u52a8\u753b\u7ed3\u675f\u540e\u9700\u8981\u8fd8\u539f\u7b2c\u4e00\u5f20\u7684\u539f\u59cb\u4f4d\u7f6e\r\n                if (item.attr('rel') === items.first().attr('rel')){\r\n                    resetPos();\r\n                }\r\n                \/\/ \u52a8\u753b\u7ed3\u675f\u540e\u53d6\u4e0b\u4e00\u5f20\u4e3aactive\uff0c\u5982\u679c\u662f\u6700\u540e\u4e00\u5f20\u5219\u8df3\u5230\u7b2c\u4e00\u5f20\r\n                items.removeClass('active');\r\n                let next = item.next();\r\n                if (next.length === 0){\r\n                    next = items.first();\r\n                    \/\/ \u7b2c\u4e00\u5f20\u9ed8\u8ba4\u653e\u5230\u7b2c\u4e09\u5f20\u540e\u9762\r\n                    next.css({left:(offset+width)});\r\n                }\r\n                next.addClass('active');\r\n            });\r\n        }\r\n        \/\/ \u8fd8\u539f\u5f53\u524d\u4f4d\u7f6e\r\n        function resetPos(){\r\n            let item = $('.carousel').find('.active');\r\n            let index = item.attr('rel') - 1;\r\n            let offset = index * width;\r\n            items.first().css({left:0});\r\n            $('.carousel').css({left:-offset});\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>1\u3001\u6f14\u793a\u5730\u5740\uff1ahttp:\/\/www.yusian.com\/jquery\/carousel.html 2\u3001\u6e90\u4ee3\u7801<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,28],"tags":[74,25,73,75],"class_list":["post-1177","post","type-post","status-publish","format-standard","hentry","category-h5","category-javascript","tag-carousel","tag-html","tag-jquery","tag-75"],"_links":{"self":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/posts\/1177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/comments?post=1177"}],"version-history":[{"count":0,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/posts\/1177\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/media?parent=1177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/categories?post=1177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/tags?post=1177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}