JavaScript banner轮播 左右切换 圆点点击切换
1、效果如下图:
2、源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript banner轮播 左右切换 圆点点击切换</title> <style type="text/css">
div,ul,li,a,span,img{margin:0;padding:0;}
#banner {
overflow:hidden;
width:100%;
height:400px;
position:relative;
float:left;
padding-bottom: 10px;
}
#tab>img:not(:first-child){
display:none;
}
.lunbo_btn {
height: 15px;
width: 100%;
margin: 0px auto;
margin-top: -40px;
position: absolute;
z-index: 3;
text-align: center;
}
.lunbo_btn span {
width:14px;
height:14px;
display:inline-block;
background-color:#b4b5b7;
border-radius:50%;
margin:0px 2px;
cursor:pointer;
}
.lunbo_btn span.hover {
background-color:#ffb23c;
}
.arrow {
display: none;
width: 30px;
height: 60px;
background-color: rgba(0,0,0,0.4);
position: absolute;
top: 50%;
margin-top: -30px;
z-index:999;
}
.arrow span {
display: block;
width: 10px;
height: 10px;
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
}
.slider_left {
margin: 25px 0 0 10px;
transform: rotate(45deg);
}
.prve {
left: 0;
}
.next {
right: 0;
}
.slider_right {
margin: 25px 0 0 5px;
transform: rotate(-135deg);
}
.arrow:hover{background:#444;}
#banner:hover .arrow{display:block;}
</style> </head>
<body> <div id="banner">
<!-- 轮播图片 -->
<div id="tab">
<img class="tabImg" src="data:images/banner1.jpg" height="400"/>
<img class="tabImg" src="data:images/banner2.jpg" height="400"/>
<img class="tabImg" src="data:images/banner3.jpg" height="400"/>
<img class="tabImg" src="data:images/banner4.jpg" height="400"/>
</div>
<!-- 指示符 -->
<div class="lunbo_btn">
<span num="0" class="tabBtn hover"></span>
<span num="1" class="tabBtn"></span>
<span num="2" class="tabBtn"></span>
<span num="3" class="tabBtn"></span>
</div>
<!-- 左右切换按钮 -->
<div class="arrow prve">
<span class="slider_left"></span>
</div>
<div class="arrow next">
<span class="slider_right"></span>
</div>
</div> <script type="text/javascript"> //轮播图
var curIndex=0;//初始化
var img_number = document.getElementsByClassName('tabImg').length;
var _timer = setInterval(runFn,2000);//2秒
function runFn(){ //运行定时器
curIndex = ++curIndex == img_number ? 0 : curIndex;//算法 4为banner图片数量
slideTo(curIndex);
} //圆点点击切换轮播图
window.onload = function () { //为按钮初始化onclick事件
var tbs = document.getElementsByClassName("tabBtn");
for(var i=0;i<tbs.length;i++){
tbs[i].onclick = function () {
clearInterval(_timer);//细节处理,关闭定时,防止点切图和定时器函数冲突
slideTo(this.attributes['num'].value);
curIndex = this.attributes['num'].value
_timer = setInterval(runFn,2000);//点击事件处理完成,继续开启定时轮播
}
}
} var prve = document.getElementsByClassName("prve");
prve[0].onclick = function () {//上一张
clearInterval(_timer);//细节处理,关闭定时,防止点切图和定时器函数冲突
curIndex--;
if(curIndex == -1){
curIndex = img_number-1;
}
slideTo(curIndex);
_timer = setInterval(runFn,2000);//点击事件处理完成,继续开启定时轮播
} var next = document.getElementsByClassName("next");
next[0].onclick = function () {//下一张
clearInterval(_timer);//细节处理,关闭定时,防止点切图和定时器函数冲突
curIndex++;
if(curIndex == img_number){
curIndex =0;
}
slideTo(curIndex);
_timer = setInterval(runFn,2000);//点击事件处理完成,继续开启定时轮播
} //切换banner图片 和 按钮样式
function slideTo(index){
console.log(index)
var index = parseInt(index);//转int类型
var images = document.getElementsByClassName('tabImg');
for(var i=0;i<images.length;i++){//遍历每个图片
if( i == index ){
images[i].style.display = 'inline';//显示
}else{
images[i].style.display = 'none';//隐藏
}
}
var tabBtn = document.getElementsByClassName('tabBtn');
for(var j=0;j<tabBtn.length;j++){//遍历每个按钮
if( j == index ){
tabBtn[j].classList.add("hover"); //添加轮播按钮hover样式
curIndex=j;
}else{
tabBtn[j].classList.remove("hover");//去除轮播按钮hover样式
}
} } </script>
</body>
</html>
完毕!
good job! good luck!
JavaScript banner轮播 左右切换 圆点点击切换的更多相关文章
- 用JavaScript制作banner轮播图
JavaScript_banner轮播图 让我们一起来学习一下用js怎么实现banner轮播图呢? 直接看代码: <!DOCTYPE html> <html> <head ...
- 原生无缝Banner轮播图
话不多说,先展示效果图.由于录制工具,稍显卡顿,实际是流畅的.可以看到实现了无缝轮播,鼠标悬停,点击左右上下按钮切换Banner的功能,如图1所示. 图1 原生无缝banner效果展示 以我这个轮播图 ...
- HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...
- JavaScript焦点轮播图
在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...
- [js开源组件开发]js轮播图片支持手机滑动切换
js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...
- 基于Jquery的banner轮播插件,简单粗暴
新手练习封装插件,觉着在前端这一块的轮播比较多,各种旋转木马一类的3D旋转,技术不够,所以封装了一个简单的banner轮播插件,功能也比较简单,就是左右向的轮播. 先挂地址https://github ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 第一百五十五节,封装库--JavaScript,轮播器
封装库--JavaScript,轮播器 html <div id="banner"> <img src="img/banner1.jpg" a ...
- 安卓开发笔记(三十二):banner轮播图的实现
一.activity.xml 我这里主要爬取的爱奇艺首页的图片进行轮播,应用了两个github上的开源库,一个banner的库,一个加载网络图片的库,用开源库能够极大地节省我们编写代码的时间. < ...
随机推荐
- 2020年深度学习DeepLearning技术实战班
深度学习DeepLearning核心技术实战2020年01月03日-06日 北京一.深度学习基础和基本思想二.深度学习基本框架结构 1,Tensorflow2,Caffe3,PyTorch4,MXNe ...
- 数据挖掘算法(三)--logistic回归
数据挖掘算法学习笔记汇总 数据挖掘算法(一)–K近邻算法 (KNN) 数据挖掘算法(二)–决策树 数据挖掘算法(三)–logistic回归 在介绍logistic回归之前先复习几个基础知识点,有助于后 ...
- 谈架构设计中DDD思想的运用
首先,描述一下我的业务场景及项目分层结构,非标准DDD(其实我不觉得有标准),只是思考的时候有带入DDD思想. 业务场景:这是一个ERP系统对中台提供的接口项目,仓储操作大多都是存储过程去完成的. 项 ...
- jQuery实现类似于购物车操作
先看页面的代码,后面会详细写每一个操作的实现. <html> <head> <title>jQuery操作表格</title> <meta cha ...
- 【新】Docker实战总结
>>> 目录 <<< Docker简介 Docker优势 Docker基本概念 Docker安装使用 Docker常用命令 Docker镜像构建 Docker本地仓 ...
- idea实现简单热部署
首先我们打开设置tomcat的页面
- JS内置对象-Array之常用API
- Linux-部署-Django
Linux-部署-Django-项目过程与问题总结 优才网 2017-04-12 18:00 本篇主要用于记录部署 Django 项目所有踩过的坑. 最近学习 Django 框架开发,将项目部署到 ...
- Python3 基本类型在64位上的占用内存情况
基本类型占用的内存 类型 # -*- coding: utf-8 -*- # @Time : 2019-12-19 11:16 # @Author : binger import sys a = No ...
- CQRS+ES项目解析-Diary.CQRS
在<当我们在讨论CQRS时,我们在讨论些神马>中,我们讨论了当使用CQRS的过程中,需要关心的一些问题.其中与CQRS关联最为紧密的模式莫过于Event Sourcing了,CQRS与ES ...