微信小程序怎么推广_JS图片轮播与索引变色功用

JS图片轮播与索引变色功能实例详解       本文通过实例代码给大家介绍了JS图片轮播与索引变色功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 html xmlns="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 onmouseout="jixu()" img src="../../项目素材/图片/84372.jpg" / /div 
 div onmouseout="jixu()" img src="../../项目素材/图片/84610.jpg" / /div 
 div onmouseout="jixu()" img src="file:///C|/Users/gaofangquan/Desktop/项目素材/图片/84246.jpg" / /div 
 div onmouseout="jixu()" img src="../../项目素材/图片/84639 (1).jpg" / /div 
 div id="xuanxiang" 
 li onmouseout="shuzilikai()" 1 /li 
 li onmouseout="shuzilikai()" 2 /li 
 li onmouseout="shuzilikai()" 3 /li 
 li 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){
 c=document.getElementsByClassName("tp")
 index=m.innerHTML-1;// 因为m.innerhtml 的索引大1,所以应该减去1;
 //把获取的值赋给index是因为如果重新定义一个变量的话,当鼠标离开li的时候,图片轮播的索引很乱,
 for( var i=c.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图片轮播与索引变色功能实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!