[Code] slider Chạy ảnh rất hay

Demo:

Cách làm :
Đầu tiên cho cái này vào Header ở cuối

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>

Tiếp theo cho cái này vào vị trí mình 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>

Có thể cho code bên trên vào HEader trên code
[code] <div class="pun">[/img]
-------------END--------------------------