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代 ...
随机推荐
- Unix I/O
Unix I/O 打开文件 一个应用程序通过要求内核打开相应的文件,来宣告它想要访问一个I/O设备.内核返回一个小的非负整数,叫做描述符,它在后续对此文件的所有操作中标识这个文件.内核记录有关这个打开 ...
- echarts 导出为word文档
https://www.jianshu.com/p/5bd47ab59bbe 主要思路:前台echarts生成图片后,获取base64码,传给后台解析,然后写入freemarker模板,进行下载. 图 ...
- Java不可重入锁和可重入锁的简单理解
基础知识 Java多线程的wait()方法和notify()方法 这两个方法是成对出现和使用的,要执行这两个方法,有一个前提就是,当前线程必须获其对象的monitor(俗称“锁”),否则会抛出Ille ...
- Jmeter(二十二) - 从入门到精通 - JMeter断言 - 下篇（详解教程）
1.简介 断言组件用来对服务器的响应数据做验证,常用的断言是响应断言,其支持正则表达式.虽然我们的通过响应断言能够完成绝大多数的结果验证工作,但是JMeter还是为我们提供了适合多个场景的断言元件,辅 ...
- Spring Security拦截器加载流程分析--练气中期
写在前面 上回我们讲了spring security整合spring springmvc的流程,并且知道了spring security是通过过滤器链来进行认证授权操作的.今天我们来分析一下sprin ...
- Java中校验身份证号合法性（真伪），获取出生日期、年龄、性别、籍贯
开发过程中有用的身份证号的业务场景,那么校验身份证的合法性就很重要了,另外还有通过身份证获取出生日期.年龄.性别.籍贯等信息, 下面是本人在开发中用到的关于校验身份证真伪的工具类,可以直接拿来使用,非 ...
- 《Head First 设计模式》：外观模式
正文 一.定义 外观模式提供了一个统一的接口,用来访问子系统中的一群接口.外观定义了一个高层接口,让子系统更容易使用. 要点: 外观模式将一个或数个类的复杂的一切都隐藏在背后,只显露出一个干净美好的外 ...
- 区块链入门到实战（35）之Solidity – 变量作用域
局部变量的作用域仅限于定义它们的函数,但是状态变量可以有三种作用域类型. Public – 公共状态变量可以在内部访问,也可以通过消息访问.对于公共状态变量,将生成一个自动getter函数. Inte ...
- 区块链入门到实战（32）之Solidity – 代码注释
Solidity 支持c风格和c++风格的注释. //之后到行尾的文本,都被看作注释,编译器忽略此内容 /* 与 */ 之间的文本被看作注释, 编译器忽略此内容 示例 注释示例. function g ...
- js byte字节流和数字，字符串之间的转换，包含无符和有符之间的转换
var NumberUtil={ //byte数组转换为int整数 bytesToInt2:function(bytes, off) { var b3 = bytes[off] & 0xFF; ...