輪播圖的實(shí)現(xiàn)（其中包括自動(dòng)動(dòng)畫(huà)，下方圓點(diǎn)動(dòng)畫(huà)，左右動(dòng)畫(huà)）
在这之前需要下载jQuery到本地，之后再页面引入即可~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播实现原理</title>
<link rel="shortcut icon" href="img/4.jpg" />
</head>
<style>
*{
margin:0;padding:0;
}
#container{
width: 739px;
height:500px;
margin:0 auto;
overflow: hidden;
position: relative;
}
#list{
position: absolute;
width: 3695px;
height:500px;
}
#list img{
float: left;
}
.arrow{
position: absolute;
width: 709px;
height: 40px;
font-size: 25px;
line-height: 40px;
left:0;
top:250px;
display:none;
color: white;
margin: 0 15px;
}
#left:hover, #right:hover{
background: red;
}
#left{
display: block;
width: 20px;
background: #009688a1;
float: left;
}
#right{
display: block;
width: 20px;
background: #009688a1;
float:right;
}
#footer{
position: absolute;
width: 739px;
height:30px;
background: #009688a1;
font-size: 10px;
line-height: 30px;
left:0;
bottom:-30px;
text-align: center;
color: white;
}
a{
display: inline-block;
cursor: pointer;
}
span{
display: inline-block;
width: 30px;
font-size: 20px;
cursor: pointer;
background: navajowhite;
}
.on{
background:crimson;
}
</style>
<body>
<h1 align="center">图片轮播</h1>
<div id="container">
<div id="list" style="left: -739px;" >
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lunbotu/3.jpg"/>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lunbotu/1.jpg"/>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lunbotu/2.jpg"/>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lunbotu/3.jpg"/>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lunbotu/1.jpg"/>
</div>
<div class="arrow">
<a id="left"><</a>
<a id="right">></a>
</div>
<div id="footer">
<span index="1" class="on">·</span>
<span index="2">·</span>
<span index="3">·</span>
</div>
</div>
</body>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js"></script>
<script>
$('#container').hover(function(){
$(this).find('#footer').stop().animate({bottom:0},200);
$(this).find('.arrow').show(1);
},function(){
$(this).find('#footer').stop().animate({bottom:"-30px"},200);
$(this).find('.arrow').hide(1);
});
</script>
<script type="text/javascript">
window.onload = function(){
var container = document.getElementById('container');
var leftButton = document.getElementById('left');
var rightButton = document.getElementById('right');
var list = document.getElementById('list');
var footer = document.getElementById('footer').getElementsByTagName('span');
var index = 1;
var flag = false;//用于表示是否正在进行动画
var timer; //设置自动播放的定时器
function myanimate(offset){
flag = true;
var newLeft = parseInt(list.style.left) + offset ;
var time = 300;//总的位移时间
var interval = 10;//位移间隔时间
var speed = offset/(time/interval);
function go(){
if((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft ))
{
list.style.left =parseInt(list.style.left)+ speed + 'px';
setTimeout(go,interval);
}
else{
flag = false;
if(newLeft > -739){
list.style.left = -2217 +'px';
}
else if(newLeft < -2217){
list.style.left = -739 +'px';
}
else{
list.style.left = newLeft +'px';
}
}
}
go();
}
function showButton(){
for(var i=0;i<footer.length;i++){
footer[i].className = '';
}
if(index <= 0){
index = 3;
}else if(index >= 4){
index = 1;
}
footer[index-1].className = 'on';
}
leftButton.onclick = function(){
if(!flag){
myanimate(739);
index += 1;
showButton();
}
}
rightButton.onclick = function(){
if(!flag){
myanimate(-739);
index -= 1;
showButton();
}
}
for(var i=0;i<footer.length;i++){
footer[i].onclick = function(){
var newIndex = parseInt(this.getAttribute('index'));
if(newIndex == index) return; //这个是表示如果点击的图标就是一开始显示的图标则什么都不做
if(!flag){
myanimate((newIndex-index)*(-739));
index = newIndex;
showButton();
}
};
}
function play(){
timer = setInterval(function(){
leftButton.onclick();//出发左键的点击事件
},1000);//1000是间隔的参数
}
function stop(){
clearInterval(timer);
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
</script>
</html>
點(diǎn)擊查看更多內(nèi)容
3人點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦