<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } #box { width: 1200px; margin: auto; } .CarFigure_container ul { list-style: none; } .CarFigure_container { position: relative; width: 100%; } .CarFigure_outer { position: relative; width: 100%; overflow: hidden; } .CarFigure_cont { position: relative; overflow: hidden; left: 0; transition: all 0.5s ease; } .CarFigure_cont li { float: left; box-sizing: border-box; } .CarFigure_cont li img { width: 100%; } .CarFigure_pagation { width: 100%; position: absolute; bottom: -40px; text-align: center; } .CarFigure_pagation_item.active { background: red!important; } .CarFigure_pagation .CarFigure_pagation_item { display: inline-block; width: 10px; height: 10px; background: cadetblue; margin: 0 10px; border-radius: 100%; cursor: pointer; } .CarFigure_button .CarFigure_button_left,.CarFigure_button .CarFigure_button_right { position: absolute; width: 40px; height: 40px; line-height: 40px; background: #000000; border-radius: 100%; overflow: hidden; top: 0; bottom: 0; margin: auto; color: #ffffff; text-align: center; font-size: 25px; cursor: pointer; } .CarFigure_button_left { left: -40px; } .CarFigure_button_right { right: -40px; } </style> </head> <body> <div id="box"> <div class="CarFigure_container"> <div class="CarFigure_outer"> <ul class="CarFigure_cont"> <li class="CarFigure_slider"> <img src="test.jpg"> </li> <li class="CarFigure_slider"> <img src="test.jpg"> </li> <li class="CarFigure_slider"> <img src="test.jpg"> </li> <li class="CarFigure_slider"> <img src="test.jpg"> </li> <li class="CarFigure_slider"> <img src="test.jpg"> </li> <li class="CarFigure_slider"> <img src="test.jpg"> </li> <li class="CarFigure_slider"> <img src="test.jpg"> </li> </ul> </div> <div class="CarFigure_button"></div> <div class="CarFigure_pagation"></div> </div> </div> </body> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="jquery.CarFigure.js"></script> <script> $(function (){ var myCarFigure = new CarFigure(‘.CarFigure_container‘); myCarFigure.init({ space : 20, size : 1 }); }); </script> </html>
插件地址:https://files.cnblogs.com/files/iwzyuan/jquery.CarFigure.js
原文地址:https://www.cnblogs.com/iwzyuan/p/9019527.html
时间: 2024-09-27 03:26:28