最简单的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字符串插入、删除、替换函数使用示例
Jul 25 Javascript
jsPDF导出pdf示例
May 02 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
js实现搜索提示框效果
Sep 05 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 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中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
php获取根域名方法汇总
2014/10/28 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
php实现文章评论系统
2019/02/18 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
学习python (2)
2006/10/31 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
django和vue实现数据交互的方法
2019/08/21 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
如何进行Linux分区优化
2013/02/12 面试题
语文教育专业应届生求职信
2013/11/23 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python
关于JavaScript轮播图的实现
2021/11/20 Javascript