JS实现简易图片轮播效果的方法


Posted in Javascript onMarch 25, 2015

本文实例讲述了JS实现简易图片轮播效果的方法。分享给大家供大家参考。具体如下:

这里使用JS制作简易图片轮播效果:

制作比较粗糙,使用的图片是width:660ppx,height:550px;

效果图如下:

JS实现简易图片轮播效果的方法

代码部分如下:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>JS幻灯代码</title> 
 <script type="text/javascript"> 
  window.onload = function () { 
   flag = 0; 
   obj1 = document.getElementById("slider"); 
   obj2 = document.getElementsByTagName("li"); 
   obj2[0].style.backgroundColor = "#666666";
   //默认被选中颜色 
   time = setInterval("turn();", 5000); 
   obj1.onmouseover = function () { 
    clearInterval(time); 
   } 
   obj1.onmouseout = function () { 
    time = setInterval("turn();", 6000); 
   } 
 
   for (var num = 0; num < obj2.length; num++) { 
    obj2[num].onmouseover = function () { 
     turn(this.innerHTML); 
     clearInterval(time); 
    } 
    obj2[num].onmouseout = function () { 
     time = setInterval("turn();", 6000); 
    } 
   } 
   //延迟加载图片,演示的时候,使用本地图片
   //上线后请改为二级域名提供的图片地址 
   document.getElementById("second").src = "images/2.png";
   //使用图片宽660,高550 
   document.getElementById("third").src = "images/3.png"; 
   document.getElementById("four").src = "images/4.png"; 
  } 
  function turn(value) { 
   if (value != null) { 
    flag = value - 2; 
   } 
   if (flag < obj2.length - 1) 
    flag++; 
   else 
    flag = 0; 
   obj1.style.top = flag * (-550) + "px"; 
   for (var j = 0; j < obj2.length; j++) { 
    obj2[j].style.backgroundColor = "#ffffff"; 
   } 
   obj2[flag].style.backgroundColor = "#666666"; 
  } 
 </script> 
 <style type="text/css"> 
  #wrap 
  { 
   height: 550px; 
   width: 660px; 
   overflow: hidden; 
   position: relative; 
   overflow: hidden; 
  } 
  #wrap ul 
  { 
   list-style: none; 
   position: absolute; 
   top: 500px; 
   left: 450px; 
  } 
  #wrap li 
  { 
   margin-left:2px; 
   opacity: .3; 
   filter: alpha(opacity=30); 
   text-align: center; 
   line-height: 30px; 
   font-size: 20px; 
   height: 30px; 
   width: 30px; 
   background-color: #fff; 
   float: left; 
   border-radius:3px; 
   cursor:pointer; 
  } 
  #slider 
  { 
   position: absolute; 
   top: 0px; 
   left: 0px; 
  } 
  #slider img 
  { 
   float: left; 
   border: none; 
  } 
 </style> 
</head> 
<body> 
 <div id="wrap"> 
  <div id="slider"> 
   <a target="_blank" href="#"><img src="images/1.png" /></a> 
   <a target="_blank" href="#"><img id="second" /></a> 
   <a target="_blank" href="#"><img id="third" /></a> 
   <a target="_blank" href="#"><img id="four" /></a> 
  </div> 
  <ul> 
   <li>1</li> 
   <li>2</li> 
   <li>3</li> 
   <li>4</li> 
  </ul> 
 </div> 
</body> 
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
js function使用心得
May 10 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
jquery实现数字输入框
Feb 22 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jquery处理页面弹出层查询数据等待操作实例
Mar 25 #Javascript
JavaScript动态添加列的方法
Mar 25 #Javascript
javascript实现复选框选中属性
Mar 25 #Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 #Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 #Javascript
jQuery使用post方法提交数据实例
Mar 25 #Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 #Javascript
You might like
PHP生成UTF8文件的方法
2010/05/15 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
用jquery来定位
2007/02/20 Javascript
什么是JavaScript
2009/08/13 Javascript
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
Js组件的一些写法
2010/09/10 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
对于Python中RawString的理解介绍
2016/07/07 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
大四自我鉴定范文
2013/10/06 职场文书
办公室年终个人自我评价
2013/10/28 职场文书
建议书标准格式
2014/03/12 职场文书
中专生自荐信
2014/06/25 职场文书
国庆节标语大全
2014/10/08 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
mysql sql常用语句大全
2022/06/21 MySQL
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python