JS图片轮播与索引变色功能实例详解
更新时间：2017年07月06日 09:41:32 作者：superficial
本文通过实例代码给大家介绍了JS图片轮播与索引变色功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!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前端开发中js函数问题经常会被讨论，这个问题仁者见仁智者见智，下面通过示例代码给大家介绍js五大常见函数，感兴趣的朋友一起看看吧2018-03-03
本文为大家详细介绍下禁止截屏，通过清除剪切板实现、禁止复制、禁止右键菜单、禁止网页另存为等等，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
这篇文章主要介绍了JavaScript引用类型Array,结合实例形式较为详细的分析了JavaScript数组相关的创建、检测、转换、排序、栈、队列、引用等各种常见操作技巧,需要的朋友可以参考下2018-07-07
ArrayList功能想必大家都有所了解吧，本文使用js实现ArrayList功能并附实例代码，想学习的朋友可以看看2014-10-10
这篇文章主要介绍了微信小程序国际化探索实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要为大家详细介绍了JS组件Bootstrap Select2使用方法，感兴趣的小伙伴们可以参考一下2016-05-05
中秋博饼习俗源于福建厦门，盛行于漳州的龙海、泉州的安海和金门县等地。博饼的游戏规则简单公平，既充满竞争悬念，又富于生活情趣，本文将用JavaScript实现这一经典游戏，感兴趣的可以了解一下2022-09-09
这篇文章主要介绍了javascript分页实例，大家参考使用吧2013-12-12
在编写小程序的项目过程中,难免会有需要上传图片,下面这篇文章主要给大家介绍了关于微信小程序图片上传功能的实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
最近在做一个ColdFusion的项目，有一个业务Check，需要用JavaScript实现：判断指定字符串是否为有效数字。2010-05-05
最新评论