html原生js实现图片轮播,原生js实现简单轮播图
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下
一、写入网页基本结构
body:
网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化
css:
初始化:
包括外边距margin、内边距padding、链接a、图片img、输入框input、列表ul、li、网页html、body一系列初始化
css设置:
根据图片数与图片宽度设置轮播图宽度
二、设置js逻辑
需要完成的功能有:
1、鼠标移入轮播图逐渐出现左右浮动块
2、点击浮动块切换图片
3、点击小圆点切换图片
4、切换图片同时切换小圆点
5、自动播放
6、鼠标移入轮播图自动播放停止、移出恢复自动播放
代码如下:
Document
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
img{
display: block;
}
input{
outline: none;
}
html,body{
height: 100%;
overflow: hidden;
}
.content{
position: absolute;
top: 0;
left: 0;
}
.banner{
width: 600px;
height: 400px;
position: relative;
margin: 50px auto;
overflow: hidden;
}
.banner .bannerList{
position: absolute;
left:-600px;
top: 0;
width: 4800px;
height: 100%;
}
.banner .bannerList li{
float: left;
width: 600px;
height: 400px;
}
.banner .bannerList li img{
height: 100%;
width: 100%;
}
.banner .left,.banner .right{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 50px;
border: solid 2px gray;
font-size:30px;
text-align: center;
line-height: 50px;
color: rgb(255, 255, 255);
opacity: 0;
transition: 1000ms;
}
.banner .left{
left: 0px;
}
.banner .right{
right: 0px;
}
.banner .point{
position: absolute;
bottom: 30px;
left:50%;
transform: translateX(-50%);
}
.banner .point li{
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: gray;
margin: 5px;
}
window.οnlοad=function(){
var bannerLeft=document.querySelector('.banner .left');
var bannerRight=document.querySelector('.banner .right');
var banner=document.querySelector('.banner')
var bannerList=document.querySelector('.banner .bannerList')
var liList=document.querySelectorAll('.banner .bannerList li')
var pointList=document.querySelectorAll('.banner .point li')
var start=-600;
timer2=setInterval(function(){ //设置定时器,自动播放
var a=30;
var index=bannerList.offsetLeft/-600+1;
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px' //无缝操作
index=2;
}
if(bannerList.offsetLeft==-3600){
index=1;
}
for(var i=0;i
pointList[i].style.backgroundColor='grey'
}
pointList[index-1].style.backgroundColor='red';
timer3=setInterval(function(){
a=a-1
bannerList.style.left=bannerList.offsetLeft-20+'px';
if(a==0){
clearInterval(timer3)
}
},
30)
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px';
}
},4000)
// 创建一个移入出现函数
banner.addEventListener('mouseover',occur)
function occur(){
bannerLeft.style.opacity=1; //移入逐渐出现
bannerRight.style.opacity=1;
clearInterval(timer2); //移入取消自动播放
}
banner.addEventListener('mouseout',function(){
bannerLeft.style.opacity=0;
bannerRight.style.opacity=0; //移出消失
timer2=setInterval(function(){ //移出恢复自动播放
var a=30;
timer3=setInterval(function(){
a=a-1
bannerList.style.left=bannerList.offsetLeft-20+'px';
if(a==0){
clearInterval(timer3)
}
},
30)
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px';
}
},4000)
})
//设置左右浮动块点击变色以及滚动
function colorChange(){
this.style.color='black';
if(this.className=='right'){ //判断是哪边被点击
var index=bannerList.offsetLeft/-600+1;
var a=30;
timer=setInterval(function(){ //点击浮动块切换图片
a=a-1;
bannerList.style.left=bannerList.offsetLeft-20+'px';
if(a!=0){
bannerRight.removeEventListener('mousedown',colorChange)
bannerLeft.removeEventListener('mousedown',colorChange)
}
if(a==0){
clearInterval(timer);
bannerRight.addEventListener('mousedown',colorChange)
bannerLeft.addEventListener('mousedown',colorChange)
}
},30)
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px'
index=2;
}
if(bannerList.offsetLeft==-3600){
index=1;
}
for(var i=0;i
pointList[i].style.backgroundColor='grey'
}
pointList[index-1].style.backgroundColor='red';
}
else{
var a=30;
var index=bannerList.offsetLeft/-600-1;
timer=setInterval(function(){
a=a-1;
bannerList.style.left=bannerList.offsetLeft+20+'px';
if(a!=0){
bannerLeft.removeEventListener('mousedown',colorChange)
bannerRight.removeEventListener('mousedown',colorChange)
}
if(a==0){
clearInterval(timer);
bannerLeft.addEventListener('mousedown',colorChange)
bannerRight.addEventListener('mousedown',colorChange)
}
},30)
if(bannerList.offsetLeft==0){
bannerList.style.left=-3600+'px'
index=5;
}
if(bannerList.offsetLeft==-600){
index=6;
}
for(var i=0;i
pointList[i].style.backgroundColor='grey'
}
pointList[index-1].style.backgroundColor='red';
}
}
function colorReturn(){
this.style.color='white'
}
bannerLeft.addEventListener('mousedown',colorChange)
bannerRight.addEventListener('mousedown',colorChange)
bannerLeft.addEventListener('mouseup',colorReturn)
bannerRight.addEventListener('mouseup',colorReturn)
for(var i=0;i
pointList[i].οnmοusedοwn=function(){
for(var i=0;i
pointList[i].style.backgroundColor='gray'
}
this.style.backgroundColor='red';
for(var b=0;b
if(pointList[b].style.backgroundColor==this.style.backgroundColor){
var a=30;
var step=-(b+1)*600-bannerList.offsetLeft;
timer1=setInterval(function(){
a=a-1;
bannerList.style.left=bannerList.offsetLeft+step/30+'px';
if(a!=0){
bannerLeft.removeEventListener('mousedown',colorChange)
bannerRight.removeEventListener('mousedown',colorChange)
}
if(a==0){
clearInterval(timer1)
bannerLeft.addEventListener('mousedown',colorChange)
bannerRight.addEventListener('mousedown',colorChange)
}
},20)
}
}
}
}
}
<
>
其中,将图片替换为其他图片可以实现不同的轮播图,值得一提的是,六张图片的轮播图需要放八张图,第八张与第二张一致,第一张与第七张一致,真正呈现出来的仅仅是第二张到第七张
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html原生js实现图片轮播,原生js实现简单轮播图相关推荐
- Node.js aitaotu图片批量下载Node.js爬虫1.00版
即使是https网页,解析的方式也不是一致的,需要多试试. 代码: //====================================================== // aitaot ...
- Node.js umei图片批量下载Node.js爬虫1.00
这个爬虫在abaike爬虫的基础上改改图片路径和下一页路径就出来了,代码如下: //====================================================== // ...
- php 获得图片大小,js获取图片大小_php 或js获取图片大小
摘要 腾兴网为您分享:php 或js获取图片大小,之了课堂,云集,宜信,学堂在线等软件知识,以及手机东方财富通,航空证券软件,日历星座,大吉大利晚上吃鸡图片,一米鲜,熊猫云,sketchup动画,空文 ...
- js百叶窗图片3D旋转切换js特效
下载地址 原生js制作的百叶窗图片3D旋转切换特效,一款非常酷炫的网站焦点图banner轮播效果. dd:
- 前端读取文件图片信息流;js读取图片不同信息流;js读取图片;前端就js读取二进制数据;前端js读取文件流使用FileReader对象的readAsDataURL方法来读取图像文件;
原文链接 FileReader来把文件读入内存,并且读取文件中的数据. readAsDataURL方法可以在浏览器主线程中异步访问文件系统,读取文件中的数据,且读取后 result 为 DataURL ...
- js html 图片贴纸,使用Sticker.js实现贴纸效果
Sticker.js 是一个很小的 JavaScript 库,它允许您在网页中创建漂亮的贴纸效果.没有依赖关系(不需要 jQuery),可以在大多数支持 CSS3 的主流浏览器工作.下面有简单的使用示 ...
- js 压缩图片及ajax上传图片
js 压缩图片及ajax上传图片 js压缩图片 ajax 上传文件 最近做的一个微信活动中需要用到图片上传功能,具体就是用户通过手机拍照上传图片来参与活动.在测试的过程中我们发现上传的图片非常大.我们 ...
- c语言组播源码_CLAA Class C简单组播业务的实现
1 概述 -适用版本 -LoRaWAN1.0.2 CLAA.03 02.19.15 Aug 16 2018 09:57:31 -说明 -本文档主要描述的是CLAA Class C简单组播业务的实现,暂 ...
- html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
- html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
最新文章
- linux如何找到桌面,我怎样才能找到我正在使用的桌面环境?
- windows下mongodb的安装与配置
- python两列相乘_如何将pandas中具有不同索引的两列相乘?
- 主题:Hibernate/Spring/Struts架构使用OpenSessionInView的问题
- 框架下cookie的使用_aspnetcore自带cookie的认证期限分析
- 【转】android内存溢出的解决方法
- 金融用户画像的数据合规法律问题
- 计算机期末考试方案,初中信息技术期末考试方案.doc
- fileupload控件的属性_FileUpload上传控件用法详解
- 为什么Word 里表格文字无法垂直居中?明明已经设置垂直居中了
- Processing 案例 | 三角函数之美
- 程序员如何写简历?程序员写出牛逼简历的5大技巧
- 【优秀课设】基于OpenCV+MediaPipe的手势识别(数字、石头剪刀布等手势识别)
- 不要成为反DDoS攻击的局外人
- Centos7安装远程桌面
- Thinkphp 5.1 PC和手机端加载不同路径下的模板~功能实现
- 进化计算(十)——MFEA算法详解Ⅰ
- 电气制图的首选?CAD还是EPLAN?
- covmatrix matlab,matlab cov函数
- mysql主要学什么_mysql学什么
热门文章
- python中import re_Python编程之Re模块下的函数介绍
- 为了进阿里需要做哪些准备(JVM篇)
- 苹果天气不显示_苹果手机闹钟还能检测手机真假!直到今天才发现,这些功能真好用...
- 微信小程序之一键连接wifi
- 计算机科学与探索类别,图像目标类别检测综述-计算机科学与探索.pdf
- 每日一书丨终于有人把Embedding讲明白了
- 小米决战智能汽车,背后有“底气”
- TCP接入的负载均衡架构
- 爬取微博图片数据存到Mysql中遇到的各种坑\mysql存储图片\爬取微博图片
- 信息安全等级保护措施之数据安全技术