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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
javascript定义函数的方法
Dec 06 Javascript
js中有关IE版本检测
Jan 04 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
Vuex的实战使用详解
Oct 31 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
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邮件发送,php发送邮件的类
2011/03/24 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
今天,小程序正式支持 SVG
2019/04/20 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python Socket传输文件示例
2017/01/16 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
小学教师学期末自我评价
2013/09/25 职场文书
毕业自我鉴定范文
2013/11/06 职场文书
土木工程求职信
2014/05/29 职场文书
安全标语口号
2014/06/09 职场文书
小学清明节活动总结
2014/07/04 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
孕妇病假条怎么写
2015/08/17 职场文书