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 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 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使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
js常见表单应用技巧
2008/01/09 Javascript
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
详解Python中DOM方法的动态性
2015/04/11 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
英文自荐信格式
2013/11/28 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
秋冬农业生产标语
2014/10/09 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
公安机关起诉意见书
2015/05/20 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis