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代 ...
随机推荐
- eric4 打包文件
在.py 工程 所在目录: 按住shift,鼠标右键,在此处打开cmd或shell,然后如下操作 1.打包成文件夹 pyinstaller lrs.py 2.打包成 单文件 pyinstaller - ...
- python3 - selenium常用的参数
# 选用开发者模式,创建一个浏览器对象,可避免被检测到是selenium模拟浏览器 chrome_options = webdriver.ChromeOptions() chrome_options ...
- python基础 Day4
python Day4 1.列表 列表初识 之前的的三种str.int.bool在有的条件下不够用 str:存储少量的数据. 切片还是对其进行任何操作,获取的内容都是str类型.存储的数据单一. 列表 ...
- go genetlink demo
原文链接:https://github.com/mdlayher/genetlink [root@wangjq test]# cat genetlink.go package main import ...
- C# DataTable查询示例
代码 public void Test() { #region 初始化数据 /* 数据 张三 语文 34.00 张三 数学 58.00 张三 英语 61.00 李四 语文 45.00 李四 数学 87 ...
- 树链剖分详解&题解 P6098 【[USACO19FEB]Cow Land G】
看到各位大佬们已经把其他的东西讲的很明白了,我这个 juruo 就讲一讲最基本的树链剖分吧. 0.树剖是什么?能吃吗? 不能吃 树剖是树链剖分的简称,我们一般说的树剖其实指重链剖分.当然,还有一种长链 ...
- springboot文件上传（可单文件/可多文件）
获取文件内容,是从InputStream中获取,添加到指定位置的文件 如下所示 public static void getFile(InputStream is,File fileName) thr ...
- oracle坑。
char(2)的,后面的有一个空格.删不掉.在plsql里可以正常查.写死的sql在程序也可以正常查. 程序用占位符的形式,不能查出来.只能转成to_number select t.*,t.rowid ...
- Python开发的入门教程(九)-列表生成式
介绍 本文主要介绍Python中列表生成式的基本知识和使用 生成列表 要生成list [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],我们可以用range(1, 11): >&g ...
- Spring源码分析 手写简单IOC容器
Spring的两大特性就是IOC和AOP. IOC Container,控制反转容器,通过读取配置文件或注解,将对象封装成Bean存入IOC容器待用,程序需要时再从容器中取,实现控制权由程序员向程序的 ...