js动画之轮播图
一、 使用Css3动画实现 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul{
list-style: none;
} .outer{
width: 750px;
height: 366px;
margin: 100px auto;
border: solid 2px gray; overflow: hidden;
position: relative;
} .inner{
width: 500%;
height: 100%;
position: relative;
left: 0; animation: myAni 15s linear infinite alternate;
} .inner img{
float: left;
width: 20%;
} @keyframes myAni{
0%{left: 0;}
10%{left:0}
20%{left: -100%;}
30%{left: -100%;}
40%{left: -200%;}
50%{left: -200%;}
60%{left: -300%;}
70%{left: -300%;}
80%{left: -400%;}
100%{left: -400%;}
} .outer ul{
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
} .outer li{
/*width: 12px;
height: 12px;*/
margin: 0 10px;
/*background: white;*/
border: solid 8px white;
border-radius: 50%;
} .outer .scroll-ball{
border-color: yellowgreen;
position: relative;
left: -180px; animation: myBall 15s linear infinite alternate;
} @keyframes myBall{
0%{left: -180px;}
10%{left:-180px;}
20%{left: -144px;}
30%{left: -144px;}
40%{left: -108px;}
50%{left: -108px;}
60%{left: -72px;}
70%{left: -72px;}
80%{left: -36px;}
100%{left: -36px;}
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<img src="img/5af3df82N15a1910a.jpg"/>
<img src="img/5afbf194Nce807c23.jpg"/>
<img src="img/5afce833N3a41e948.jpg"/>
<img src="img/5af3df82N15a1910a.jpg"/>
<img src="img/5afce833N3a41e948.jpg"/>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="scroll-ball"></li>
</ul>
</div>
</body>
</html>
二、 使用javaScript实现 html代码： <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/slideshow.css"/>
</head>
<body>
<div id="slide-container">
<!--轮播的图片-->
<div id="slide-main">
<img src="img/111.jpg"/>
</div> <!--导航-->
<ul id="listMenu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul> <!--左右翻页-->
<div id="slide-nav">
<span><</span>
<span>></span>
</div>
</div>
</body>
<script src="js/slideshow.js" type="text/javascript" charset="utf-8"></script>
</html> css代码： *{
margin: 0;
padding: 0;
} li{
list-style: none;
} #slide-container{
width: 750px;
height: 366px;
margin: 100px auto;
border: dotted 3px orange;
position: relative;
overflow: hidden;
} #listMenu{
width: 50%;
display: flex;
justify-content: space-around; position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
} #listMenu li{
height: 30px;
width: 30px;
text-align: center;
line-height: 30px;
border-radius: 50%;
background: yellow;
cursor: pointer;
} #slide-nav{
width: 98%; position: absolute;
top: 50%;
left: 50%;
transform:translateX(-50%) translateY(-50%);
} #slide-nav span{
font-size: 60px;
color: white;
cursor: pointer;
background: #E7E7E7;
opacity: 0.4;
} #slide-nav span:last-of-type{
float: right;
} js代码： //获取元素
//获取图片
var slideMain = document.getElementById('slide-main');
var slidePic = slideMain.getElementsByTagName('img')[0]; //获取导航
var listMenu = document.getElementById('listMenu');
var lis = listMenu.getElementsByTagName("li"); //获取左右翻页
var slideNav = document.getElementById('slide-nav');
var previousNav = slideNav.getElementsByTagName('span')[0];
var nextNav = slideNav.getElementsByTagName('span')[1]; //设置轮播图片数组
var imgArr = ["img/111.jpg","img/222.jpg","img/333.jpg"]; //设置初始的索引，并赋给对应的显示图片
var currentIndex = 0;
slidePic.src = imgArr[currentIndex];
lis[currentIndex].style = "background:orange;color:white"; //设置图片轮播，每隔指定的事件切换图片和导航 用到定时器
var timer = setInterval(slideshow,2000); //设置导航变化
function slideshow(){
//每一次轮播，轮播的索引自动加1;
currentIndex++; //判断，当前索引超出最大值后，重新赋给0
if(currentIndex == lis.length){
currentIndex = 0;
} /*//将导航全部格式化
for(var j = 0; j < lis.length; j++){
lis[j].style = ""
}
//设置当前导航的索引
lis[currentIndex].style = "background:orange;color:white";
//根据当前索引将数组中对应的图片显示到页面上
slidePic.src = imgArr[currentIndex]*/ slidepic(currentIndex); } function slidepic(i){
//将导航全部格式化
for(var j = 0; j < lis.length; j++){
lis[j].style = ""
}
//设置当前导航的索引
lis[i].style = "background:orange;color:white";
//根据当前索引将数组中对应的图片显示到页面上
slidePic.src = imgArr[i]
} for(var i = 0; i < lis.length; i++){
lis[i].index = i;
lis[i].onmouseover = function(){//闭包函数 再循环中无法正确获取对应的索引
//将导航全部格式化
/*for(var j = 0; j < lis.length; j++){
lis[j].style = ""
}
//设置当前导航的索引
this.style = "background:orange;color:white";
slidePic.src = imgArr[this.index];*/ currentIndex = this.index;
slidepic(currentIndex);
clearInterval(timer);
} lis[i].onmouseout = function(){
timer = setInterval(slideshow,1000);
}
} //设置鼠标滑过左右两边按钮时透明度变化
previousNav.onmouseover = nextNav.onmouseover = function(){
previousNav.style = "opacity:0.8";
nextNav.style = "opacity:0.8";
clearInterval(timer);
} previousNav.onmouseout = nextNav.onmouseout = function(){
previousNav.style = "";
nextNav.style = ""
timer = setInterval(slideshow,1000);
} //设置左边按钮的点击事件
previousNav.onclick = function(){
currentIndex--;
if(currentIndex == -1){
currentIndex = lis.length - 1;
}
slidepic(currentIndex)
} //设置右边按钮的点击事件
nextNav.onclick = function(){
currentIndex++;
if(currentIndex == lis.length){
currentIndex = 0;
}
slidepic(currentIndex)
}
获取更多前端知识，请关注下方二维码 ↓↓↓↓↓↓
js动画之轮播图的更多相关文章
- 京东首页原生----js制作|css动画|js动画|计时器--轮播图(好久没更新，这两天闲的蛋疼做个京东页面分辨率1366*768，919京东，适应没调！)要文件加关注找我要哦！
- js原生实现轮播图效果（面向对象编程）
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生 js 左右切换轮播图
使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
- JS学习笔记--轮播图效果
希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...
随机推荐
- Kubernetes实战指南（三十三）：都0202了，你还在手写k8s的yaml文件？
目录 1. k8s的yaml文件到底有多复杂 2. 基于图形化的方式自动生成yaml 2.1 k8s图形化管理工具Ratel安装 2.2 使用Ratel创建生成yaml文件 2.2.1 基本配置 2. ...
- 多线程的指令重排问题：as-if-serial语义，happens-before语义；volatile关键字，volatile和synchronized的区别
一.指令重排问题 你写的代码有可能,根本没有按照你期望的顺序执行,因为编译器和 CPU 会尝试指令重排来让代码运行更高效,这就是指令重排. 1.1 虚拟机层面 我们都知道CPU执行指令的时候,访问内存 ...
- Jmeter 常用函数（1）- 详解 __Random
如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用 产生一个随机数 语法格式 ${__Ra ...
- kolla搭建ironic裸机服务
参考链接: https://www.lijiawang.org/posts/kolla-ironic.html 准备ageng镜像: [root@control01 ~]# pip install d ...
- QPS过万，redis大量连接超时怎么解决？
7月2号10点后,刚好某个负责的服务发生大量的redis连接超时的异常(redis.clients.jedis.exceptions.JedisConnectionException),由于本身的数据 ...
- 「Netty实战 02」手把手教你实现自己的第一个 Netty 应用!新手也能搞懂！
大家好,我是 「后端技术进阶」 作者,一个热爱技术的少年. 很多小伙伴搞不清楚为啥要学习 Netty ,今天这篇文章开始之前,简单说一下自己的看法: @ 目录 服务端 创建服务端 自定义服务端 Cha ...
- linux字符终端（控制台）的字体更改
查看已安装的终端字体 ls /usr/share/consolefonts/ 设置终端字体 sudo dpkg-reconfigure console-setup 或者 sudo vim /etc/d ...
- 挂载磁盘不成功显示mount: /mnt: wrong fs type, bad option, bad superblock..............
[23:25:32 root@8 ~]#mount /dev/sdb2 /mntmount: /mnt: wrong fs type, bad option, bad superblock on /d ...
- idea vue文件设置tab为四个空格
1.找到vue项目中有个叫.editorconfig的文件,打开可以发现有以下配置项: 2.ctrl+alt+i看看效果(单文件) 3.IDEA中对整个项目进行代码格式化 在项目的左侧树结构中,右 ...
- 分布式事务和分布式hash
分布式事务是什么? 分布式事务就是保证各个微服务之间数据一致,本质上就是保证不同数据库的数据一致性.一致性状态包含 强一致性,任何时刻,所有节点中数据都是一样的 弱一致性,数据更新后,只能访问到部分节 ...