轮播图

最新推荐文章于 2020-08-31 14:23:31 发布

蒋思

最新推荐文章于 2020-08-31 14:23:31 发布

阅读量183

点赞数

本文链接：https://blog.csdn.net/u014422462/article/details/97282267

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

下面是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>

<script src="${root}/webtrn/index/lib/modernizr/modernizr-custom.js"></script>

<script src="${root}/webtrn/index/lib/jquery/jquery.js"></script>

<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>

<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>

蒋思

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图

下面是html，可以直接引入就行。附件时js和css<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1" /><meta http-eq...
复制链接

扫一扫

专栏目录