最简单的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 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
JavaScript 对象创建的3种方法
Nov 17 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生成随机密码的几种方法
2011/01/17 PHP
php定时执行任务设置详解
2015/02/06 PHP
php中使用GD库做验证码
2016/03/31 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Python制作简单的网页爬虫
2015/11/22 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
使用Tkinter制作信息提示框
2020/02/18 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
王老吉广告词
2014/03/20 职场文书
校长个人总结
2015/03/03 职场文书
自我推荐信怎么写
2015/03/24 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫