折腾:
【未解决】基于html5up-landed的html5模板搭建网站主页
期间,需要把现在主页中的图片:
![](https://www.crifan.com/files/pic/uploads/2021/05/eef0500abb084959a5062bc89c0c0d02.jpg)
弄成轮播图
去参考已有模板,看看是否有轮播图的源码供参考。
html5up-astral/index.html#
![](https://www.crifan.com/files/pic/uploads/2021/05/39b2e9cc3a264662b9bf4210acb41b41.jpg)
有个 右箭头 可以考虑借用
html5up-parallelism/index.html
支持鼠标滚动后,水平,左右滚动
![](https://www.crifan.com/files/pic/uploads/2021/05/56ced1eb63414402936ebbd215eccf3d.jpg)
或许可以借鉴
html5up-story/index.html
![](https://www.crifan.com/files/pic/uploads/2021/05/842442142ad04b7386ce0ba95707845c.jpg)
鼠标移动到箭头上 ,内容自动水平滚动
可以考虑借用
html5up-multiverse/index.html
![](https://www.crifan.com/files/pic/uploads/2021/05/3d01083805be441897b472151c07114e.jpg)
弹框后有左右箭头切换
html5up-strata/index.html
![](https://www.crifan.com/files/pic/uploads/2021/05/b18369e6d34d476e975c0e86225857a7.jpg)
也是类似的
html5up-lens/index.html
![](https://www.crifan.com/files/pic/uploads/2021/05/a9597f5a32eb430194887a3b6d98788d.jpg)
本身就带 很像我们需要的结构的 左右切换图片 以及下面还有文字
不过不是自动定时切换的
html5up-helios/index.html
也是类似的:
鼠标移动上去 就会持续切换:
![](https://www.crifan.com/files/pic/uploads/2021/05/e580b9a197404130b9ba61ff48d11f64.jpg)
轮播图 html5 模板
也找了一些
原生js图片轮播切换代码
-》演示:
原生js图片轮播切换代码
突然发现:
貌似不一定是:非要自动轮播,用户手动点击后能播放,即可。
算了,先做成,不带自动切换的。
带手动点击能切换的,就可以。
实在不行,再去弄自动轮播的。
去参考上面几个,找个最合适的,去借鉴。
结果去看了
html5up-lens/index.html
html5up-lens/assets/css/main.css
觉得还是:太复杂了。不方便集成过来。
html5 slide
貌似很简单的。去想办法集成进来看看
然后参考:
去拷贝代码过来:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <div class="w3-content w3-display-container"> <img class="mySlides" src="images/rainbow_training.jpg" style="width:100%"> <img class="mySlides" src="images/new-editing-lg.jpg" style="width:100%"> <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button> </div> <script> var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex-1].style.display = "block"; } </script>
css
.mySlides { display:none; } .left_image { width: 100%; // // height: 20em; // margin: auto; // display: flex; // align-items: center; }
真的就可以工作了:
![](https://www.crifan.com/files/pic/uploads/2021/05/33488c7a9bef4cbda637b80b3f409fd9.jpg)
点击后,切换过来:
![](https://www.crifan.com/files/pic/uploads/2021/05/6f3cd9ef35054cc2b765cd1b9a2ffd76.jpg)
效果不错。
剩下再去:
把css
下载下来,放到项目中
<link rel="stylesheet" href="assets/css/w3.css">
再去换左右的切换的箭头:
看看能否方便换成:
background-image: url(images/arrow.svg);
![](https://www.crifan.com/files/pic/uploads/2021/05/11077920540d429ab693a7995e5de12e.jpg)
算了,去参考:
看看另外的:
然后用:
.mySlides { display: none; } .w3-left, .w3-right, .w3-badge { cursor: pointer; } .w3-badge { height: 13px; width: 13px; padding: 0; }
html
<div class="w3-content w3-display-container"> <img class="mySlides" src="images/new-editing-lg.jpg" style="width:100%"> <img class="mySlides" src="images/rainbow_training.jpg" style="width:100%"> <!-- <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button> --> <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%"> <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div> <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> </div> </div> <script> var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-white", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " w3-white"; } </script>
效果:
![](https://www.crifan.com/files/pic/uploads/2021/05/a722e64b36bc4faa98c5f7d05c6d69d1.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/05/04a60f3069e4498797b4220698659db6.jpg)
再去看看能否加上自动切换
自己照葫芦画瓢,去加上一个
carousel(); function carousel() { plusDivs(1); setTimeout(carousel, 2000); // Change image every 2 seconds }
结果:
即可实现自动切换了。
然后再去参考
assets/css/w3.css
去修改了对应的高亮图片的圆圈提示颜色
// var highlight_color = " w3-white"; var highlight_color = " w3-brown"; function showDivs(n) { 。。。 x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += highlight_color; }
目前效果是:
![](https://www.crifan.com/files/pic/uploads/2021/05/6f839c36ee604dc1aadd9ef85f2f68e2.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/05/fb723d7f10a84726ab1f73d6153b62c3.jpg)
转载请注明:在路上 » 【已解决】HTML主页顶部把单个图片换成轮播图