silder.css 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. 
  2. ul,li{
  3. list-style:none;
  4. }
  5. .flexslider {
  6. margin: 0px auto 20px;
  7. position: relative;
  8. width: 100%;
  9. height: 382px;
  10. overflow: hidden;
  11. zoom: 1;
  12. }
  13. .flexslider .slides{
  14. list-style:none;
  15. }
  16. .flexslider .slides li {
  17. width: 100%;
  18. height: 100%;
  19. }
  20. .flex-direction-nav a {
  21. width: 70px;
  22. height: 70px;
  23. line-height: 99em;
  24. overflow: hidden;
  25. margin: -35px 0 0;
  26. display: block;
  27. background: url(images/ad_ctr.png) no-repeat;
  28. position: absolute;
  29. top: 50%;
  30. z-index: 10;
  31. cursor: pointer;
  32. opacity: 0;
  33. filter: alpha(opacity=0);
  34. -webkit-transition: all .3s ease;
  35. border-radius: 35px;
  36. }
  37. .flex-direction-nav .flex-next {
  38. background-position: 0 -70px;
  39. right: 0;
  40. }
  41. .flex-direction-nav .flex-prev {
  42. left: 0;
  43. }
  44. .flexslider:hover .flex-next {
  45. opacity: 0.8;
  46. filter: alpha(opacity=25);
  47. }
  48. .flexslider:hover .flex-prev {
  49. opacity: 0.8;
  50. filter: alpha(opacity=25);
  51. }
  52. .flexslider:hover .flex-next:hover,
  53. .flexslider:hover .flex-prev:hover {
  54. opacity: 1;
  55. filter: alpha(opacity=50);
  56. }
  57. .flex-control-nav {
  58. width: 100%;
  59. position: absolute;
  60. bottom: 10px;
  61. text-align: center;
  62. }
  63. .flex-control-nav li {
  64. margin: 0 2px;
  65. display: inline-block;
  66. zoom: 1;
  67. *display: inline;
  68. }
  69. .flex-control-paging li a {
  70. background: url(images/dot.png) no-repeat 0 -16px;
  71. display: block;
  72. height: 16px;
  73. overflow: hidden;
  74. text-indent: -99em;
  75. width: 16px;
  76. cursor: pointer;
  77. }
  78. .flex-control-paging li a.flex-active,
  79. .flex-control-paging li.active a {
  80. background-position: 0 0;
  81. }
  82. .flexslider .slides a img {
  83. width: 100%;
  84. height: 482px;
  85. display: block;
  86. }