IT Lesson

Create SliderShow bằng Jquery

Create SliderShow bằng Jquery

JS
$(function(){
$(#slider li).hide().filter(:first).show();
setInterval(slideshow, 3000);
});

function slideshow() {
$(#slider li:first).fadeOut(slow).next().fadeIn(slow).end().appendTo(#slider);
}

Css
#slider {
    position:relative;
    margin:0;
    padding:0;
    list-style-type:none;
    width:650px;
    height:430px;
    border: 1px solid #008000;    
    overflow:hidden;
}
#slider li {
    position:absolute;      
}
#slider img {
    width:650px;
    height:430px;  
}
#slider p {
    position:absolute;
    bottom:0;
    padding:20px;
    color:#ffffff;
    background-color: #008000;
    opacity: 0.6;
    margin:0;
    left:0;
    right:0;
}

HTML
<ul id="slider">
<li>
<a href="https://flic.kr/p/pq1UFA">
<img src="https://c4.staticflickr.com/4/3867/15367978792_acd632254d_h.jpg" alt="Alter Apfelbaum"/>
</a>
<p>Slide 1</p>
</li>
<li>
    <a href="https://flic.kr/p/ppXtn4">
        <img src="https://c3.staticflickr.com/3/2942/15367308281_cf8a164414_h.jpg" alt="Ruth St Flowers-191"/>
    </a>
    <p>Slide 2</p>
</li>
<li>
    <a href="https://flic.kr/p/pq5a4k">
        <img src="https://c4.staticflickr.com/4/3862/15368612485_251ef5de2f_h.jpg" alt="Canada Close In."/>
    </a>
    <p>Slide 3</p>
</li>
</ul>

visit link download