Html+Css+Js轮播图实现
生活随笔
收集整理的這篇文章主要介紹了
Html+Css+Js轮播图实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
輪播圖目前所知方法有兩種方式，前者為比較簡單基礎的輪播方式。
目錄
1.以圖片更換形式實現簡單的輪播
2.?較為復雜的方式實現輪播
1.以圖片更換形式實現簡單的輪播
?
?
首先輪播結構
<style>#box {position: relative; /*相對定位*/margin: 100px auto;overflow: hidden;width: 520px;height: 280px;background-color: grey;}#box img {width: 100%;height: 100%;} </style> <body><div id="box"><img id="lunbo_img" src="images/img1.jpg"></div> </body>不使用<img>也可以，直接設定box里面的背景圖片也能達到相同的效果。
其次添加Js函數，添加定時器實現定時更換圖片，以呈現輪播的形式。
下面是javascript代碼實現
<script type="text/javascript">var index = 1;function lunbo(){index ++;if(index>5){index = 1;}var img = document.getElementById('lunbo_img');img.src = "images/img"+index+".jpg"}setInterval(lunbo,2000); </script>2.?較為復雜的方式實現輪播
首先是輪播結構，這種形式的輪播圖大多都如此
<body><div class="lunbo"><div class="content"><ul id="item"><li class="item"><a href="#" ><img src="images/img1.jpg" ></a></li><li class="item"><a href="#" ><img src="images/img2.jpg" ></a></li><li class="item"><a href="#" ><img src="images/img3.jpg" ></a></li><li class="item"><a href="#" ><img src="images/img4.jpg" ></a></li><li class="item"><a href="#" ><img src="images/img5.jpg" ></a></li></ul><div id="btn-left"><</div><div id="btn-right">></div><ul id="circle"><li class="circle"></li><li class="circle"></li><li class="circle"></li><li class="circle"></li><li class="circle"></li></ul></div></div> </body>?再設置css style，調整好整體形式
<style type="text/css">*{margin: 0; /*消除body自身默認的邊距*/padding: 0;}a{list-style: none;}li{list-style: none;}.lunbo{width: 100%;height: 300px;overflow: hidden;}.content{width: 800px;height: 300px;margin: 20px auto;position: relative;}#item{width: 100%;height: 100%;}.item{position: absolute;opacity: 0; /*透明度*/transition: all 1s; }.item.active{opacity:1;}img{width: 100%;}#btn-left{width: 30px;height: 69px;padding-left:5px;font-size: 30px;color: white;background-color:rgba(0,0,0,0.4);line-height: 69px;z-index: 999;position: absolute;left: 0;top: 50%;transform: translateY(-60%);opacity: 0; /*平時隱藏*/}.lunbo:hover #btn-left{opacity: 1; /*鼠標滑入，顯示圖標*/}#btn-right{width: 26px;height: 69px;padding-left: 5px;font-size: 30px;color: white;background-color:rgba(0,0,0,0.4);line-height: 69px;z-index: 999;position: absolute;right: 0;top: 50%;opacity: 0;transform: translateY(-60%);}.lunbo:hover #btn-right{opacity: 1;}#circle{height: 20px;display: flex;position: absolute;bottom: 35px;right: 25px;}.circle{margin: 5px;width: 10px;height: 10px;border-radius: 10px;border: 2px solid white;background: rgba(0,0,0,0.4);}.white{background-color: #FFFFFF;}</style>下面是js代碼
<script type="text/javascript">window.onload=function(){var items=document.getElementsByClassName("item");var circles=document.getElementsByClassName("circle");var leftBtn=document.getElementById("btn-left");var rightBtn=document.getElementById("btn-right");var content=document.querySelector('.content');var index=0;var timer=null;var clearclass=function(){for(let i=0;i<items.length;i++){items[i].className="item";circles[i].className="circle";circles[i].setAttribute("num",i);}}function move(){clearclass();items[index].className="item active";circles[index].className="circle white";}//點擊右邊按鈕切換下一張圖片rightBtn.onclick=function(){if(index<items.length-1){index++;}else{index=0;}move();}//點擊左邊按鈕切換上一張圖片leftBtn.onclick=function(){if(index<items.length){index--;}else{index=items.length-1;}move();}//開始定時器，點擊右邊按鈕，實現輪播timer=setInterval(function(){rightBtn.onclick();},1500)//點擊圓點時，跳轉到對應圖片for(var i=0;i<circles.length;i++){circles[i].addEventListener("click",function(){var point_index=this.getAttribute("num");index=point_index;move();})}//鼠標移入清除定時器，并開啟一個三秒的定時器content.onmouseover=function(){clearInterval(timer);timer=setInterval(function(){rightBtn.onclick();},3000)}//鼠標移出又開啟定時器content.onmouseleave=function(){clearInterval(timer);timer=setInterval(function(){rightBtn.onclick();},1500)}}?
總結
以上是生活随笔為你收集整理的Html+Css+Js轮播图实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： atomic头文件编译_atomic
- 下一篇： 最新仿淘宝详细页头部渐变效果