原生js实现图片轮播特效

作者:super_walker 时间:2024-07-29 06:52:59 

本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习。

运行效果图:

原生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
  • asp之家 网络编程 m.aspxhome.com