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代 ...
随机推荐
- web主题适配方案指北
前置知识 在这里了解实现网页主题切换的相关知识. CSS 变量 要实现主题切换需要了解一点 css 自定义属性.当然,本文还提供了其他实现方式,为了不给您接下来的阅读带来阻碍,先了解它. 变量的声明 ...
- Jmeter系列（49）- 详解 HTTP Cookie 管理器
如果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html 简单介绍 功能一 首先,它像网络浏览器 ...
- RPC 框架 Dubbo 从理解到使用（一）
技术架构演变 单一应用架构 通俗地讲,"单体应用(monolith application)"就是将应用程序的所有功能都打包成一个独立的单元.当网站流量很小时,只需一个应用,将所有 ...
- 超详细的阿里字节Spring面试技术点总结（建议收藏）
前言 Spring作为现在最流行Java开发技术,其内部源码设计非常优秀. Spring这个词对于Java开发者想必不会陌生,可能你每天都在使用Spring,享受着Spring生态提供的服务.现在很多 ...
- 企业级Registry仓库Harbor的部署与简介
Harbor 是Vmware公司开源的企业级Docker Registry管理项目,开源项目地址:https://github.com/vmware/harbor Harbor的所有组件都在Docke ...
- SPSSAU数据分析思维培养系列4：数据可视化篇
本文章为SPSSAU数据分析思维培养的第4期文章. 前3期内容分别讲述数据思维,分析方法和分析思路.本文讲述如何快速使用SPSSAU进行高质量作图,以及如何选择使用正确的图形. 本文分别从五个角度进行 ...
- 产品经理培训教程视频大全与模板Axure rp9与8视频教程元件库模板
注意:请仔细阅读购买,一旦发货百度网盘链接不能退~ 自动发邮件到买家留言处的邮箱,或注册淘宝时的邮箱自动通过旺旺给您发货还可以访问网页提取链接自助提取(复制到浏览器): http://4k5.cn/V ...
- Linux离线安装mysql 5.6详细步骤
一.安装MySQL 1.下载安装包 mysql-5.6.40-linux-glibc2.12-x86_64.tar.gz 2.卸载系统自带的Mariadb rpm -qa|grep mariadb / ...
- HTTP系列1番外之头部字段大全
原文地址:https://www.jianshu.com/p/6e86903d74f7 常用标准请求头 字段 属性 举例 Accept 设置接受的内容类型 Accept: text/plain Acc ...
- springcloud高级
第一章 负载均衡 Ribbon (Spring Cloud 高级) 一. Ribbon 在微服务中的作用 1 什么是 Ribbon 1.Ribbon 是一个基于 Http 和 TCP ...