[Code] 1 kiểu chạy ảnh hay

Admin · 1 [Code] 1 kiểu chạy ảnh hay Mon Nov 12, 2012 8:45 am

Admin

Trùm Forum

avatar-data : 57,11597|47,11460|50,11927|49,10992|64,12636|51,11466|48,12921|58,12249|66,11440
Posts

Posts : 354
Uy Tín

Uy Tín : 13
Points

Points : 1048

Giới tính : Nam

Demo:

[You must be registered and logged in to see this image.]

Cho vào cuối Overall Header:

Code:: <script type="text/javascript" src="http://mohinhtinh.com/nivo-slider/jquery.nivo.slider.pack.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({controlNav: false, directionNavHide: false}); }); </script>

Cho vào chỗ muốn hiển thị ảnh:

Code:: <div align="center" style="margin: 0 0 0px -1px"> <link rel="stylesheet" href="http://mohinhtinh.com/nivo-slider/themes/default/default.css" type="text/css" media="screen"> <link rel="stylesheet" href="http://mohinhtinh.com/nivo-slider/nivo-slider.css" type="text/css" media="screen"> <div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider" style="position: relative; background-image: url(http://mohinhtinh.com/nivo-slider/images/8.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: initial initial; background-repeat: no-repeat no-repeat; "> <img src="http://mohinhtinh.com/nivo-slider/images/8.jpg" alt="" style="display: none; "> <img src="http://mohinhtinh.com/nivo-slider/images/7.jpg" alt="" style="display: none; "> <img src="http://mohinhtinh.com/nivo-slider/images/1.jpg" alt="" style="display: none; "> <img src="http://mohinhtinh.com/nivo-slider/images/2.jpg" alt="" style="display: none; "> <img src="http://mohinhtinh.com/nivo-slider/images/6.jpg" alt="" style="display: none; "> <img src="http://mohinhtinh.com/nivo-slider/images/3.jpg" alt="" style="display: none; "> <img src="http://mohinhtinh.com/nivo-slider/images/4.jpg" alt="" style="display: none; "> <div class="nivo-caption" style="opacity: 0; "><p></p></div> <div class="nivo-directionNav"> <a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div> <div class="nivo-slice" style="left: 0px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: 0px 0%; background-repeat: no-repeat no-repeat; "></div> <div class="nivo-slice" style="left: 59px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -59px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 118px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -118px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 177px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -177px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 236px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -236px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 295px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -295px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 354px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -354px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 413px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -413px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 472px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -472px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 531px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -531px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 590px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -590px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 649px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -649px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 708px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -708px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 767px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -767px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 826px; width: 54px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -826px 0%; background-repeat: no-repeat no-repeat; "></div></div> </div> </div>

Cntt-k3

1 [Code] 1 kiểu chạy ảnh hay Mon Nov 12, 2012 8:45 am

Admin