Js實(shí)現(xiàn)輪播圖01
實(shí)現(xiàn)思路
這可能是輪播圖最簡(jiǎn)單點(diǎn)的實(shí)現(xiàn)之一，通過(guò)更改圖片的src來(lái)實(shí)現(xiàn)該效果，首先需要將圖片命名格式統(tǒng)一比如pic01.jpg，pic02.jpg…,再通過(guò)js使用定時(shí)器去改變img標(biāo)簽里面的src圖片鏈接的名字來(lái)實(shí)現(xiàn)切換效果。代碼如下：
實(shí)現(xiàn)效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖實(shí)現(xiàn)01</title>
<style type="text/css">
.lunbo{
width: 900px;
height: 400px;
margin:100px auto;
}
.lunbo img{
width: 100%;
height:100%;
}
</style>
</head>
<body>
<!--輪播圖模塊 -->
<div class="lunbo">
<img id="lunbo_img" src="./pic/img3.jpeg" >
</div>
<!-- Js代碼 -->
<script>
var index = 1;
function lunbo(){
index ++ ;
//判斷index是否大于3
if(index > 3){
index = 1;
}
//獲取img對(duì)象
var img = document.getElementById("lunbo_img");
img.src = "./pic/img"+index+".jpeg";
}
//2.定義定時(shí)器
setInterval(lunbo,2000);
/*切記定時(shí)器里調(diào)用lunbo方法不能加(),setInterval(lunbo,2000);如果加()會(huì)執(zhí)行l(wèi)unbo（）方法，而導(dǎo)致定時(shí)器沒用。
</script>
</body>
</html>
Js實(shí)現(xiàn)輪播圖02
實(shí)現(xiàn)思路
這可能是輪播圖最簡(jiǎn)單點(diǎn)的實(shí)現(xiàn)之一，通過(guò)改變background的圖片鏈接來(lái)實(shí)現(xiàn)該效果，首先需要將圖片命名格式統(tǒng)一比如pic01.jpg，pic02.jpg…,再通過(guò)js使用定時(shí)器去改變background屬性里面的url（）圖片鏈接的名字來(lái)實(shí)現(xiàn)切換效果。代碼如下：
實(shí)現(xiàn)效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖實(shí)現(xiàn)02</title>
<style>
body{
margin: 0;
padding: 0;
}
.lunbo{
width:100%;
height:720px;
background-image: url(pic/img1.jpeg);/*背景圖片*/
background-size:100% 100%;
}
</style>
</head>
<body>
<div class="lunbo">
</div>
<script type="text/javascript">
var index = 1;
function lunbo(){
index ++ ;
//判斷number是否大于3
if(index > 3){
index = 1;
}
//獲取img對(duì)象
var img = document.getElementsByClassName("lunbo")[0];
img.style.background = "url(pic/img"+index+".jpeg)";
img.style.backgroundSize="100% 100%";
}
//2.定義定時(shí)器
setInterval(lunbo,3000);
</script>
</body>
</html>
Js實(shí)現(xiàn)輪播圖03
本輪播圖的實(shí)現(xiàn)，首先通過(guò)CSS代碼將全部存放圖片的li標(biāo)簽通過(guò)opacity屬性設(shè)置為0來(lái)隱藏不顯示， 通過(guò)js代碼使用定時(shí)器不斷調(diào)用類active突出顯示li標(biāo)簽，同時(shí)隱藏兄弟li標(biāo)簽，再通過(guò)index++來(lái)實(shí)現(xiàn)切換循環(huán)顯示的效果，當(dāng)點(diǎn)擊兩邊的按鈕時(shí)，調(diào)用index++所在的方法實(shí)現(xiàn)切換的效果，沒有復(fù)雜的算法，一點(diǎn)點(diǎn)基礎(chǔ)一看代碼就會(huì)學(xué)會(huì)，請(qǐng)大家參考。
實(shí)現(xiàn)效果
HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,
minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--引入CSS代碼-->
<link rel="stylesheet" type="text/css" href="./css/index.css"/>
<!--引入Js代碼-->
<script src="./js/index.js"></script>
<title>Js實(shí)現(xiàn)輪播圖</title>
</head>
<body>
<div class="lunbo">
<div class="content">
<ul id="item">
<li class="item">
<a href="#"><img src="img/pic1.jpg" ></a>
</li>
<li class="item">
<a href="#"><img src="img/pic2.jpg" ></a>
</li>
<li class="item">
<a href="#"><img src="img/pic3.jpg" ></a>
</li>
<li class="item">
<a href="#"><img src="img/pic4.jpg" ></a>
</li>
<li class="item">
<a href="#"><img src="img/pic5.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>
</html>
CSS代碼
*{
margin: 0;
padding: 0;
}
a{
list-style: none;
}
li{
list-style: none;
}
.lunbo{
width: 100%;
}
.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;
font-size: 30px;
color: white;
background-color:rgba(0,0,0,0.4);
line-height: 69px;
padding-left:5px;
z-index: 10;/*始終顯示在圖片的上層*/
position: absolute;
left: 0;
top: 50%;
transform: translateY(-60%);/*使按鈕向上偏移居中對(duì)齊*/
cursor: pointer;
opacity: 0;/*平時(shí)隱藏*/
}
.lunbo:hover #btn-left{
/*鼠標(biāo)滑入，顯示圖標(biāo)*/
opacity: 1;
}
#btn-right{
width: 26px;
height: 69px;
font-size: 30px;
color: white;
background-color:rgba(0,0,0,0.4);
line-height: 69px;
padding-left: 5px;
z-index: 10;
position: absolute;
right: 0;
top: 50%;
cursor: pointer;
opacity: 0;
transform: translateY(-60%);
}
.lunbo:hover #btn-right{
opacity: 1;
}
#circle{
height: 20px;
display: flex;
position: absolute;
bottom: 35px;
right: 25px;
}
.circle{
width: 10px;
height: 10px;
border-radius: 10px;
border: 2px solid white;
background: rgba(0,0,0,0.4);
cursor: pointer;
margin: 5px;
}
.white{
background-color: #FFFFFF;
}
JS代碼文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-774758.html
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;
//清除class
var clearclass=function(){
for(let i=0;i<items.length;i++){
items[i].className="item";
circles[i].className="circle";
circles[i].setAttribute("num",i);
}
}
/*只顯示一個(gè)class*/
function move(){
clearclass();
items[index].className="item active";
circles[index].className="circle white";
}
//點(diǎn)擊右邊按鈕切換下一張圖片
rightBtn.onclick=function(){
if(index<items.length-1){
index++;
}
else{
index=0;
}
move();
}
//點(diǎn)擊左邊按鈕切換上一張圖片
leftBtn.onclick=function(){
if(index<items.length){
index--;
}
else{
index=items.length-1;
}
move();
}
//開始定時(shí)器，點(diǎn)擊右邊按鈕，實(shí)現(xiàn)輪播
timer=setInterval(function(){
rightBtn.onclick();
},1500)
//點(diǎn)擊圓點(diǎn)時(shí)，跳轉(zhuǎn)到對(duì)應(yīng)圖片
for(var i=0;i<circles.length;i++){
circles[i].addEventListener("click",function(){
var point_index=this.getAttribute("num");
index=point_index;
move();
})
}
//鼠標(biāo)移入清除定時(shí)器，并開啟一個(gè)三秒的定時(shí)器，使慢慢轉(zhuǎn)動(dòng)
content.onmouseover=function(){
clearInterval(timer);
timer=setInterval(function(){
rightBtn.onclick();
},3000)
}
//鼠標(biāo)移出又開啟定時(shí)器
content.onmouseleave=function(){
clearInterval(timer);
timer=setInterval(function(){
rightBtn.onclick();
},1500)
}
}
代碼可能寫的不是很好，存在很多不足，歡迎大家指點(diǎn)批評(píng)，我會(huì)努力去改正，有疑問(wèn)歡迎留言，我會(huì)盡力去解答，謝謝大家花寶貴的時(shí)間來(lái)閱讀這篇文章。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-774758.html
到了這里，關(guān)于JS實(shí)現(xiàn)輪播圖的三種簡(jiǎn)單方法。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
