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 相关文章推荐
jQuery select操作控制方法小结
May 26 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
浅谈vue加载优化策略
Mar 19 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
开发大型PHP项目的方法
2006/10/09 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
荷兰超市:DEEN
2018/03/14 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
UNIX特点都有哪些
2016/04/05 面试题
初中英语教学反思
2014/01/25 职场文书
红旗方阵解说词
2014/02/12 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
公司岗位说明书
2015/10/08 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL