jquery 슬라이드 플러그인 bxslider 스타일 개선 example_jquery

이 문서의 예에서는 jquery 슬라이드쇼 플러그인 bxslider의 스타일을 개선하는 방법을 설명하고 참조용으로 모든 사람과 공유합니다. 세부 내용은 다음과 같습니다.

여러 jquery 슬라이드를 비교한 결과 별로 좋지 않다는 것을 알았습니다. 마지막으로 bxslider가 호환성이 가장 좋고 모바일 장치에서 수동 뒤집기를 지원한다는 것을 알았습니다.

그런데 공식적인 디스플레이 효과는 정말 추악하고 용납할 수 없습니다. 결국 제가 직접 DIY를 하게 되었습니다.

bxslider의 공식 스타일은 다음과 같습니다.

수정된 스타일은 다음과 같습니다.

1단계: bxslider 소개

코드 복사 코드는 다음과 같습니다.

2단계: bxslider HTML 코드 추가

코드 복사

코드는 다음과 같습니다.

> > ~              

~ > ~ ~                                                                                                 ~               ~ >

{$i}

원래 공식 HTML 코드는 다음과 같습니다.





코드 복사


코드는 다음과 같습니다.

• 
• 
• 
• 

• 


• 


• 


• 




이를 바탕으로 Slider_block의 상위 레이어 DIV가 생성되고 위치는 상대적으로 설정됩니다. 주로 하위 레이어 Slider-Pager의 절대 위치 지정을 위해 페이지 "1, 2, 3"을 넘깁니다.

3단계: CSS jquery.bxslider.css 수정 및 슬라이더 페이저에 대한 CSS 스타일 최적화 추가

코드 복사

코드는 다음과 같습니다. #slider_block{위치: 상대;여백: 0 자동;높이: 245px;margin-top:10px;overflow:hidden;} #slider-pager{위치: 절대;하단: 10px;오른쪽: 10px;z-색인: 999;글꼴 크기: 0px;} #slider-pager .pager-link {float: 왼쪽;너비: 15px;높이: 15px;줄 높이: 15px;텍스트 정렬: 센터;여백: 0 0 0 10px;배경: #FC0;색상: #930; } #slider-pager .active {배경: #0C3;색상: #fff;}

/*그림자 효과 제거, 브라우저는 4jcms와 호환되지 않습니다 */
/*.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc
-webkit-box-shadow: 0 0 5px #ccc
상자 그림자: 0 0 5px #ccc
테두리: 단색 #fff 5px
왼쪽: -5px
배경: #fff
}

*/
#slider_block{위치: 상대;여백: 0 자동;높이: 245px;margin-top:10px;overflow:hidden;}
#slider-pager{위치: 절대;하단: 10px;오른쪽: 10px;z-색인: 999;글꼴 크기: 0px;}
#slider-pager .pager-link {float: 왼쪽;너비: 15px;높이: 15px;줄 높이: 15px;텍스트 정렬: 센터;여백: 0 0 0 10px;배경: #FC0;색상: #930; }
#slider-pager .active {배경: #0C3;색상: #fff;}

/*그림자 효과 제거, 브라우저는 4jcms와 호환되지 않습니다. */
/*.bx-래퍼 .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
상자 그림자: 0 0 5px #ccc; 테두리: 단색 #fff 5px;

왼쪽: -5px;
배경: #fff;
}
*/


최종 리노베이션 완료

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.