重慶分公司
重慶分公司
<
>
html 頁(yè)面
創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的改則網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
輪播圖效果
css頁(yè)面 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;
}
/* 設(shè)置圓點(diǎn)的樣式 */
#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;
}
/* 設(shè)置頁(yè)面剛加載的圓點(diǎn)初始狀態(tài) 1 第一個(gè)圓點(diǎn)放大1.2倍 2、顏色變成藍(lán)色
*/
#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頁(yè)面 carousel.js
for(var i=1; i<6;i++){
$('#picture').append("![](./../images/"+i+".jpg)
");
}
//給圖片轉(zhuǎn)化設(shè)置定時(shí)函數(shù)
var index=0;
var timer;
function changeImageDot(){
$('#picture img:nth-child('+(index+1)+')').css({
display:'block',
}).siblings().css({
display:'none',
});
//設(shè)置隨圖片切換，對(duì)應(yīng)的圓點(diǎn)樣式發(fā)生變化
// index+1 是因?yàn)樗饕菑?開(kāi)始而 nth-child(i) 中的i是從1 開(kāi)始的
$('#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();
//鼠標(biāo)懸浮在圓點(diǎn)上 ， 圓點(diǎn)和圖片的變化
$('#dot span').mouseenter(function(){
index=$(this).index();
changeImageDot();
clearInterval(timer);
produceTime();
});
//缺點(diǎn)：點(diǎn)擊切換按鈕后，圖片切換后 ，會(huì)立即切換到下一個(gè)圖片，需要設(shè)置 清除計(jì)時(shí)器后再新建一個(gè)計(jì)時(shí)器
$('.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 實(shí)現(xiàn)頁(yè)面輪播圖效果(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。
