html5轮播图代码效果图,JavaScript实现轮播图效果代码实例

这篇文章主要介绍了JavaScript实现轮播图效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

HTML部分:

轮播图
  • 轮播图1
  • 轮播图2
  • 轮播图3
  • 轮播图4
  • 轮播图5
  1. 第1张
  2. 第2张
  3. 第3张
  4. 第4张
  5. 第5张

CSS部分

*{

margin: 0;

padding: 0;

list-style: none;

}

.container{

width: 600px;

height: 400px;

border: 4px double #FF6633;

margin: 0 auto;

}

/* 轮播图 */

.lbimg li{

width: 100%;

height: 350px;

text-align: center;

line-height: 350px;

display: none;

font-size: 25px;

color: #FF6633;

}

.lbimg .on{

display: block;

}

.btn{

width: 100%;

height: 50px;

background-color: #3CBDFF;

display: flex;

}

.btn li{

flex: 1;

color: #fff;

font-weight: bold;

line-height: 50px;

text-align: center;

font-family: "楷体";

cursor: pointer;

}

.btn .active{

background-color: rgba(0,0,0,0.2);

transition: all ease-in-out 0.25s;

}

JavaScript部分

window.οnlοad=function(){

var lbimg=document.querySelector(".lbimg");

var lbimgs=lbimg.querySelectorAll("li");

var btn=document.querySelector(".btn");

var btns=btn.querySelectorAll("li");

for (var i = 0; i < btns.length; i++) {

btns[i].index=i;

btns[i].οnclick=function(){

clearInterval(timer);

for (var j = 0; j < lbimgs.length; j++) {

lbimgs[j].className="";

}

// 按钮颜色跟着变化

for(var k=0;k

btns[k].className="";

}

// 轮播同步,点击后图片的位置从点击的地方开始轮播

index=this.index;

btns[this.index].className="active";

lbimgs[this.index].className="on";

timer=setInterval(autoPlay,1000);

}

}

var index=0;

// 自动轮播

index++;

var timer=setInterval(autoPlay,1000);

function autoPlay(){

for (var i = 0; i < lbimgs.length; i++) {

lbimgs[i].className="";

}

for (var j = 0; j < btns.length; j++) {

btns[j].className="";

}

if(index==lbimgs.length-1){

index=0;

}else{

index++;

}

btns[index].className="active";

lbimgs[index].className="on";

}

// 鼠标移动时清除定时器

lbimg.οnmοuseοver=function(){

clearInterval(timer);

}

lbimg.οnmοuseοut=function(){

timer=setInterval(autoPlay,1000);

}

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值