Simple and commonly used slideshow implementation code

Simple and commonly used slideshow implementation code_jquery

WBOY

Release： 2016-05-16 17:21:22

Original

1307 people have browsed it

Slideshows that automatically play pictures are a popular display method on current websites. We can find various slideshow plug-ins and codes with rich special effects on the Internet. The project here requires that I make a simple one myself, so I won’t explain it in detail. The code is very simple. Just look at the renderings and code.
Simple and commonly used slideshow implementation code_jquery
All code ppt.html, you need to provide the corresponding picture to display:

Copy code The code is as follows :

< ;script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">
PPT Demo
< style type="text/css">
.ppt-container, .ppt-container ul, .ppt-container li, .ppt-container img {
margin : 0;
padding : 0;
border : 0;
}
.ppt-container {
width : 752px; /*Set the width and height of the container here according to the size of the displayed image*/
height : 328px;
position : relative;
}
.ppt-container img {
width : 100%;
height : 100%;
}
.ppt-container .hide {
display : none;
}
.ppt-container ul.image-list li {
position : absolute;
top : 0px;
left : 0px;
}
.ppt-container ul.button-list {
list-style : none;
position : absolute;
right : 20px;
bottom : 20px;
}
.ppt-container ul.button-list li {
float : left;
padding-right : 10px;
}
.ppt-container ul.button-list span {
background : #E5E5E5;
padding : 1px 7px;
line-height : 20px;
font-size : 13px;
display : block;
cursor : default;
}
.ppt-container ul.button-list span.selected {
color : #FFF;
background : #FF7000;
}

< span data-index="2">3