Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how jQuery realizes the special effects of picture and text rotation switching. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

First, realize the function:

1. Realize self-rotation of pictures by timing.

2. When the picture is rotated to the last one, the rotation will continue from the first one.

3. Click the small circle icon to automatically switch to the corresponding picture.

4. Stop the rotation of the picture on the mouse hovering picture. When the mouse moves away from the picture, the rotation will continue.

5. The left and right button icon will be displayed on the mouse hovering picture, and the left and right key icon will be hidden when the mouse leaves.

6, click the left button icon will switch to the previous picture, when switching to the first picture, click the left button icon will switch to the last picture; right click the icon will be displayed to the next picture, when switching to the last picture, right click on the icon to switch to the first picture.

2. Implementation code:

1. Css code:

Body {

Margin:0

Padding:0

Font:16px "Microsoft Yahei", sans-serif

}

. Play-box {

Position:relative

Width:500px

Height:313px

Margin:100px auto

Border:1px solid # ccc

}

. Play-box img {

Width:500px

Height:313px

Border:0

}

. Play-box a {

Display:block

Overflow:hidden

Opacity:0

Height:0

Transition:opacity .5s

}

# imgList a.current {

Opacity:1

Height:auto

}

Ul {

Margin:0

Padding:0

List-style:none

}

Ul li {

Width:10px

Height:10px

Margin:0 4px

Font-size:0

Border-radius:50%

Background-color:#fff

Cursor:pointer

Float:left

}

Ul li.current {

Background-color:red

}

. IconList {

Position:absolute

Bottom:10px

Left:50%

Margin-left:-45px

}

. Sliderbar {

Position:absolute

Top:50%

Margin-top:-25px

Width:30px

Height:50px

Font-family:simsun

Color:#fff

Text-align:center

Line-height:50px

Background-color:#000

Opacity:.6

Display:none

Cursor:pointer

}

. Slidebar-left {

Left:0

}

. Slidebar-right {

Right:0

}

2. Body code

3. Jquery code:

$(document) Ready (function () {

/ / set the variable speed to 3 seconds

Var speed=3000

/ / the loop variable is 1, which is to avoid the timer waiting for the first chapter picture

These are all the contents of the article "how to achieve the special effects of jQuery rotation". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.