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 小练习(实例代码)
Aug 07 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
老生常谈javascript的面向对象思想
Aug 22 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
浅谈javascript错误处理
Aug 11 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 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
一个分页的论坛
2006/10/09 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
ES6的新特性概览
2016/03/10 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Python基于有道实现英汉字典功能
2015/07/25 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Python input函数使用实例解析
2019/11/22 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
普通大学毕业生自荐信
2013/11/04 职场文书
给孩子的新年寄语
2014/04/08 职场文书
活动总结书
2014/05/08 职场文书
假面舞会策划方案
2014/05/29 职场文书
小学课外活动总结
2014/07/09 职场文书
授权委托书
2015/01/28 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
教师节表彰会主持词
2015/07/06 职场文书