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

2023-09-24 08:44:06 151

#main{ width:655px; height:361px; position:relative; } #picture{ width:100%; height:100%; } #pictureimg{ width:100%; height:100%; display:none; } #pictureimg:nth-child(1){ display:inline-block; } /*设置圆点的样式*/ #dotspan{ 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; }

for(vari=1;i<6;i++){ $('#picture').append(""); } //给图片转化设置定时函数 varindex=0; vartimer; functionchangeImageDot(){ $('#pictureimg:nth-child('+(index+1)+')').css({ display:'block', }).siblings().css({ display:'none', }); //设置随图片切换，对应的圆点样式发生变化 //index+1是因为索引是从0开始而nth-child(i)中的i是从1开始的 $('#dotspan:nth-child('+(index+1)+')').css({ transform:'scale(1.2)', 'background-color':'blue', }).siblings().css({ transform:'scale(1)', 'background-color':'gray', }); } functionproduceTime(){ timer=setInterval(function(){ index++; if(index==5) index=0; changeImageDot(); },2000); } produceTime(); //鼠标悬浮在圆点上，圆点和图片的变化 $('#dotspan').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 实现页面轮播图效果(实例讲解)

热门推荐

随机推荐