<!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"}

  //鼠标放在数列上背景变色
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加强版图片轮播的更多相关文章

  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. Java中的局部变量表及使用jclasslib进行查看

    直接上下载地址 jclasslib是一个独立的工具,不是包含在JDK中的工具,需要自己进行下载,下载地址如下: http://downfile.downcc.com/down/JClassLib_wi ...

  2. IPad分屏，当电脑第二显示屏

    最在在网上看到使用IPad可以做为电脑的第二个显示屏,对于我这样一个程序猿来说,这真是我的福音呀!因此在网上搜了许多关于Ipad投屏的信息,下面简单说明一下,包括怎么使用! 1.根据在网上搜索的结果, ...

  3. Mysql数据库二进制安装

    MySQL数据库有四种安装方法: 源码包编译安装 RPM包安装 二进制文件安装 官方yum源安装 这里我们主要介绍二进制包的安装方法 在MySQL官网下载二进制包并且上传到服务器上 解压二进制包 [r ...

  4. Open vSwitch中的datapath flow匹配过程

    看OVS2.7的datapath表项匹配是一件很蛋疼的事情 数据结构看不懂 匹配算法经过了多次演进,已经有点复杂了,看代码完全看不懂,我能怎么办,我也很绝望啊!   2.1之前精确匹配时代,匹配过程是 ...

  5. Android开发的过去、现在和将来

    现如今,拥有着 80% 的市场份额的 Android 是最主流的手机操作系统.它运行在无数的智能手机.平板以及其他各种各样的设备上.仅凭这一点,我们是否可以认为  Android 编程是简单而轻松的呢 ...

  6. 写了一个Mac快速设置、打开和关闭Web代理的Shell命令

    缘由(痛点) 每次在Mac上设置Web代理,都需要点开"系统偏好设置 -- 网络 -- 高级 -- 代理",然后分别设置Web代理(HTTP)和安全Web代理(HTTPS),设置完 ...

  7. 渗透测试工具Nmap从初级到高级

    Nmap是一款网络扫描和主机检测的非常有用的工具. Nmap是不局限于仅仅收集信息和枚举,同时可以用来作为一个漏洞探测器或安全扫描器.它可以适用于winodws,linux,mac等操作系统.Nmap ...

  8. JS中函数参数值传递和引用传递

    也许大家对于函数的参数都不会太在意,简单来说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样.深入研究,你会发现其实没那么简单,这个传参是要分俩种情况(其实这是个错误的说法 ...

  9. window.close()方法对谷歌和火狐浏览器无效

    在近期的项目中,遇到了一个问题,就是用户到新浪支付进行操作,操作成功后,指定到一个网页,需求是点击确定,关闭该网页.需求出来以后认为这种就是小菜一碟,直接用 window.close()方法就可以实现 ...

  10. C#基础知识-XML介绍及基本操作（十）

    在讲了一系列的基础文档之后,现在开始讲一些实例.对于一些数据不是很大的程序,或者只是一些配置文件,需要本地存储的,完全可以使用XML代替数据库,因为只是去操作单个文件会比操作数据库要简单很多,在程序中 ...