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

jquery circular rotating image scrolling switching effect_jquery

WBOY
WBOYOriginal
2016-05-16 18:11:381289browse

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
Statement:
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