一、 使用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("获取元素成功");
}
原文地址：https://www.cnblogs.com/menglong1214/p/9595205.html
时间： 2024-08-03 07:48:54