This effect is quite special and cute, so I haven’t seen it much on external websites. Friends who are interested can download it and use it themselves.
PS: It has been modified to be compatible with popular browsers.
Rendering:
Online demo: http://demo.jb51.net/js/ImagesRotateScroll/index.html
Step1. Create HTML
Step2. Create CSS
#rotatescroll {
width: 300px;
height: 300px;
margin: 0 auto;
position: relative;
}
#rotatescroll .viewport{
width: 300px;
height: 300px;
position: relative;
margin : 0 auto;
overflow: hidden;
}
#rotatescroll .overview {
width: 798px;
position: absolute;
list-style: none;
margin : 0;
padding: 0;
left: 0;
top: 0;
}
#rotatescroll .overview li {
width: 300px;
height: 300px ;
float: left;
position: relative;
}
#rotatescroll .overlay {
height: 300px;
width: 300px;
background: url(.. /images/bg-rotatescroll.png) no-repeat 0 0;
position: absolute;
left: 0;
top: 0;
}
#rotatescroll .thumb {
width: 26px;
height: 26px;
z-index: 200;
background: url(../images/bg-thumb.png) no-repeat 50% 50%;
position: absolute;
top: 0px;
cursor: pointer;
left: 0px;
}
#rotatescroll .dot {
background: url(../images/bg -dot2.png) no-repeat 0 0;
display: none;
height: 12px;
width: 12px;
position: absolute;
left: 155px;
top : 3px;
z-index: 100;
}
#rotatescroll .dot span { display: none; }
Step3. Insert jQuery and script package
Package download
http://www.jb51.net/jiaoben/34107.htmlStatement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn