原生js实现图片轮播特效
作者:super_walker 时间:2024-07-29 06:52:59
本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习。
运行效果图:
具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最简单的轮播广告</title>
<style>
body, div, ul, li {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
background: #000;
text-align: center;
font: 12px/20px Arial;
}
#box {
position: relative;
width: 492px;
height: 172px;
background: #fff;
border-radius: 5px;
border: 8px solid #fff;
margin: 10px auto;
}
#box .list {
position: relative;
width: 490px;
height: 170px;
overflow: hidden;
border: 1px solid #ccc;
}
#box .list li {
position: absolute;
top: 0;
left: 0;
width: 490px;
height: 170px;
opacity: 0;
transition: opacity 0.5s linear
}
#box .list li.current {
opacity: 1;
}
#box .count {
position: absolute;
right: 0;
bottom: 5px;
}
#box .count li {
color: #fff;
float: left;
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 5px;
overflow: hidden;
background: #F90;
opacity: 0.7;
border-radius: 20px;
}
#box .count li.current {
color: #fff;
opacity: 0.7;
font-weight: 700;
background: #f60
}
</style>
</head>
<body>
<div id="box">
<ul class="list">
<li class="current" style="opacity: 1;"><img src="img/images04/01.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/02.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/03.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/04.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/05.jpg" width="490" height="170"></li>
</ul>
<ul class="count">
<li class="current">1</li>
<li class="">2</li>
<li class="">3</li>
<li class="">4</li>
<li class="">5</li>
</ul>
</div>
<script>
var box=document.getElementById('box');
var uls=document.getElementsByTagName('ul');
var imgs=uls[0].getElementsByTagName('li');
var btn=uls[1].getElementsByTagName('li');
var i=index=0; //中间量,统一声明;
var play=null;
console.log(box,uls,imgs,btn);//获取正确
//图片切换, 淡入淡出效果我是用(transition: opacity 0.8s linear)做的,不纠结、简单 在css里面
function show(a){ //方法定义的是当传入一个下标时,按钮和图片做出对的反应
for(i=0;i<btn.length;i++ ){
btn[i].className=''; //很容易看懂吧?每个按钮都先设置成看不见,然后把当前按钮设置成可见。
btn[a].className='current';
}
for(i=0;i<imgs.length;i++){ //把图片的效果设置和按钮相同
imgs[i].style.opacity=0;
imgs[a].style.opacity=1;
}
}
//切换按钮功能,响应对应图片
for(i=0;i<btn.length;i++){
btn[i].index=i; //不知道你有没有发现,循环里的方法去调用循环里的变量体i,会出现调到的不是i的变动值的问题。所以我先在循环外保存住
btn[i].onmouseover=function(){
show(this.index);
clearInterval(play); //这就是最后那句话追加的功能
}
}
//自动轮播方法
function autoPlay(){
play=setInterval(function(){ //这个paly是为了保存定时器的,变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了
index++;
index>=imgs.length&&(index=0);//可能有优先级问题,所以用了括号,没时间测试了。
show(index);
},1000)
}
autoPlay();//马上调用,我试过用window.onload调用这个方法,但是调用之后影响到了其他方法,使用autoPlay所以只能这样调用了
//div的鼠标移入移出事件
box.onmouseover=function(){
clearInterval(play);
};
box.onmouseout=function(){
autoPlay();
};
//按钮下标也要加上相同的鼠标事件,不然图片停止了,定时器没停,会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。
</script>
</body>
</html>
希望本文所述对大家学习javascript程序设计有所帮助。
标签:js,图片轮播
0
投稿
猜你喜欢
Python函数参数分类原理详解
2022-02-26 17:05:57
解说mysql之binlog日志以及利用binlog日志恢复数据的方法
2024-01-28 08:39:57
asp access数据库并生成XML文件范例
2011-03-29 10:49:00
Pycharm修改python路径过程图解
2022-10-27 15:57:26
SQL Server 的T-SQL高级查询详解
2024-01-17 21:21:04
Python正则表达式常用函数总结
2023-07-27 12:37:41
Vue Cli与BootStrap结合实现表格分页功能
2024-05-09 15:21:44
vue实现图片懒加载的方法分析
2024-04-27 16:10:29
解决Oracle安装遇到Enterprise Manager配置失败问题
2024-01-21 03:48:28
python 类对象的析构释放代码演示
2023-11-22 18:54:53
Python中常见的数制转换有哪些
2021-05-27 11:12:21
Pytorch中.new()的作用详解
2023-12-11 10:28:54
带你深入了解数据库设计中的英文术语表
2008-12-09 14:53:00
springboot整合单机缓存ehcache的实现
2023-11-09 15:27:24
Oracle RMAN快速入门指南
2010-07-18 12:50:00
ASP编程入门进阶(十三):AdRotator & Content Rotator
2008-09-24 17:47:00
go goth封装第三方认证库示例详解
2024-02-11 14:05:35
Python深度学习pytorch神经网络图像卷积运算详解
2021-08-04 12:19:49
Python脚本导出为exe程序的方法
2022-08-22 21:33:05
Django 解决上传文件时,request.FILES为空的问题
2021-10-21 19:37:41