使用html+js+css 实现页面轮播图效果(实例讲解)

前端之家收集整理的这篇文章主要介绍了使用html+js+css 实现页面轮播图效果(实例讲解)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

html 页面

@H_502_3@
<Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> 轮播图<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>

<div id="an">
<div class="left"><


<div class="right">>

css页面 carousel.css

@H_502_3@
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

@H_502_3@
"); } //给图片转化设置定时函数 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 实现页面轮播图效果(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。@H_502_3@

猜你在找的JavaScript相关文章