下面是html,可以直接引入就行。附件时js和css
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
<title>jQuery圆形横向图片轮播图切换 - 站长素材</title>
<!-- Load modernizr or html5shiv -->
<script src="${root}/webtrn/index/lib/modernizr/modernizr-custom.js"></script>
<!--<script src="../lib/html5shiv/html5shiv.js"></script>-->
<!-- Load jQuery -->
<script src="${root}/webtrn/index/lib/jquery/jquery.js"></script>
<!-- Load miSlider -->
<link href="${root}/webtrn/index/css/mislider.css" rel="stylesheet">
<link href="${root}/webtrn/index/css/mislider-skin-cameo.css" rel="stylesheet">
<script src="${root}/webtrn/index/js/mislider.js"></script>
<script>
jQuery(function ($) {
var slider = $('.mis-stage').miSlider({
// The height of the stage in px. Options: false or positive integer. false = height is calculated using maximum slide heights. Default: false
stageHeight: 380,
// Number of slides visible at one time. Options: false or positive integer. false = Fit as many as possible. Default: 1
slidesOnStage: false,
// The location of the current slide on the stage. Options: 'left', 'right', 'center'. Defualt: 'left'
slidePosition: 'center',
// The slide to start on. Options: 'beg', 'mid', 'end' or slide number starting at 1 - '1','2','3', etc. Defualt: 'beg'
slideStart: 'mid',
// The relative percentage scaling factor of the current slide - other slides are scaled down. Options: positive number 100 or higher. 100 = No scaling. Defualt: 100
slideScaling: 150,
// The vertical offset of the slide center as a percentage of slide height. Options: positive or negative number. Neg value = up. Pos value = down. 0 = No offset. Default: 0
offsetV: -5,
// Center slide contents vertically - Boolean. Default: false
centerV: true,
// Opacity of the prev and next button navigation when not transitioning. Options: Number between 0 and 1. 0 (transparent) - 1 (opaque). Default: .5
navButtonsOpacity: 1
});
});
</script>
<!-- Apply other styles -->
<link href='http://fonts.useso.com/css?family=Roboto+Condensed:400|Roboto:500' rel='stylesheet'>
<link href="${root}/webtrn/index/css/styles.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<figure>
<div class="mis-stage">
<ol class="mis-slider">
<li class="mis-slide">
<a href="#" class="mis-container">
<figure>
<img src="${root}/webtrn/index/images/garden01.jpg" alt="Pink Water Lillies">
<figcaption>轮播图一</figcaption>
</figure>
</a>
</li>
<li class="mis-slide">
<a href="#" class="mis-container">
<figure>
<img src="${root}/webtrn/index/images/garden02.jpg" alt="Pond with Lillies">
<figcaption>轮播图二</figcaption>
</figure>
</a>
</li>
<li class="mis-slide">
<a href="#" class="mis-container">
<figure>
<img src="${root}/webtrn/index/images/garden03.jpg" alt="Hidden Pond">
<figcaption>轮播图三</figcaption>
</figure>
</a>
</li>
<li class="mis-slide">
<a href="#" class="mis-container">
<figure>
<img src="${root}/webtrn/index/images/garden04.jpg" alt="Shrine">
<figcaption>轮播图四</figcaption>
</figure>
</a>
</li>
</ol>
</div>
</div>
</body>
</html>