Html部分： <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点幻灯轮播大图js特效</title> <meta name="keywords" content="焦点幻灯轮播大图js特效" /> <meta name="description" content="焦点幻灯轮播大图js特效" /> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body>
<!-- <div class="container"> --> <div class="content" style="width:1000px;height:300px;margin:30px auto;overflow:hidden;"> <div id="slider"> <a href="#"><img src="img/demo1.webp"/></a> <a href="#"><img src="img/demo2.webp"/></a> <a href="#"><img src="img/demo3.webp"/></a> <a href="#"><img src="img/demo4.webp"/></a> <a href="#"><img src="img/demo5.webp"/></a> <a href="#"><img src="img/demo6.webp"/></a> </div> </div> <!-- </div> -->
<script src="js/jquery-1.10.2.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script> <script type="text/javascript" src="js/vmc.slider.full.min.js"></script> <script type="text/javascript"> $(function() { $('#slider').vmcSlider({ width: 1000, height: 300, gridCol: 10, gridRow: 5, gridVertical: 20, gridHorizontal: 10, autoPlay: true, ascending: true, effects: [ 'fade', 'fadeLeft', 'fadeRight', 'fadeTop', 'fadeBottom', 'fadeTopLeft', 'fadeBottomRight', 'blindsLeft', 'blindsRight', 'blindsTop', 'blindsBottom', 'blindsTopLeft', 'blindsBottomRight', 'curtainLeft', 'curtainRight', 'interlaceLeft', 'interlaceRight', 'mosaic', 'bomb', 'fumes' ], ie6Tidy: false, random: false, duration: 2000, speed: 900 }); }); </script> </body> </html> CSS部分： h3{ text-align: center; color:#828282 } body{ background-color:#2D2D2D} .vui-slider { position:relative; overflow:hidden; background:#999; } .vui-slider .vui-items { overflow:hidden; width:100%; height:100%; } .vui-slider .vui-item { display:none; position:absolute; top:0; left:0; width:100%; height:100%; } .vui-slider .vui-item a, .vui-slider .vui-item img { display:block; padding:0; margin:0; border:none; } .vui-slider .vui-buttons { position:absolute; z-index:5; bottom:16px; left:50%; float:left; display:inline; filter:alpha(Opacity=80); -moz-opacity:0.8; opacity: 0.8; } .vui-slider .vui-button { float:left; display:inline; overflow:hidden; height:12px; width:12px; margin:0 10px; padding:0; border:none; border-radius:6px; background:#FFF; cursor:pointer; } .vui-slider .vui-button-cur { background-color:#C00; } .vui-slider .vui-transfer { display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:3; } .vui-slider .vui-prev { position:absolute; top:50%; left:0; z-index:5; width:60px; height:150px; margin-top:-75px; border-radius:0 10px 10px 0; background:url(prev.webp) no-repeat; cursor:pointer; filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity:0.3; opacity:0.3; transition:0.5s ease; -o-transition:0.5s ease; -webkit-transition:0.5s ease; } .vui-slider .vui-next { position:absolute; top:50%; right:0; z-index:5; width:60px; height:150px; margin-top:-75px; border-radius:10px 0 0 10px; background:url(next.webp) no-repeat; cursor:pointer; filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity:0.3; opacity:0.3; transition:0.5s ease; -o-transition:0.5s ease; -webkit-transition:0.5s ease; } .vui-slider .vui-sidebutton-hover { filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity:0.4; opacity:0.4; background-color:#000; } |
