html 页面

轮播图效果

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("");

}

//给图片转化设置定时函数

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 实现页面轮播图效果(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持萬仟网。