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

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("%22+i+%22.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 实现页面轮播图效果(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值