Home > Web Front-end > JS Tutorial > jquery circular rotating image scrolling switching effect_jquery

jquery circular rotating image scrolling switching effect_jquery

WBOY
Release: 2016-05-16 18:11:38
Original
1324 people have browsed it

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:
jquery circular rotating image scrolling switching effect_jquery
Online demo: http://demo.jb51.net/js/ImagesRotateScroll/index.html
Step1. Create HTML

Copy code The code is as follows:




  •  Chun-Li

  • jquery circular rotating image scrolling switching effect_jquery


  • KEN

  • BALROG

  • CAMMY

  • GOUKI< ;/li>
  • BLANKA

  • HONDA

  • FEI LONG
  • > ;
  • GUILE

  • RYU

  • SAGAT

  • THWAK

  • ZANGIEF








Step2. Create CSS
Copy code The code is as follows:

#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
Copy code The code is as follows:





Package downloadhttp://www.jb51.net/jiaoben/34107.html
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template