ai có cái side show the này share cho mình vói !

[vanquyen2790]

Tình hình là bên thiết kế đưa mình cái hình thế này:

Ai có cái side show giống vậy share cho minh với bnag jquery thi tốt nha.
Do mình cũng biết chút jquery nhưng không đủ để viết nên cái side show này

[HTT.itvn]

Code này mình rip của Joomla , code có dạng như sau :

<link rel="stylesheet" type="text/css" href="./slide.css" media="all" /> <script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./jquery.accordion.js"></script>
<script type="text/javascript" src="./jcarousellite_1.0.1_custom.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
$("#jm-contain-175295014216846660591307848364").jCarouselLite({
auto: 1000,speed:2000,visible:3,
btnNext: "#jmmainwrap-jm-contain-175295014216846660591307848364 .jm-next",
btnPrev: "#jmmainwrap-jm-contain-175295014216846660591307848364 .jm-prev",
width: 760,
width_img: 100});
});
</script>
<div class="block jm-products-slider-listing" id="jmmainwrap-jm-contain-175295014216846660591307848364"
style="width:680px;border:1px solid #d9d9d9;">
<div class="jm-prev">
<img class="jm-slide-left-img" title="Left direction"
onmouseout="this.src='./img/dweb_re-left.png'"
onmouseover="this.src='./img/dweb_re-left-hover.png'" alt="Left direction"
src="./img/dweb_re-left.png"/>
</div>
<div class="jm-next">
<img class="jm-slide-right-img" title="Right direction"
onmouseout="this.src='./img/dweb_re-right.png'"
onmouseover="this.src='./img/dweb_re-right-hover.png'" alt="Right direction"
src="./img/dweb_re-right.png"/>
</div>
<div id="jm-contain-175295014216846660591307848364" class="jm-slider">
<ul class="jm-slider-ul" style="text-align:center;"><br>
<li class="jm-slider-li" style="float:left;width:200px;height:80px">
<img src="./img/bidv.png" />
</li>
<li class="jm-slider-li" style="float:left;width:200px;height:80px">
<img src="./img/donga.png" />
</li>
<li class="jm-slider-li" style="float:left;width:200px;height:80px">
<img src="./img/vietinbank.png" />
</li>
</ul>
</div>
</div>

Với số màu đỏ đậm là số hình ảnh sẽ hiển thị thấy được , mầu xanh lá cây là chiều dài khung slide , màu xanh da trời là chiều dài khung ảnh . Và nhớ căn chỉnh file CSS nữa nhé .

Để thêm nhiều ảnh bạn có thể thêm code tương tự như sau vào UL :

<li class="jm-slider-li" style="float:left;width:200px;height:80px"> <img src="./img/vietinbank.png" />
</li>

Code này mà sử dụng PHP & MySQL thì rất tiện cho quản lý .

TẢI DEMO FULL VỀ XEM TẠI ĐÂY .

[co.jsc68]

anh HTT rất nhiệt tình nha! Phải học hỏi anh thật nhiều mới được hihi

[vanquyen2790]

Thank anh HTT !
nhưng mà anh bị nhầm một chút !
tại như cái hình của em thì cái side show nó chuyền đông dồng thòi nôi dung phia trên cũng chuyển động theo.
em lên mạng chi thấy cái side show mà bên trên la image khi thay bằng div thì nó bi không chạy được.
anh có cái đó thì share cho em với !
Yếu Jquery khồ thiệt

[HTT.itvn]

Em cho anh cái link demo nhé .