溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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"> <link rel="stylesheet" href="carousel.css" rel="external nofollow" > <title>輪播圖效果</title> </head> <body> <section id="main"> <div id="picture"></div> <!-- 添加圖中按鈕 圖片輪播在js中大致成型后再寫最好--> <div id="dot"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <!-- 添加切換按鈕 --> <div id="an"> <div class="left"><</div> <div class="right">></div> </div> </section> <script src="jquery.js"></script> <script src="carousel.js"></script> </body>
css頁面 carousel.css
#main{
width: 655px;
height: 361px;
position: relative;
}
#picture{
width:100%;
height: 100%;
}
#picture img{
width:100%;
height: 100%;
display: none;
}
#picture img:nth-child(1){
display: inline-block;
}
/* 設置圓點的樣式 */
#dot span{
display: inline-block;
width:25px;
height: 25px;
border-radius: 50%;
background-color: gray;
margin-left: 10px;
opacity: 0.6
}
#dot{
position: absolute;
right: 40px;
bottom: 30px;
}
/* 設置頁面剛加載的圓點初始狀態 1 第一個圓點放大1.2倍 2、顏色變成藍色
*/
#dot :nth-of-type(1){
transform: scale(1.2);
background-color: blue;
}
.left ,.right{
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 30px;
color: white;
position: absolute;
bottom: calc((100% - 40px)/2);
text-align: center;
}
.left{
left: 15px;
}
.right{
right: 15px;
}
.left:hover ,.right:hover{
background-color: white;
color:red;
}
js頁面 carousel.js
for(var i=1; i<6;i++){
$('#picture').append("<img src='./../images/"+i+".jpg' >");
}
//給圖片轉化設置定時函數
var index=0;
var timer;
function changeImageDot(){
$('#picture img:nth-child('+(index+1)+')').css({
display:'block',
}).siblings().css({
display:'none',
});
//設置隨圖片切換，對應的圓點樣式發生變化
// index+1 是因為索引是從0開始而 nth-child(i) 中的i是從1 開始的
$('#dot span:nth-child('+(index+1)+')').css({
transform: 'scale(1.2)',
'background-color': 'blue',
}).siblings().css({
transform: 'scale(1)',
'background-color':'gray',
});
}
function produceTime(){
timer=setInterval(function(){
index++;
if(index==5)
index=0;
changeImageDot();
},2000);
}
produceTime();
//鼠標懸浮在圓點上 ， 圓點和圖片的變化
$('#dot span').mouseenter(function(){
index=$(this).index();
changeImageDot();
clearInterval(timer);
produceTime();
});
//缺點：點擊切換按鈕后，圖片切換后 ，會立即切換到下一個圖片，需要設置 清除計時器后再新建一個計時器
$('.left').click(function(){
index--;
if(index==-1)
index=4;
changeImageDot();
clearInterval(timer);
produceTime();
});
$('.right').click(function(){
index++;
if(index==5)
index=0;
changeImageDot();
clearInterval(timer);
produceTime();
以上這篇使用html+js+css 實現頁面輪播圖效果(實例講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
