JavaScript Image Switching: Effective Repetition Techniques with setTimeout and clearTimeout｜DAD UNION

In this post, we will introduce a method to switch images using two frequently used JavaScript functions, setTimeout and clearTimeout. By leveraging this simple yet powerful technique, you can create interactive websites that grab users’ attention.

Basic CSS Setup

First, we’ll set up the basic styling for the page. CSS is essential for designing the appearance of a webpage, and the following code defines the container where the image will be displayed, the font for the text, and other layout elements. Feel free to modify this CSS code based on your project’s needs, as it is just an example.

<style type="text/css">
<!--
body {
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	margin:0;
	padding:0;
	text-align:center;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.4em;
	text-align:center;
	padding:15px 0 10px 0;
}
.cWrap{
	width:700px;
	margin:0 auto;
}
-->
</style>

Image Switching Process with JavaScript

Using JavaScript, we’ll implement the cngimg() function, which switches images at fixed intervals. The setTimeout function is used to run a function once after a specified time, while the clearTimeout function cancels a timer set by setTimeout. By combining these two functions, we can switch images endlessly.

<script type="text/javascript">
<!--
	var tid=0;
    var cnt=1;
    function cngimg() {
		document.images["cimg"].src="i"+cnt+".jpg";
        cnt++;
        if(cnt==4) cnt=1;
        clearTimeout(tid);
		// Image switches every 1 second (1000ms)
        tid=setTimeout("cngimg()", 1000);
    }
// -->
</script>

Implementing Image Switching with HTML

To actually switch images on the webpage, we’ll combine HTML with the JavaScript function. We use the onLoad event in the body tag so that the image switching process (cngimg()) automatically starts when the page loads. The image with name=”cimg” will switch its source based on the incrementing count.

<body onLoad="cngimg()">
<div class="cWrap">

	<h1>The image element switches every specified number of seconds (1000 milliseconds).。<br />The JavaScript process repeats endlessly.</h1>
    
    <div align="center"><img name="cimg" src="i01.jpg" alt="Switching Image" width="150" height="150" /></div>


</div><!--/cWrap-->
</body>

Using setTimeout and clearTimeout for Repeated Image Switching

Below is a demo page where you can experience this functionality in action. Please use it to deepen your understanding.
Demo: Repeated Image Switching with setTimeout and clearTimeout

Conclusion

In this article, we introduced how to automatically switch images at specified intervals using JavaScript’s setTimeout and clearTimeout functions. By using this technique, you can create dynamic, engaging websites and applications. Additionally, combining basic knowledge of CSS and HTML allows you to implement visually appealing and interactive elements.

　
*Please use this information at your own risk. Do not reuse the Google Analytics tag from the demo page’s head tag.