最简单的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 相关文章推荐
js螺旋动画效果的具体实例
Nov 15 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
JS请求servlet功能示例
Jun 01 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
Python ZipFile模块详解
2013/11/01 Python
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Python yield 小结和实例
2014/04/25 Python
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
python随机生成指定长度密码的方法
2015/04/04 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
Python用户自定义异常的实现
2020/12/25 Python
python中random模块详解
2021/03/01 Python
优秀应届生推荐信
2013/11/09 职场文书
应用艺术专业个人的自我评价
2014/01/03 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
《分一分》教学反思
2014/04/13 职场文书
女性励志书籍推荐
2019/08/19 职场文书
Golang中channel的原理解读(推荐)
2021/10/16 Golang
Nginx反向代理、重定向
2022/04/13 Servers