非Jquery自适应屏幕图片轮播插件
XML/HTML Code
- <div id="jssor_1" style="position:relative;margin:0 auto;top:50px;left:0px;width:980px;height:380px;overflow:hidden;visibility:hidden;">
- <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);"> <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="img/spin.svg" /> </div>
- <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
- <div data-p="170.00"> <img data-u="image" src="3.png" /> </div>
- <div data-p="170.00"> <img data-u="image" src="2.png" /> </div>
- <div data-p="170.00"> <img data-u="image" src="1.png" /> </div>
- </div>
- <div data-u="navigator" class="jssorb051" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
- <div data-u="prototype" class="i" style="width:16px;height:16px;">
- <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
- <circle class="b" cx="8000" cy="8000" r="5800"></circle>
- </svg>
- </div>
- </div>
- <div data-u="arrowleft" class="jssora051" style="width:55px;height:55px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
- <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
- <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
- </svg>
- </div>
- <div data-u="arrowright" class="jssora051" style="width:55px;height:55px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
- <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
- <polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
- </svg>
- </div>
- </div>
- <script type="text/javascript">jssor_1_slider_init();</script>
原文地址:http://www.freejs.net/article_jquerytupiantexiao_697.html