JavaScript 实战(图片切换)【轮播图】

功能描述:

  1. 点击下一张换到下一张图片。
  2. 点击上一张换到上一张图片。
  3. 等到最后一张时,再点击下一张呈现第一张图片。

实现效果:

图片切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片切换</title>
    <style>
    	/* 给图片设置同样的宽和高 */
        img {
            width: 200px;
            height: 200px;
        }
        /* 给按钮设置精美的样式*/
        button {
            width:98px;
            height: 40px;
            background: skyblue;
            color: white;
            border: 0;
        }
    </style>
</head>
<body>
	// 放入第一张图片
    <img src="../imgs/Baymax1.png" id="baymax">
    <br>
    <button id='prev'>上一张</button>
    <button id='next'>下一张</button>
    <script>
        // 1.获取事件源
        var baymax = document.querySelector('#baymax')
        var nextBtn = document.querySelector('#prev')
        var prevBtn = document.querySelector('#next')
		// 初始化 最小索引、最大索引和当前索引
        var minIndex = 1
        var maxIndex = 4
        var currentIndex = minIndex
        // 2.监听按钮的点击 (下一张)
        nextBtn.onclick = function(){
        	// 当前索引等于最大索引时,把当前索引修改为最小索引
            if(currentIndex === maxIndex){
                currentIndex = minIndex
            }else{
            	// 当前索引每次+1
                currentIndex++
            }
            // 改变 baymax 图片的 src 属性
            baymax.setAttribute('src','../imgs/Baymax'+ currentIndex +'.png')
        }
        // 监听按钮的点击 (上一张)
        prevBtn.onclick = function(){
            if(currentIndex === minIndex){
                currentIndex = maxIndex
            }else{
                currentIndex--
            }
            baymax.setAttribute('src','../imgs/Baymax'+ currentIndex +'.png')
        }
    </script>
</body>
</html>

注意点:

  1. 图片的地址要设置成连续的,比如 'Baymax1.png''Baymax2.png',便于获取和呈现图片。
  2. currentIndex 的作用是来定位到我们想得到的图片,利用 + 拼接的方法,改变图片的地址。
  3. setAttribute():用于创建或改变某个新属性。此处的作用就是改变图片的地址。[ 参考链接 ]

你可能感兴趣的:(JavaScript,实战,javascript,前端)