js+css+html实现个性化图片轮播

迷南。 2022-03-30 07:24 225阅读 0赞

# js+css+html实现个性化图片轮播 #

## 学习js的时候按照教程写了一点简单的图片轮播，后来又发现了很多个性化轮播方式，于是学习借鉴完成了这个波浪式的图片轮播 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>你笑起来真像好天气</title>
    
    <style>//css 对于边框的颜色、大小做定义
    	* { 
    		margin: 0;
    		padding: 0;
    	}
    	li { 
    		list-style: none;
    	}
    	.solid { 			
    		width: 800px;
    		height: 360px;
    		margin: 150px auto 0;
    		box-shadow: 1px 7px 25px #fd8fd9;
    	}
    	.solid ul { 
    		height: 100%;
    	}
    	.solid ul li { 
    		position: relative;
    		float: left;
    		box-sizing: border-box;
    		transform-style: preserve-3d;
    		transform: translateZ(-180px);
    	}
    	.solid ul li div { 
    		position: absolute;
    		width: 100%;
    		height: 100%;
    	}
    	.solid ul li div:nth-child(1) { 
    		top: -360px;
    		background: url(css//images/02.jpg);
    		transform-origin: bottom;
    		transform: translateZ(180px) rotateX(90deg);
    	}
    	.solid ul li div:nth-child(2) { 
    		top: 360px;
    		background: url(css/images/01.jpg);
    		transform-origin: top;
    		transform: translateZ(180px) rotateX(-90deg);
    	}
    	.solid ul li div:nth-child(3) { 
    		background: url(css/images/03.jpg);
    		transform: translateZ(180px);
    	}
    	.solid ul li div:nth-child(4) { 
    		background: url(css/images/04.jpg);
    		transform: translateZ(-180px) rotateX(180deg);
    	}
    	.solid ol { 
    		position: absolute;
    		left: 50%;
    		width: 140px;
    		height: 20px;
    		transform: translateX(-50%);
    		display: flex;
    		justify-content: space-around;
    	}
    	.solid ol li { 
    		width: 20px;
    		height: 20px;
    		background: black;
    		box-shadow: 0 2px 5px white;
    		border-radius: 50%;
    		color: white;
    		text-align: center;
    		/*斜体 12px大小/20px行高*/
    		font: italic 12px/20px 'Microsoft Yahei';
    		cursor: pointer;
    	}
    	.solid ol li.on { 
    		background: red;
    	}
    </style>
    
    </head>
    <body>//html 对图片序号的显示
    
    <div class="solid">
    	<ul class="oUl"></ul>
    	<ol>
    		<li class="on">1</li>
    		<li>2</li>
    		<li>3</li>
    		<li>4</li>
    	</ol>
    </div>
    
    <script >//js 实现轮播
    	var solid = document.getElementsByClassName('solid')[0];
    	var btn = document.querySelectorAll('ol li');
    	var oUl = document.getElementsByClassName('oUl')[0];
    	var css = document.getElementsByTagName('style')[0];
    	var timer, n = 0;
    
    	createDom();
    function createDom() { 
        var num = 100, uHTML = '', pHTML = '', tHTML = '';
        var allWidth = parseInt(getComputedStyle(solid, null).width);
        var width = allWidth / num;
        for (var i = 0; i < num; i++) { 
            uHTML += '<li><div></div><div></div><div></div><div></div></li>';
            pHTML += '.solid ul li:nth-child(' + (i + 1) + ') div{background-position-x: ' + (-i*width) + 'px;}';
            tHTML += '.solid ul li:nth-child(' + (i + 1) + '){transition: 0.8s ' + (0.3 * i / num) + 's}';
        }
        oUl.innerHTML = uHTML;
        css.innerHTML += pHTML + tHTML  + '.solid ul li, .solid ul li div{width:' + width + 'px;height:100%}';
        bindEvent();
        play();
    }
    
    function bindEvent() { 
        for (var i = 0; i < btn.length; i++) { 
            btn[i].index = i;
            btn[i].onclick = function () { 
                n = this.index;
                for (var i = 0; i < btn.length; i++) { 
                    btn[i].className = '';
                }
                this.className = 'on';
                css.innerHTML += '.solid ul li{transform: translateZ(-180px) rotateX(' + (n * 90) + 'deg);}';
            }
        };
        solid.onmouseenter = function () { 
            clearInterval(timer);
        };
        solid.onmouseleave = function () { 
            play();
        };
    }
    function play() { 
        clearInterval(timer);
        timer = setInterval(function () { 
            n++;
            n %= 4;
            for (var i = 0; i < btn.length; i++) { 
                btn[i].className = '';
            }
            btn[n].className = 'on';
            css.innerHTML += '.solid ul li{transform: translateZ(-180px) rotateX(' + (n * 90) + 'deg);}';
        }, 1000);
    }
    </script>
    <br>
    <br>
    <br>
    <br>
    
    
    </body>
    </html>

*  最终成果展示（不能传动态图呜呜呜）  
    ![单张图片的状态][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjIwNDg0_size_16_color_FFFFFF_t_70]![图片切换的状态，可惜不能传动态图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjIwNDg0_size_16_color_FFFFFF_t_70 1]

## 欢迎指正错误，提出意见。 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjIwNDg0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190105113320656.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjIwNDg0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjIwNDg0_size_16_color_FFFFFF_t_70 1]: /images/20220330/c3a04337dbbb4b11ad22cc6124f94233.png