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 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 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
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
Python读取word文本操作详解
2018/01/22 Python
python3字符串操作总结
2019/07/24 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
计算机专业毕业生自荐信
2013/12/31 职场文书
课程改革实施方案
2014/03/16 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
简易离婚协议书范本
2014/10/24 职场文书
2015国庆节感想
2015/08/04 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js
python标准库ElementTree处理xml
2022/05/20 Python