JavaScript实现轮播图效果代码实例
这篇文章主要介绍了JavaScript实现轮播图效果代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
HTML部分：
<!-- HTML部分 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="css/demo06.css" rel="external nofollow" />
<script src="js/demo06.js"></script>
</head>
<body>
<div class="container">
<!-- 轮播图区域 -->
<ul class="lbimg">
<li class="on" style="background-color: #898989;">轮播图1</li>
<li style="background-color: #CD282B;">轮播图2</li>
<li style="background-color: pink;">轮播图3</li>
<li style="background-color: peachpuff;">轮播图4</li>
<li style="background-color: palegoldenrod;">轮播图5</li>
</ul>
<ol class="btn">
<li class="active">第1张</li>
<li>第2张</li>
<li>第3张</li>
<li>第4张</li>
<li>第5张</li>
</ol>
</div>
</body>
</html>
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.onload=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].onclick=function(){
clearInterval(timer);
for (var j = 0; j < lbimgs.length; j++) {
lbimgs[j].className="";
}
// 按钮颜色跟着变化
for(var k=0;k<btns.length;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.onmouseover=function(){
clearInterval(timer);
}
lbimg.onmouseout=function(){
timer=setInterval(autoPlay,1000);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS实现图片轮播效果实例详解【可自动和手动】
本文实例讲述了JS实现图片轮播效果.分享给大家供大家参考,具体如下: 本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换 以下为实现代码: 首先是html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播效果</title&g
-
原生js实现移动端Touch轮播图的方法步骤
Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. /* 清除标签默认边距 */ body,ul,li,ol,img { margin: 0; padding: 0; } /* 清除 ul 等标签前面的"小圆点"
-
javascript实现图片轮播代码
javascript图片轮播代码,供大家参考,具体内容如下 因为自己是新手自学不久,所以代码有很多不规范的地方,请原谅. html部分代码: <div id="head"> <button id="prev" onmousedown="p()" onmouseout="cal()"><</button> <img height="500px" width=&q
-
js实现图片3D轮播效果
3D的图片轮播效果很炫,写到这里只是为了不丢代码,不为别的. 效果预览: html代码: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js实现3D图片逐张轮播幻灯片</title> </head> <body> <style> ul#bcty365_nav{pa
-
vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）
1.效果图如下 2.vue代码如下 <el-carousel type="card" arrow="always" :loop="false" :initial-index="1" indicator-position="none" :autoplay="false"> <el-carousel-item v-for="(items, index) in it
-
原生JS实现手动轮播图效果实例代码
手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一种轮播方式,既能左右翻页,还能通过悬浮按钮,快速预览图片,所以今天就给大家写一个原生js手动轮播图. 一,利用JavaScript制作手动轮播图,首先排版. 引入默认样式表(可以手写): <link rel="stylesheet" href="css/Default st
-
原生JS实现的自动轮播图功能详解
本文实例讲述了原生JS实现的自动轮播图功能.分享给大家供大家参考,具体如下: 轮播图的用处 轮播图是现在网站网页上最常见的效果之一,很多网站上都会用到,淘宝京东等等.有些自动选项卡也是需要用到的,而且它的可重复性高.在这里分享一下,用js原生代码,实现轮播图的常见效果! 轮播图的原理 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过定时器实现自动播放. Html布局 首先父容器banner存放所有内容,子容器img-list存放图片.子容器list存放按钮小圆点.圆点我使
-
JavaScript实现轮播图效果代码实例
这篇文章主要介绍了JavaScript实现轮播图效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 HTML部分: <!-- HTML部分 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <link rel="styleshe
-
基于JavaScript实现轮播图效果
本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 学习笔记(学校的课设),实现了左右切换,按指示点切换.按小图标切换和自动切换,但是还有某些功能没完善,如:切换到某张图片后,左右并没有切换到前后相应的图片. 先看实现效果: 代码仅供参考: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
-
用JavaScript实现轮播图效果
本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ul { list-style: non
-
原生JavaScript实现轮播图效果
本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 一.功能: 1.每隔2.5s自动切换下一张轮播图: 2.底部按钮切换对应轮播图: 3.鼠标移入暂停自动切换,移出开始: 4.鼠标移入,左右切换按钮出现,并可左右切换轮播图. 二.效果(GIF): 三.代码: 结构层(HTML) <div class="box"> <img src="./image/banner1.jpg" /> <div cla
-
使用JavaScript实现轮播图效果
本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 纯js,不使用轮播图控件怎么做轮播图呢,往下看吧 效果图: 1.可点击小圆点切换图片 2.可点击左右按钮切换图片 3.可自动播放 先上CSS和HTML代码: <body> <div class="main"> <div class="focus fl"> <a href="ja
-
简单实现轮播图效果的实例
一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二.实现代码: html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"
-
JavaScript实现轮播图效果
要求: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮 点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理 图片播放的同时,下面小圆圈模块跟随一起变化 点击小圆圈,可以播放相应图片 鼠标不经过轮播图,轮播图也会自动播放图片 鼠标经过,轮播图模块,自动播放停止 代码实现: autoPlay.html(复制并保存为html文件,打开即可见效果): <!DOCTYPE html> <html lang="en"> <head> <meta
-
Flutter 封装一个 Banner 轮播图效果的实例代码
实际业务开发中,首页一般都会存在一个轮播图. 在 Flutter 中,如何开发一个轮播? 了解需求 首先,我们在开发一个功能的时候要了解这个功能的需求,那一个轮播需要有什么功能? 1. 可以自定义高度和一些属性 2. 展示图片 3. 自动翻页播放 4. 点击事件 5. 指示器 6. 人为拖动的时候关闭自动播放 其中「人为拖动的时候关闭自动播放」是比较难的,我们后续会说,那先一个一个功能来实现. 自定义高度和一些属性 这里主要是做一些前期的工作,如果我们的 Banner 要开源让别人来使用,那我们
-
Vue.js轮播图走马灯代码实例（全）
话不多说先上效果图,本文引荐链接https://www.jb51.net/article/129112.htm 这个是html, <template> <div> <div class="back_add"> <div class="threeImg"> <div class="Containt"> <div class="iconleft" @click=&q
-
JavaScript实现轮播图案例
本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 运用定时器所写成的一个简单的轮播图,直接看代码,如下: 1.css代码 <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-size: 14px; font-family: Arial, Helvetica, sans-serif; } .slider-box{ width: 1226px; height: 460