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 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
js调试系列 初识控制台
Jun 18 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
javascript中 try catch用法
Aug 16 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 Javascript
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
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
Python中的自定义函数学习笔记
2014/09/23 Python
Python之py2exe打包工具详解
2017/06/14 Python
教你学会使用Python正则表达式
2017/09/07 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
Python实现多属性排序的方法
2018/12/05 Python
基于python历史天气采集的分析
2019/02/14 Python
Python3 读取Word文件方式
2020/02/13 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
中专毕业生自荐信
2013/11/16 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
2014年体育工作总结
2014/11/24 职场文书
预备党员考察意见范文
2015/06/01 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL
Nginx配置之禁止指定IP访问
2022/05/02 Servers