Home Web Front-end JS Tutorial jQuery makes automatic style change function during cycle time

jQuery makes automatic style change function during cycle time

May 14, 2018 pm 01:54 PM
jquery time automatic

This time I will bring you the function of jQuery to automatically change the style during the cycle time. What are the precautions for jQuery to automatically change the style during the cycle time? The following is a practical case, let's take a look.

js core code part:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

$(document).ready(function(){

 // 皮肤列表选项切换

 $(".ulSkin li").click(function(){

 $(this).addClass("active").siblings("li").removeClass("active");

 });

});

// 皮肤背景切换

function skin1(){

 $("#skins").removeClass("skin0 skin2 skin3 skin4").addClass("skin1");

}

function skin2(){

 $("#skins").removeClass("skin0 skin1 skin3 skin4").addClass("skin2");

}

function skin3(){

 $("#skins").removeClass("skin0 skin1 skin2 skin4").addClass("skin3");

}

function skin4(){

 $("#skins").removeClass("skin0 skin1 skin2 skin3").addClass("skin4");

}

function skin0(){

 $("#skins").removeClass("skin4 skin1 skin2 skin3").addClass("skin0");

}

// 设定循环切换相隔时间

$(window).load(function() {

 setInterval("autochange()",3000);

})

// 设置一个判断计数器

var count=0;

// 根据计数器状态切换响应的皮肤

function autochange() {

 if (count==0) {

 skin1();

 }

 if (count==1) {

 skin2();

 }

 if (count==2) {

 skin3();

 }

 if (count==3) {

 skin4();

 }

 if (count==4) {

 skin0();

 }

 count=count+1;

 if (count>4) {

 count=0;

 }

}

Copy after login
css style part:

1

2

3

4

5

6

7

8

.ulSkin{height:150px; width:auto;}

.ulSkin li{float:left; width:80px; list-style: none;}

.active{font-weight:700; font-size:18px;}

.skin0{color:#000;}

.skin1{color:#00f;}

.skin2{color:#0f0;}

.skin3{color:#f00;}

.skin4{color:#ff0;}

Copy after login
HTML code part:

1

2

3

4

5

6

7

8

9

10

<p>

<ul class="ulSkin">

 <li class="active skin0">样式0</li>

 <li class="skin1">样式1</li>

 <li class="skin2">样式2</li>

 <li class="skin3">样式3</li>

 <li class="skin4">样式4</li>

</ul>

<p id="skins" class="skin0">样式自动更换测试</p>

</p>

Copy after login
The complete sample code is as follows:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

<meta charset="utf-8">

<title>www.jb51.net jQuery自动定时更换样式</title>

<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

 

<style>

.ulSkin{height:150px; width:auto;}

.ulSkin li{float:left; width:80px; list-style: none;}

.active{font-weight:700; font-size:18px;}

.skin0{color:#000;}

.skin1{color:#00f;}

.skin2{color:#0f0;}

.skin3{color:#f00;}

.skin4{color:#ff0;}

</style>

 

<p>

<ul class="ulSkin">

 <li class="active skin0">样式0</li>

 <li class="skin1">样式1</li>

 <li class="skin2">样式2</li>

 <li class="skin3">样式3</li>

 <li class="skin4">样式4</li>

</ul>

<p id="skins" class="skin0">样式自动更换测试</p>

</p>

<script>

$(document).ready(function(){

 // 皮肤列表选项切换

 $(&quot;.ulSkin li&quot;).click(function(){

 $(this).addClass(&quot;active&quot;).siblings(&quot;li&quot;).removeClass(&quot;active&quot;);

 });

});

// 皮肤背景切换

function skin1(){

 $(&quot;#skins&quot;).removeClass(&quot;skin0 skin2 skin3 skin4&quot;).addClass(&quot;skin1&quot;);

}

function skin2(){

 $(&quot;#skins&quot;).removeClass(&quot;skin0 skin1 skin3 skin4&quot;).addClass(&quot;skin2&quot;);

}

function skin3(){

 $(&quot;#skins&quot;).removeClass(&quot;skin0 skin1 skin2 skin4&quot;).addClass(&quot;skin3&quot;);

}

function skin4(){

 $(&quot;#skins&quot;).removeClass(&quot;skin0 skin1 skin2 skin3&quot;).addClass(&quot;skin4&quot;);

}

function skin0(){

 $(&quot;#skins&quot;).removeClass(&quot;skin4 skin1 skin2 skin3&quot;).addClass(&quot;skin0&quot;);

}

// 设定循环切换相隔时间

$(window).load(function() {

 setInterval(&quot;autochange()&quot;,3000);

})

// 设置一个判断计数器

var count=0;

// 根据计数器状态切换响应的皮肤

function autochange() {

 if (count==0) {

 skin1();

 }

 if (count==1) {

 skin2();

 }

 if (count==2) {

 skin3();

 }

 if (count==3) {

 skin4();

 }

 if (count==4) {

 skin0();

 }

 count=count+1;

 if (count&gt;4) {

 count=0;

 }

}

</script>

Copy after login
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

react router4 redux detailed explanation of the steps to control routing permissions

Detailed explanation of the advantages and disadvantages of using Webpack path and publicPath

The above is the detailed content of jQuery makes automatic style change function during cycle time. For more information, please follow other related articles on the PHP Chinese website!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How much does a Douyin level 10 light sign cost? How many days does it take to create a level 10 fan sign? How much does a Douyin level 10 light sign cost? How many days does it take to create a level 10 fan sign? Mar 11, 2024 pm 05:37 PM

On the Douyin platform, many users are eager to obtain level certification, and the level 10 light sign shows the user's influence and recognition on Douyin. This article will delve into the price of Douyin’s level 10 light boards and the time it takes to reach this level to help users better understand the process. 1. How much does a level 10 Douyin light sign cost? The price of Douyin's 10-level light signs will vary depending on market fluctuations and supply and demand. The general price ranges from a few thousand yuan to ten thousand yuan. This price mainly includes the cost of the light sign itself and possible service fees. Users can purchase level 10 light signs through Douyin’s official channels or third-party service agencies, but they should pay attention to legal channels when purchasing to avoid false or fraudulent transactions. 2. How many days does it take to create a level 10 fan sign? Reach level 10 light sign

How long does it take to clear the Elden Ring? How long does it take to clear the Elden Ring? Mar 11, 2024 pm 12:50 PM

Players can experience the main plot of the game and collect game achievements when playing in Elden's Circle. Many players don't know how long it takes to clear Elden's Circle. The player's clearance process is 30 hours. How long does it take to clear the Elden Ring? Answer: 30 hours. 1. Although this 30-hour clearance time does not refer to a master-like speed pass, it also omits a lot of processes. 2. If you want to get a better game experience or experience the complete plot, then you will definitely need to spend more time on the duration. 3. If players collect them all, it will take about 100-120 hours. 4. If you only take the main line to brush BOSS, it will take about 50-60 hours. 5. If you want to experience it all: 150 hours of base time.

How to set the time for publishing works on Xiaohongshu? Is the time for publishing the work accurate? How to set the time for publishing works on Xiaohongshu? Is the time for publishing the work accurate? Mar 24, 2024 pm 01:31 PM

Xiaohongshu, a platform full of life and knowledge sharing, allows more and more creators to express their opinions freely. In order to get more attention and likes on Xiaohongshu, in addition to the quality of content, the time of publishing works is also crucial. So, how to set the time for Xiaohongshu to publish works? 1. How to set the time for publishing works on Xiaohongshu? 1. Understand the active time of users. First, it is necessary to clarify the active time of Xiaohongshu users. Generally speaking, 8 pm to 10 pm and weekend afternoons are the times when user activity is high. However, this time period will also vary depending on factors such as audience group and geography. Therefore, in order to better grasp the active period of users, it is recommended to conduct a more detailed analysis of the behavioral habits of different groups. By understanding users’ lives

Linux Tips: Cancel automatic indentation when pasting in vim Linux Tips: Cancel automatic indentation when pasting in vim Mar 07, 2024 am 08:30 AM

Preface: vim is a powerful text editing tool, which is very popular on Linux. Recently, I encountered a strange problem when using vim on another server: when I copied and pasted a locally written script into a blank file on the server, automatic indentation occurred. To use a simple example, the script I wrote locally is as follows: aaabbbcccddd. When I copy the above content and paste it into a blank file on the server, what I get is: aabbbcccddd. Obviously, this is what vim does automatically for us. Format indentation. However, this automatic is a bit unintelligent. Record the solution here. Solution: Set the .vimrc configuration file in our home directory, new

How to use PUT request method in jQuery? How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

Automount drives on Linux Automount drives on Linux Mar 20, 2024 am 11:30 AM

If you are using a Linux operating system and want the system to automatically mount the drive on boot, you can do this by adding the device's unique identifier (UID) and mount point path to the fstab configuration file. fstab is a file system table file located in the /etc directory. It contains information about the file systems that need to be mounted when the system starts. By editing the fstab file, you can ensure that the required drives are loaded correctly every time the system starts, thus ensuring stable system operation. Automatically mounting drivers can be conveniently used in a variety of situations. For example, I plan to back up my system to an external storage device. To achieve automation, ensure that the device remains connected to the system, even at startup. Likewise, many applications will directly

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

When will Ark of Destiny Dreams come out? When will Ark of Destiny Dreams come out? Mar 14, 2024 pm 03:00 PM

Many players want to ask when Ark of Destiny Sleepy Dream will be released. Sleepy Dream will meet us on March 13th. There will also be new professional fighter Jia Nan, new continent Rowan, God's Chosen Hero Weapons, new BOSS and other content. Specific details Let’s take a look at the content of this introduction to the launch time of Ark of Destiny Sleepy Dreams. Ark of Destiny Guide: When will Ark of Destiny Dreams be released? Answer: March 13th. Item level requirements. Level 1-Level 3 requires props level: 1540. Level 4 requires props level: 1560. Dropped items: Dream Thoughts, Dream Mark, Falling into despair. Brand new professional fighter male 1. Characteristics: Shura energy, accumulate Shura energy to enter [Kingdom Boxing State] 2. Professional attributes: Melee profession 3. Professional weapon: heavy arm armor. New Continent Rowan 1. How to open it

See all articles