最简单的JavaScript图片轮播代码(两种方法)


Posted in Javascript onDecember 18, 2015

通过改变每个图片的opacity属性:

素材图片:

最简单的JavaScript图片轮播代码(两种方法)

最简单的JavaScript图片轮播代码(两种方法)

最简单的JavaScript图片轮播代码(两种方法)

最简单的JavaScript图片轮播代码(两种方法)

最简单的JavaScript图片轮播代码(两种方法)

代码一:

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-">
 <title>最简单的轮播广告</title>
 <style>
  body, div, ul, li {
  margin: ;
  padding: ;
  }
  ul {
  list-style-type: none;
  }
  body {
  background: #;
  text-align: center;
  font: px/px Arial;
  }
  #box {
  position: relative;
  width: px;
  height: px;
  background: #fff;
  border-radius: px;
  border: px solid #fff;
  margin: px auto;
  }
  #box .list {
  position: relative;
  width: px;
  height: px;
  overflow: hidden;
  border: px solid #ccc;
  }
  #box .list li {
  position: absolute;
  top: ;
  left: ;
  width: px;
  height: px;
  opacity: ;
  transition: opacity .s linear
  }
  #box .list li.current {
  opacity: ;
  }
  #box .count {
  position: absolute;
  right: ;
  bottom: px;
  }
  #box .count li {
  color: #fff;
  float: left;
  width: px;
  height: px;
  cursor: pointer;
  margin-right: px;
  overflow: hidden;
  background: #F;
  opacity: .;
  border-radius: px;
  }
  #box .count li.current {
  color: #fff;
  opacity: .;
  font-weight: ;
  background: #f
  }
 </style>
 </head>
 <body>
 <div id="box">
 <ul class="list">
  <li class="current" style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
  <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
  <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
  <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
  <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
 </ul>
 <ul class="count">
  <li class="current"></li>
  <li class=""></li>
  <li class=""></li>
  <li class=""></li>
  <li class=""></li>
 </ul>
 </div>
 <script>
 var box=document.getElementById('box');
 var uls=document.getElementsByTagName('ul');
 var imgs=uls[].getElementsByTagName('li');
 var btn=uls[].getElementsByTagName('li');
 var i=index=; //中间量,统一声明;
 var play=null;
 console.log(box,uls,imgs,btn);//获取正确
 //图片切换, 淡入淡出效果我是用(transition: opacity .s linear)做的,不纠结、简单 在css里面
 function show(a){  //方法定义的是当传入一个下标时,按钮和图片做出对的反应
  for(i=;i<btn.length;i++ ){
  btn[i].className=''; //很容易看懂吧?每个按钮都先设置成看不见,然后把当前按钮设置成可见。
  btn[a].className='current';
  }
  for(i=;i<imgs.length;i++){ //把图片的效果设置和按钮相同
  imgs[i].style.opacity=;
  imgs[a].style.opacity=;
  }
 }
 //切换按钮功能,响应对应图片
 for(i=;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=);//可能有优先级问题,所以用了括号,没时间测试了。
  show(index);
  },)
 }
 autoPlay();//马上调用,我试过用window.onload调用这个方法,但是调用之后影响到了其他方法,使用autoPlay所以只能这样调用了
 //div的鼠标移入移出事件
 box.onmouseover=function(){
  clearInterval(play);
 };
 box.onmouseout=function(){
  autoPlay();
 };
 //按钮下标也要加上相同的鼠标事件,不然图片停止了,定时器没停,会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。
 </script>
 </body>
 </html>

代码二:

首先第一步,下载好一个jquery库的插件,jquery.js 网上很多随处可以下载.下载的插件要放在目录下.然后在html文档中链接好<script type="text/javascript" src="jQuery.js"></script>

第二步,布局好一个DIV,如:

<div id="scroll">
 <p class="subl">上一张<p/>
 <p class="subr">下一张<p/>
 <ul>
 <li style="background:red;display:block;"></li>
 //上面的li要设定为显示,因为是第一张图片.
 <li style="background:green;"></li>
 <li style="background:gray;"></li>
 <li style="background:orange;"></li>
 </ul>
 </div>

由于方便各位网友下载能够清晰明了,我就没有用图片路径了,因为到你们电脑上就看不到了,这里用背景颜色.

第三步,就到了写CSS的时候了.下面的CSS懂基础的人都看得懂.

#scroll{width:100%; height:180px; background-color:white; position:relative;border-bottom:1px solid gray;}//这里是给整个大的DIV设定属性.
#scroll ul{height:180px; list-style:none;}//DIV下的UL属性.
#scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}//DIV下的UL下的LI属性.注意:display:none;因为要将所有的li隐藏了先.当点击的时候在显示出来.
 .subl{position:absolute; bottom:20px; left:40%; width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold; cursor:pointer;}//上一张按钮的属性.注意一个绝对定位.
 .subr{
position:absolute;
bottom:20px; right:40%;
width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold;cursor:pointer; 
}//下一张按钮的属性.注意一个绝对定位.
.subr:hover{ background:yellow;border-radius:10px;}
.subl:hover{ background:yellow;border-radius:10px;}
//以上两个hover是鼠标经过的效果.

第四步,就是jquery代码了!也很简单.先将代码看一遍,你就会用了!

<script type="text/javascript">
/*轮播*/
 $(function(){
 var i=0;
 var len=$("#scroll ul li").length-1;
 $(".subl").click(function(){
 if(i==len){
i=-1;
}
i++;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
 });
//到这里分开!上面的是上一张点击的效果代码,下面的是下一张点击的效果代码.
 $(".subr").click(function(){//获取类名的点击事件.
 if(i==0){
i=len+1;
}
i--;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
 });
 });
 /*轮播*/
</script>

四步轻松搞定一个简单的轮!

欲了解更多特效源码知识,请关注小编微信公众号哦!

最简单的JavaScript图片轮播代码(两种方法)

Javascript 相关文章推荐
JavaScript Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 #Javascript
jQuery Validate表单验证深入学习
Dec 18 #Javascript
JavaScript计划任务后台运行的方法
Dec 18 #Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 #Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 #Javascript
jQuery Validate表单验证入门学习
Dec 18 #Javascript
jQuery定义插件的方法
Dec 18 #Javascript
You might like
PHP_Flame(Version:Progress)的原代码
2006/10/09 PHP
php 购物车实例(申精)
2009/05/11 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
python装饰器与递归算法详解
2016/02/18 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
python基于SMTP协议发送邮件
2019/05/31 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
九年级英语教学反思
2014/01/31 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
小露珠教学反思
2014/04/30 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
我的生日感言
2015/08/03 职场文书
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server