JS图片轮播与索引变色功能实例详解


Posted in Javascript onJuly 06, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#tupian{ width:290px; height:160px; border:#0F9 solid 1px}
.tp{ width:220px; height:160px; float:left}
.li{ margin-top:10px;list-style:none; border:#00F solid 1px; width:20px;}
</style>
</head>
<body>
 <div id="tupian">
   <div class="tp" onmouseover="sbfs()" onmouseout="jixu()"><img src="../../项目素材/图片/84372.jpg" /></div>
   <div class="tp" onmouseover="sbfs()" onmouseout="jixu()" style="display:none" ><img src="../../项目素材/图片/84610.jpg" /></div>
   <div class="tp" onmouseover="sbfs()" onmouseout="jixu()" style="display:none"><img src="file:///C|/Users/gaofangquan/Desktop/项目素材/图片/84246.jpg" /></div>
   <div class="tp" onmouseover="sbfs()" onmouseout="jixu()" style="display:none"><img src="../../项目素材/图片/84639 (1).jpg" /></div>
   <div id="xuanxiang" style="float:right; ">
   <ul>
    <li class="li" onmouseover="xz(this),xuanzhong(this)" onmouseout="shuzilikai()">1</li>
    <li class="li" onmouseover="xz(this),xuanzhong(this)" onmouseout="shuzilikai()">2</li>
    <li class="li" onmouseover="xz(this),xuanzhong(this)" onmouseout="shuzilikai()">3</li>
    <li class="li" onmouseover="xz(this),xuanzhong(this)" onmouseout="shuzilikai()">4</li>
   </ul>
   </div>
 </div>
</body>
<script type="text/jscript">
var aaaa=document.getElementsByClassName("tp")
var bbb=document.getElementsByClassName("li")
var index=0;
lunbo();
function lunbo(){
 xianshi();
 if( index<aaaa.length-1){
  index++;}
  else{index=0;}}
 var a=window.setInterval("lunbo()",1000)
    //图片与数列的背景同时变化
 function xianshi(){
  for( var i=0;i<aaaa.length;i++){
   aaaa[i].style.display="none"
   bbb[i].style.backgroundColor="white"}
   aaaa[index].style.display="block"
   bbb[index].style.backgroundColor="red"}
 //鼠标放在数列上背景变色<br>function xz(n){
 var b=document.getElementsByClassName("li")
 for( var i=0; i<b.length; i++){
  b[i].style.backgroundColor="white"}
  n.style.backgroundColor="red"}
  //当鼠标放到图片上的时候,图片停止轮播
function sbfs(){
 window.clearInterval(a)}  
 //当鼠标离开图片的时候,轮播继续 
function jixu(){
  a=window.setInterval("lunbo()",1000);}
 //鼠标放上,图片与相对应的li的值得索引显示出来  
function xuanzhong(m){
 var ccc=document.getElementsByClassName("tp")
 index=m.innerHTML-1;// 因为m.innerhtml 获取的时数列li的值,比ccc的索引大1,所以应该减去1;
       //把获取的值赋给index是因为如果重新定义一个变量的话,当鼠标离开li的时候,图片轮播的索引很乱,
  for( var i=0;i<ccc.length;i++){
   ccc[i].style.display="none"}
   ccc[index].style.display="block"
   window.clearInterval(a)}
 //鼠标离开让图片自动切换  
function shuzilikai(){
 a=window.setInterval("lunbo()",1000)}
</script>
</html>

 1、js图片轮播首先要先获取所有图片的对象,用数组接受,然后定义一个变量作为数组的索引。

    2、让图片显示(先让所有的图片隐藏,再让当前图片显示),索引自增1。注意:在写定时器的时候可以写延时的也可以写间歇的。在这里我写间歇的。

    3、鼠标放在图片上停止轮播,这里我们可以清除定时器window.clearInterval(a);鼠标离开图片轮播继续再重新启动定时器a=window.setInterval("lunbo()",1000),这里注意要给定时器定义一个值,因为清除定时器要用。

    4、鼠标放上,图片与相对应的li的值得索引显示出来,让获取的数列的值赋给数组的索引(index=m.innerHTML-1),因为m.innerhtml 获取的时数列li的值,比数组的索引大1,所以应该减去1;

以上所述是小编给大家介绍的JS图片轮播与索引变色功能实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
vue cli 全面解析
Feb 28 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
实例讲解vue源码架构
Jan 24 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 Javascript
vue-router 控制路由权限的实现
Sep 24 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 #jQuery
vue2.0 keep-alive最佳实践
Jul 06 #Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 #Javascript
详解Angular Reactive Form 表单验证
Jul 06 #Javascript
让div运动起来 js实现缓动效果
Jul 06 #Javascript
老生常谈Bootstrap媒体对象
Jul 06 #Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 #jQuery
You might like
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
YII框架关联查询操作示例
2019/04/29 PHP
潜说js对象和数组
2011/05/25 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python 判断一个进程是否存在
2009/04/09 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
python批量修改文件名的示例
2020/09/27 Python
在Python中实现字典反转案例
2020/12/05 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
SQL SERVER面试资料
2013/03/30 面试题
办公室主任职责范文
2013/11/08 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
停车位租赁协议书
2014/09/24 职场文书
2014财务年度工作总结
2014/11/11 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL