Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScriptでルーレットゲームを作成</title>
	</head>
	<body>
		<h1>JavaScriptでルーレットゲームを作成</h1>
		<div class="roulette">
			<div class="panels">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
				<img src="https://lh3.googleusercontent.com/rASNYBulsYk3nBEdD7l0CmiMcyfQewMCmDi2QupgyPoRE-JOQW9H_Y4TYRlEOzUbA858cxhDtBp_b_SlVl_KNJfKQMQh5EdhsoguAK_k_HM2OBdIVgkqzbEcRiUzYJayFELzQQNq4j1xNJZ6kwJIS-lyTdBDDqHK-ifdZgdDwUimDJMAnER19bjy24C5rw9xQ-p-zzhpo0yGw4M_3mGN4ubqqDXS_fnmCKhXJ4n20huNhcD2RygWspcz_MhcoeURNB3UvCgqS3eSduMiyfwjOlctChxNA2iKC0eh_vSKSp0dFFZs3hvtT_KAiRBRp72EIhtUgs7AqMQkdZzU170nfziC4Dm5d-kYhcyt6CrzH_5UmhYkMhxxHUMA9z-RbrLBVgQOMs6np-OXqAou7p1gRtQfp-q46XcM46JlTTZApWWXkH46pu4EKi6N51osiCHErOianKdTiA4C8ylU5A6CxEIyfFPCJdUQCil2MvthvZ7CyvI6NKLTIaWKAsCDRaWS8ygt5L2ijhPyJSBNDFiO4dZI21y13SKY9koh2_EBwDYCd3WPujz6bRAEwmA0FavAky2e346OhdlTEarh9OaHX2hT6d9LiuSE9vBzYi548c-9l8J1zxCg9c6d5gTAk2xXlJYW-QSxThZWlVwRqZsezplTNDERIYhGjlDNUYuH6Jw4Qy9SyKDQa4OaKK6lbqHIimSvAFhSU4ioFeCJpfj7NPE5ExKizT44LQv4cCexCTTng4pD=w400-h124-no" class="panel">
			</div>
		</div>
		<div>
			<button type="button" class="btn-start">start</button>
			<button type="button" class="btn-stop" disabled="true">stop</button>
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

              
            
!

CSS

              
                			body {
				text-align: center;
				padding: 0;
				margin: 0;
			}
			ul {
				list-style: none;
			}
			.roulette {
				width: 90%;
				height: 500px;
				margin: auto;
				position: relative;
				border : solid 1px #333 ;
			}

			.panels {
				position: relative;
				margin: 0 auto;
				width: 400px;
				height: 400px;
			}

			.panel {
				width: 200px;
				position: absolute;
			}

			.panel img {
				vertical-align: bottom;
			}
              
            
!

JS

              
                
			(function (global) {
				"use strict";

				/*
				 * ルーレットの回転速度(実行毎秒数)
				 */
				var sec = 100;

				/*
				 * ルーレットの停止フラグ
				 */
				var stopFlag = false;

				/*
				 * ・ルーレットのパネル数
				 * ・ルーレットの回転数
				 */
				var panelNum  = 0,
					loopCount = 0;

				/**
				 * ルーレット
				 */
				var Roulette = {
					/**
					 * 初期化処理
					 */
					init: function () {
						// ルーレットのパネル配置を調整
						var $panels = $('.panel');
						var deg = 360.0 / $panels.length;
						var red = (deg * Math.PI / 180.0);
						var r   = $panels.width() / 2;
						var adjustY = ($panels.width() / 2) - ($panels.height() / 2);

						$panels.each(function (i, elem) {
							var tmp = i - ($panels.length / 4);

							var x = Math.cos(red * tmp) * r + r;
							var y = Math.sin(red * tmp) * r + r + adjustY;
							var t = tmp * deg;

							$(elem).css({
								'left': x,
								'top' : y,
								'transform': 'rotate(' + t + 'deg)'
							});

						});

						// ルーレットのパネル数を代入
						panelNum = $panels.length;
					},
					/**
					 * ルーレットの回転開始
					 */
					start: function () {
						stopFlag = false;
						Roulette.animation();
					},
					/**
					 * ルーレットの回転停止
					 */
					stop: function () {
						stopFlag = true;
					},
					/**
					 * ルーレットの回転アニメーション
					 */
					animation: function () {
						$('.panels').animate({
							deg: -((360 / panelNum) * loopCount)
						},{
							duration: sec,
							step: function (now) {
								$('.panels').css({
									transform: 'rotate(' + now + 'deg)'
								});
							},
							complete: function () {
								if (stopFlag) {
									return ;
								}
								loopCount++;
								Roulette.animation();
							}
						});
					}
				};

				global.Roulette = Roulette;

			})((this || 0).self || global);

			$(document).ready(function () {

				// 初期化処理を実行
				Roulette.init();

				/**
				 * スタートボタンのクリックイベント
				 */
				$('.btn-start').click(function () {
					$(this).attr('disabled', true);
					Roulette.start();
					$('.btn-stop').attr('disabled', false);
				});

				/**
				 * ストップボタンのクリックイベント
				 */
				$('.btn-stop').click(function () {
					$(this).attr('disabled', true);
					Roulette.stop();
					$('.btn-start').attr('disabled', false);
				});

			});
              
            
!
999px

Console