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代 ...
随机推荐
- Java并发---并发理论
一.如何理解线程安全 在多线程中稍微不注意就会出现线程安全问题,那么什么是线程安全问题? 我的认识是.在多线程下代码执行的结果和预期的正确的结果不一致,该代码就是线程不安全的,否则就是线程安全的 在深 ...
- CSS3动画旋转——（图片360°旋转）
今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./y ...
- HM16.0 TAppEncoder
参考: https://www.cnblogs.com/tiansha/p/6458573.html https://blog.csdn.net/liangjiubujiu/article/deta ...
- 完美解决方案-雪花算法ID到前端之后精度丢失问题
最近公司的一个项目组要把以前的单体应用进行为服务拆分,表的ID主键使用Mybatis plus默认 的雪花算法来生成. 快下班的时候,小伙伴跑过来找我,:"快给我看看这问题,卡这卡了小半天了 ...
- C语言基础练习——打印乘法口诀表
C语言基础练习--打印乘法口诀表 JERRY_Z. ~ 2020 / 8 / 26 转载请注明出处! 代码: /* * @Author: JERRY_Z. * @Date: 2020-08-26 16 ...
- 从零开始的SpringBoot项目 ( 一 ) Spring、SpringMVC和SpringBoot
要想开始一个SpringBoot项目 , 首先要知道SpringBoot是什么 , 可以做什么 , 再去研究怎么用 . 一.概念 1.Spring Spring是一个开源容器框架,可以接管web层,业 ...
- APP重构之路:引入单元测试
一.为什么要引入单元测试 在开发过程中我们会遇到这样一些问题: 面对需要重构庞大的模块代码时无从下手 修改了一处地方却在另一处地方引发了新的bug 扩展新功能的同时导致旧代码出现bug 在测试人员难以 ...
- 基于Appium的UI自动化测试
为什么需要UI自动化测试 移动端APP是一个复杂的系统,不同功能之间耦合性很强,很难仅通过单元测试保障整体功能.UI测试是移动应用开发中重要的一环,但是执行速度较慢,有很多重复工作量,为了减少这些工作 ...
- oracle的system登不了
(密码对的,密码错直接就是被拒了) 这个一直弹出改密码 但是改了点[确定],又说 oracle改system密码 [oracle@localhost ~]$ sqlplus / as sysdba S ...
- markdown 语法总结（一）
1.标题 代码 注:# 后面保持空格 # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 ####### h7 // 错误代码 ######## h8 // 错误 ...