1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. #tupian{ width:290px; height:160px; border:#0F9 solid 1px}
  8. .tp{ width:220px; height:160px; float:left}
  9. .li{ margin-top:10px;list-style:none; border:#00F solid 1px; width:20px;}
  10. </style>
  11. </head>
  12.  
  13. <body>
  14.     <div id="tupian">
  15.          <div class="tp"  onmouseover="sbfs()" onmouseout="jixu()"><img src="../../项目素材/图片/84372.jpg" /></div>
  16.          <div class="tp"  onmouseover="sbfs()" onmouseout="jixu()" style="display:none" ><img src="../../项目素材/图片/84610.jpg" /></div>
  17.          <div class="tp"  onmouseover="sbfs()" onmouseout="jixu()" style="display:none"><img src="file:///C|/Users/gaofangquan/Desktop/项目素材/图片/84246.jpg" /></div>
  18.          <div class="tp"  onmouseover="sbfs()" onmouseout="jixu()" style="display:none"><img src="../../项目素材/图片/84639 (1).jpg" /></div>
  19.  
  20.          <div id="xuanxiang" style="float:right; ">
  21.            <ul>
  22.              <li class="li" onmouseover="xz(this),xuanzhong(this)" onmouseout="shuzilikai()">1</li>
  23.              <li class="li" onmouseover="xz(this),xuanzhong(this)" onmouseout="shuzilikai()">2</li>
  24.              <li class="li" onmouseover="xz(this),xuanzhong(this)" onmouseout="shuzilikai()">3</li>
  25.              <li class="li" onmouseover="xz(this),xuanzhong(this)" onmouseout="shuzilikai()">4</li>
  26.  
  27.            </ul>
  28.          </div>
  29.     </div>
  30.  
  31. </body>
  32. <script type="text/jscript">
  33.  
  34. var aaaa=document.getElementsByClassName("tp")
  35. var bbb=document.getElementsByClassName("li")
  36. var index=0;
  37. lunbo();
  38. function lunbo(){
  39. 	xianshi();
  40. 	if( index<aaaa.length-1){
  41. 		index++;}
  42. 		else{index=0;}}
  43.  
  44. 	var a=window.setInterval("lunbo()",1000)
  45.              //图片与数列的背景同时变化
  46. 	function xianshi(){
  47. 		for( var i=0;i<aaaa.length;i++){
  48. 			aaaa[i].style.display="none"
  49. 			bbb[i].style.backgroundColor="white"}
  50. 			aaaa[index].style.display="block"
  51. 			bbb[index].style.backgroundColor="red"}
  52.  
  53.   //鼠标放在数列上背景变色
    function xz(n){
  54. 	var b=document.getElementsByClassName("li")
  55. 	for( var i=0; i<b.length; i++){
  56. 		b[i].style.backgroundColor="white"}
  57. 		n.style.backgroundColor="red"}
  58.  
  59. 		//当鼠标放到图片上的时候，图片停止轮播
  60. function sbfs(){
  61. 	window.clearInterval(a)}
  62.    //当鼠标离开图片的时候，轮播继续
  63. function jixu(){
  64. 	 a=window.setInterval("lunbo()",1000);}
  65.  
  66. 	//鼠标放上，图片与相对应的li的值得索引显示出来
  67. function xuanzhong(m){
  68. 	var ccc=document.getElementsByClassName("tp")
  69. 	index=m.innerHTML-1;// 因为m.innerhtml 获取的时数列li的值，比ccc的索引大1，所以应该减去1；
  70. 	                     //把获取的值赋给index是因为如果重新定义一个变量的话，当鼠标离开li的时候，图片轮播的索引很乱，
  71. 		for( var i=0;i<ccc.length;i++){
  72. 			ccc[i].style.display="none"}
  73. 			ccc[index].style.display="block"
  74. 			window.clearInterval(a)}
  75.  
  76. 	//鼠标离开让图片自动切换
  77. function shuzilikai(){
  78. 	a=window.setInterval("lunbo()",1000)}
  79. </script>
  80.  
  81. </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加强版图片轮播的更多相关文章

  1. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  2. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  3. 用JS做图片轮播

    脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...

  4. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  5. html中使用JS实现图片轮播效果

    1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...

  6. 使用JS实现图片轮播（前后首尾相接）

    最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相 ...

  7. 使用JS实现图片轮播滚动跑马灯效果

    我的第一篇文章.哈哈.有点小鸡冻.  之前在百度搜索"图片轮播"."图片滚动",结果都是那种可以左右切换的.也是我们最常见的那种.可能是搜索 关键字的问题吧. ...

  8. js实现图片轮播

    效果图

  9. 原生JS实现图片轮播

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Hibernate map enum type

    1. Bean @Entity @Table(name = "entities") public class Entities { public enum entityType { ...

  2. 1.WF 4.5在项目中直接使用的问题

    最近公司需要在互联网产品后台进行精细化流程管理,开发了一个基于WF 4.5框架的流程引擎与图形化设计器,让流程真正的跑了起来. 基于Visual Studio 直接设计流程主要面临以下的问题: 1.需 ...

  3. 求一个整数数组最大子数组之和，时间复杂度为N

    #include<iostream.h> int main () { ]={-,-,-,-,-,-,-,-,-,-}; ],sum=; ;i<;i++) { ) { sum=b[i] ...

  4. java 操作 redis

    1.Java 使用 Redis 只需要下载一个jar包即可 地址:http://maven.outofmemory.cn/redis.clients/jedis/2.5.2/ 工程

  5. C#访问ORALCE数据库

    随着时间的推移知识也在更新,原来可用的技术也会被淘汰或更新. framework4.0开始不再支持System.Data.OracleClient了,但是令人欣慰的是ORACLE公司自己出了一个Ora ...

  6. PHP 关于timezone问题

    Warning: date(): It is not safe to rely on the system's timezone settings. You are *required* to use ...

  7. Linux盘符绑定槽位

    服务器下的硬盘主有机械硬盘.固态硬盘以及raid阵列,通常内核分配盘符的顺序是/dev/sda./dev/sdb- -.在系统启动过程中,内核会按照扫描到硬盘的顺序分配盘符(先分配直通的,再分配阵列) ...

  8. jquery页面水印插件，支持多行水印、行错开

    最近工作需求,需要在页面上加水印,但发现网上示例无法满足我的需求,所以还是自己动手写. 有几个特别需求: 1.可以写多行水印,并且中心对齐. 2.每行水印错开. PS:我找到的例子都是单行水印,所以用 ...

  9. jquery不兼容input的change事件处理

    因为客户使用系统一般都是用IE版本的浏览器,所以每次在chrome下调试之后都要在IE走一遍; 这次准备在选择开始时间或者结束时间之后在下方能及时给出对应的天数,但是在IE8下试了change时间根本 ...

  10. xfire调用webservice接口的实现方式

    package com.test; import java.net.URL; import org.codehaus.xfire.client.Client; import org.codehaus. ...