bxSlider
张鹏鹍
<!--轮播图https://bxslider.com/--> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>bxslider</title><script type="text/javascript" src="/js/jquery-1.6.min.js"></script> <script type='text/javascript' src='/js/jquery.bxslider.js'></script> <style type="text/css"> /*单独加样式--带上最父级选择器*/ .wrap .bx-wrapper .bx-controls-direction a { top: 55%; } /*bxslider通用去边框间距样式*/ .bx-wrapper .bx-viewport { -moz-box-shadow: 0 0 0px #ccc; -webkit-box-shadow: 0 0 0px #ccc; box-shadow: 0 0 0px #ccc; border: solid #fff 0px; left: 0; background: #fff; } .bx-wrapper .bx-prev { left: 10px; background: url(http://image.energy.ckcest.cn/webimg/zxh/index/controls.png) no-repeat 0 -32px; } .bx-wrapper .bx-next { right: 10px; background: url(http://image.energy.ckcest.cn/webimg/zxh/index/controls.png) no-repeat -43px -32px; } .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { bottom: 30px; } </style></head><body> <div class="wrap"> <div class="slider1"> <div class="slider"><b>0000000</b></div> <div class="slider">1111111</div> </div> </div> <script type='text/javascript'> (function () { $('.slider1').bxSlider({ slideWidth: 1183, auto: true, autoHover: true }); $('.slider1').hover(function () { $(this).find('.bx-controls-direction').show(); }, function () { $(this).find('.bx-controls-direction').hide(); }); })();</script></body></html><link rel='StyleSheet' href='/js/jquery.bxslider.css' type='text/css' />
<link rel='StyleSheet' href='/js/jquery.bxslider.css' type='text/css' />
类似资料：