最简单的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 相关文章推荐
JQuery 学习笔记 element属性控制
Jul 23 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
vue.js中created方法作用
Mar 30 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 Javascript
JavaScript 绘制饼图的示例
Feb 19 Javascript
如何用JS实现简单的数据监听
May 06 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正则
2006/07/07 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
javascript 表单的友好用户体现
2009/01/07 Javascript
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
详解python logging日志传输
2020/07/01 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
网络安全方面的面试题
2015/11/04 面试题
房地产项目策划书
2014/02/05 职场文书
招聘专员岗位职责
2014/03/07 职场文书
大学活动总结模板
2014/07/10 职场文书
趣味运动会标语口号
2015/12/26 职场文书