一、 使用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>二、 使用js实现html代码： ???<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8" /> ???????<title></title> ???????<link rel="stylesheet" type="text/css" href="css/slideshow.css"/> ???</head> ???<body> ???????<div class="slideshow"> ???????????<!--图片--> ???????????<a href="img/aaa.jpg" id="slideshow-href"> ???????????????<img src="img/aaa.jpg" ?id="slideshow-item"/> ???????????</a> ???????????<!--底部导航小圆点--> ???????????<ul id="conLis"> ???????????????<li></li> ???????????????<li></li> ???????????????<li></li> ???????????????<li></li> ???????????????<li></li> ???????????????<li></li> ???????????</ul> ???????????<!--左右导航--> ???????????<div id="leftBtn"><</div> ???????????<div id="rightBtn">></div> ???????</div> ???</body> ???<script type="text/javascript" src="js/slideshow.js"></script></html>css代码： ???body,ul,li{margin: 0;padding: 0;}a{text-decoration: none;}li{list-style: none;}.slideshow{ ???width: 800px; ???height: 500px; ???margin: 100px auto; ???overflow: hidden; ???????position: relative;}#slideshow-item{ ???display: block; ???width: 800px;}#conLis{ ???position: absolute; ???bottom: 16px; ???left: 50%; ???transform: translateX(-50%);}.slideshow li{ ???margin: 0 10px; ???border: solid 6px black; ???border-radius: 50%; ???float: left; ???cursor: pointer;}#leftBtn,#rightBtn{ ???padding: 8px 6px; ???????font-size: 60px; ???color: white; ???????background: #E7E7E7; ???????position: absolute; ???top: 50%; ???transform: translateY(-50%); ???????opacity:0.3; ???cursor: pointer;}#leftBtn{ ???left: 15px;}#rightBtn{ ???right: 15px;}js代码： ???//获取元素var slideshow = document.querySelector(‘.slideshow‘);var scrollHref = gt("slideshow-href");var scrollItem = gt("slideshow-item");//console.log(scrollHref+"===="+scrollItem);var conLis = gt(‘conLis‘);var items = conLis.getElementsByTagName(‘li‘);var leftBtn = gt(‘leftBtn‘);var rigthBtn = gt(‘rightBtn‘);//设置存储图片的容器var imgArr = ["img/aaa.jpg","img/bbb.jpg","img/ccc.jpg","img/ddd.jpg","img/eee.jpg","img/fff.jpg"];var hrefArr = ["img/aaa.jpg","img/bbb.jpg","img/ccc.jpg","img/ddd.jpg","img/eee.jpg","img/fff.jpg"];//设置索引0为第一张显示的图片var currentIndex = 0;scrollItem.src = imgArr[0];scrollHref.href = hrefArr[0];//设置第一个小圆点为黄色items[0].style.borderColor = "yellow";//设置定时更换图片var timer = setInterval(changeItem,2000);function changeItem(){ ???currentIndex++;//图片索引自增1,显示下一张图片 ???if(currentIndex == imgArr.length){ ???????currentIndex = 0; ???} ???//调用图片轮播，动态的改变当前索引值来改变轮播的图片 ???slideShow(currentIndex);}//图片轮播function slideShow(i){ ???//设置轮播图片及链接图片 ???scrollItem.src = imgArr[i]; ???scrollHref.href = hrefArr[i]; ???????//设置对应轮播图片的小圆点效果 ???for(var j = 0; j < items.length; j++){ ???????//设置所有小圆点为默认样式 ???????items[j].style.borderColor = ‘black‘; ???} ???????//单独设置某张轮播图对应的小圆点样式 ???items[i].style.borderColor = "yellow";}//设置鼠标滑过底部导航小圆点显示对应的图片for(var j = 0; j < items.length; j++){ ???//for循环内有事件动作的话是先执行循环，要想按钮每一次点击都是按钮的下标值，就要先记录i值， ???//不然等到循环执行完再执行onclick事件就会等于for循环最后得到的i值。 ???items[j].index = j;//将循环数据赋值给列表中的索引;防止闭包函数中无法正常获取当前索引i，而衍生出的一个绑定在dom元素上的数据index ???items[j].onmouseover = function(){ ???????clearInterval(timer);//停止自动轮播 ???????slideShow(this.index); ???} ???????items[j].onmouseout = function(){ ???????currentIndex = this.index;//将元素索引赋值给currentIndex，保证下一次自动轮播继续当前这个向下轮播 ???????timer = setInterval(changeItem,2000); ???}}//设置点击左右箭头的轮播leftBtn.onmouseover = rightBtn.onmouseover = function(){ ???leftBtn.style.opacity = "1"; ???rightBtn.style.opacity = "1"; ???????//鼠标移动到区域停止轮播 ???clearInterval(timer);}leftBtn.onmouseout = rigthBtn.onmouseout = function(){ ???leftBtn.style.opacity = "0.3"; ???rightBtn.style.opacity = "0.3"; ???????//鼠标离开开始轮播 ???timer = setInterval(changeItem,2000);}leftBtn.onclick = function(){ ???//判断当前图片是否为第一张图片索引 ???if(currentIndex == -1){ ???????currentIndex = imgArr.length-1;//将最后一张图片赋值给前面的索引 ???} ???slideShow(currentIndex);//调用轮播方法 ???????currentIndex--;//点击左侧按钮，做减法操作}rightBtn.onclick = function(){ ???//判断当前图片是否为最后一张图片的索引 ???if(currentIndex == imgArr.length-1){ ???????currentIndex = 0;//将第一张图片索引赋值 ???} ???slideShow(currentIndex); ???????currentIndex++;}//封装通过id获取元素的方法function gt(id){//传入字符串类型的参数 ???console.log("进入方法"); ???return document.getElementById(id); ???console.log("获取元素成功");}js动画之轮播图
原文地址：https://www.cnblogs.com/menglong1214/p/9595205.html