Code slide chạy vòng tròn lặp rất đẹp
(mượn của trang lorem.vn ^_^)
Code gồm 3 phần
Phần 1 là mã CSS:
#slideshow{margin-top:-5px; overflow:visible}
.carousel-container { position:relative; width:950px; padding:0px 0 0 0; margin-center:5px; z-index:1;}
#carousel-1 { height:350px; width:950px; background:none; position:relative; overflow:visible}
.carousel-image { border:0; display:block;}
.carousel-feature { position:absolute; top:-1000px; center:-1000px; border:none; cursor:pointer;}
.tracker-summation-container { position:absolute; color:white; center:48px; top:0px; padding:3px; margin:3px; background-color:#000; display:none;}
.tracker-individual-container {position:absolute;left:0px;top:0px;z-index:5555;}
.tracker-individual-container .tracker-individual-blip {display:block; width:0px; height:0px;background:#000;float:left;margin-right:0px;background:url("") no-repeat top; text-indent:-5000px;}
.tracker-individual-container .tracker-individual-blip:hover{background-position:center;}
.tracker-individual-container .tracker-individual-blip-selected {background-position:bottom;}
.tracker-individual-container .tracker-individual-blip-selected:hover {background-position:bottom;}
.tracker-individual-blip-selected {cursor:default !important;}
.carousel-container { position:relative; width:950px; padding:0px 0 0 0; margin-center:5px; z-index:1;}
#carousel-1 { height:350px; width:950px; background:none; position:relative; overflow:visible}
.carousel-image { border:0; display:block;}
.carousel-feature { position:absolute; top:-1000px; center:-1000px; border:none; cursor:pointer;}
.tracker-summation-container { position:absolute; color:white; center:48px; top:0px; padding:3px; margin:3px; background-color:#000; display:none;}
.tracker-individual-container {position:absolute;left:0px;top:0px;z-index:5555;}
.tracker-individual-container .tracker-individual-blip {display:block; width:0px; height:0px;background:#000;float:left;margin-right:0px;background:url("") no-repeat top; text-indent:-5000px;}
.tracker-individual-container .tracker-individual-blip:hover{background-position:center;}
.tracker-individual-container .tracker-individual-blip-selected {background-position:bottom;}
.tracker-individual-container .tracker-individual-blip-selected:hover {background-position:bottom;}
.tracker-individual-blip-selected {cursor:default !important;}
Phần 2 là mã Script:
add vào Header
<script
type="text/javascript"
src="http://lorem.vn/js/jquery.js"></script>
<script type="text/javascript" src="http://lorem.vn/js/jquery.carouFredSel-4.4.3-packed.js"></script>
<script type="text/javascript" src="http://lorem.vn/js/lightbox.js"></script>
<script type="text/javascript" src="http://lorem.vn/js/script.js"></script>
<script type="text/javascript" src="http://lorem.vn/js/jquery.featureCarousel.min.js"></script>
<script type="text/javascript" src="http://lorem.vn/js/jquery.carouFredSel-4.4.3-packed.js"></script>
<script type="text/javascript" src="http://lorem.vn/js/lightbox.js"></script>
<script type="text/javascript" src="http://lorem.vn/js/script.js"></script>
<script type="text/javascript" src="http://lorem.vn/js/jquery.featureCarousel.min.js"></script>
Phần 3 là mã html: (tạo 1 box HTML, vào bố cục chức năng để vào vị trí mong muốn)
<div id="slideshow">
<div id="carousel-1">
<div class="carousel-feature"><a href="#"><img class="carousel-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOjbBCuiRhfugHbs-RhDGdpjtU1VzpYF_yYCTpqi1HdYTLp8BGIsibt0zu2SCckAhhrKP6wZ9folF4SLOi39pvv2_Ah-mUIyb4Xgg_hvnQ7C9QIVa1MQN8NqDsAtDTH2ZxtoeqlpBMjon6/s1600/11.jpg" alt="marketingonline365.com" /></a></div>
<div class="carousel-feature"><a href="#"><img class="carousel-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7KZu7LyN0477MZSwfNyRibvFFFfXQv60sJV9oHMBrJpUVncUSp2x3zXIk9JMimJ7xiJowHyzJvMecyPPxoVVlujmlCfDIi0C_c6H9HYKlHqZdsVnDL_e4kieua3WynyjzaISeL_l5mmL/s1600/22.jpg" alt="marketingonline365.com" /></a></div>
<div class="carousel-feature"><a href="#"><img class="carousel-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_APxVGDI0FM8Ni_7wB4Gzfm_UMI51Wo7romddhJmMdTvqCs7oD399Iq5U9aFqGXLpKgjPCs8uVnDoEIRiYCTY1iQsGbkhCcGtGrcC5evyM3xBOUtIeUvW_WdYw01O0-CSHckNDEUFssc/s1600/33.jpg" alt="marketingonline365.com" /></a></div>
</div>
</div>
<div id="carousel-1">
<div class="carousel-feature"><a href="#"><img class="carousel-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOjbBCuiRhfugHbs-RhDGdpjtU1VzpYF_yYCTpqi1HdYTLp8BGIsibt0zu2SCckAhhrKP6wZ9folF4SLOi39pvv2_Ah-mUIyb4Xgg_hvnQ7C9QIVa1MQN8NqDsAtDTH2ZxtoeqlpBMjon6/s1600/11.jpg" alt="marketingonline365.com" /></a></div>
<div class="carousel-feature"><a href="#"><img class="carousel-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7KZu7LyN0477MZSwfNyRibvFFFfXQv60sJV9oHMBrJpUVncUSp2x3zXIk9JMimJ7xiJowHyzJvMecyPPxoVVlujmlCfDIi0C_c6H9HYKlHqZdsVnDL_e4kieua3WynyjzaISeL_l5mmL/s1600/22.jpg" alt="marketingonline365.com" /></a></div>
<div class="carousel-feature"><a href="#"><img class="carousel-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_APxVGDI0FM8Ni_7wB4Gzfm_UMI51Wo7romddhJmMdTvqCs7oD399Iq5U9aFqGXLpKgjPCs8uVnDoEIRiYCTY1iQsGbkhCcGtGrcC5evyM3xBOUtIeUvW_WdYw01O0-CSHckNDEUFssc/s1600/33.jpg" alt="marketingonline365.com" /></a></div>
</div>
</div>
Các bạn lưu ý những link của web mình
lấy các bạn có thể thay đổi lại cho có bản quyền tí nhé
Không có nhận xét nào:
Đăng nhận xét