图片切换代码js（图片轮换代码）

今天给各位分享图片切换代码js的知识，其中也会对图片轮换代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、怎样用javascript实现图片定时切换
• 2、js鼠标单击实现图片切换？
• 3、JS切换图片(使用了定时器setInterval()方法)
• 4、如何用js实现点击图片切换另一图片，再次点击恢复？
• 5、求1.JS图片切换代码 2.切换功能

怎样用javascript实现图片定时切换

思路：使用javascript定时器函数setTimeout()每隔一定的毫秒间隔数执行动作，在执行的动作中循环替换图片的src属性。树立演示如下：

1、HTML结构

img src="1.png" id="test"

2、javascript代码

function change(n){

if(n5) n=1;  // 一共5张图片，所以循环替换

document.getElementById("test").setAttribute("src", n+".png");

n++;

setTimeout("change("+n+")",1000);

}

window.onload = function(){

setTimeout("change(1)", 1000);

}

3、效果演示

js鼠标单击实现图片切换？

1、提前准备一组图片，将图片名称设置一定规律：例如  img1.jpg、img2.jpg

2、编写鼠标点击事件

3、在鼠标点击时间里，判断鼠标点击次数

4、根据不同次数，显示不同的图片

script type="text/javascript"

    $(function(){

        var items=new Arrays("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg");

        var i=0;

        $("#bgImage").click(function(){

            i++;

            if(iitems.length){

                i=1;

            }

            $(this).prop("src","img"+i+".jpg");

        });

    });

/script

JS切换图片(使用了定时器setInterval()方法)

setInterval()方法：每隔一段事件执行一次函数

--参数：1、回调函数

              2、间隔时间，毫秒为单位

例子：每隔1秒打印一次hello

图片切换效果图：

如何用js实现点击图片切换另一图片，再次点击恢复？

方法如下

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"

title/title

/head

body

script    

window.onload=function(){

var Imgbtn=document.getElementById('btn');

var Img=document.getElementById('img');

Imgbtn.onclick=function(){

if(Img.src=='')            {          

Img.src='';

}else{

Img.src=''

}

}

}

/script

div id="bg"

div id="btn"

div id="txt"试客小兵/div

img id="img" src=""

/div

/div

/body

/html

扩展资料

JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

直译语言的弱点是安全性较差，而且在JavaScript中，如果一条运行不了，那么下面的语言也无法运行。而其解决办法就是于使用try{}catch(){}︰

Javascript被归类为直译语言，因为主流的引擎都是每次运行时加载代码并解译。V8是将所有代码解译后再开始运行，其他引擎则是逐行解译（SpiderMonkey会将解译过的指令暂存，以提高性能，称为实时编译），但由于V8的核心部份多数用Javascript撰写（而SpiderMonkey是用C++），因此在不同的测试上，两者性能互有优劣。

与其相对应的是编译语言，例如C语言，以编译语言编写的程序在运行之前，必须经过编译，将代码编译为机器码，再加以运行。

参考资料：百度百科 JavaScript编程

求1.JS图片切换代码 2.切换功能

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title图片切换效果/title

/head

body

style type="text/css"

.container{

width:280px;

height:200px;

border:1px solid #eee;

position:relative;

}

#idPicText{

background:#eee;

line-height:25px;

text-align:center;

font-weight:bold;

width:282px;

white-space:nowrap;

overflow:hidden;

font-size:12px;

}

#idPicText a{

text-decoration:none;

color:#333;

display:block;

}

#idPicList img{

cursor:pointer;

width:65px;

height:50px;

filter:alpha(opacity=50);

-moz-opacity: .5;

opacity: .5;

border:0;

margin:10px;

}

#idPicList img.on{

filter:alpha(opacity=100);

-moz-opacity: 1;

opacity: 1;

}

#idNum{ position:absolute; right:5px; bottom:5px;}

#idNum li{

float: left;

list-style:none;

color: #fff;

text-align: center;

line-height: 16px;

width: 16px;

height: 16px;

font-family: Arial;

font-size: 12px;

cursor: pointer;

margin: 1px;

border: 1px solid #707070;

background-color: #060a0b;

}

#idNum li.on{

line-height: 18px;

width: 18px;

height: 18px;

font-size: 14px;

border: 0;

background-color: #ce0609;

font-weight: bold;

}

/style

script type="text/javascript"

var isIE = (document.all) ? true : false;

var $ = function (id) {

return "string" == typeof id ? document.getElementById(id) : id;

};

var Class = {

create: function() {

return function() { this.initialize.apply(this, arguments); }

}

}

var Extend = function(destination, source) {

for (var property in source) {

destination[property] = source[property];

}

}

var Bind = function(object, fun) {

return function() {

return fun.apply(object, arguments);

}

}

var Each = function(list, fun){

for (var i = 0, len = list.length; i len; i++) { fun(list[i], i); }

};

//ie only

var RevealTrans = Class.create();

RevealTrans.prototype = {

initialize: function(container, options) {

this._img = document.createElement("img");

this._a = document.createElement("a");

this._timer = null;//计时器

this.Index = 0;//显示索引

this._onIndex = -1;//当前索引

this.SetOptions(options);

this.Auto = !!this.options.Auto;

this.Pause = Math.abs(this.options.Pause);

this.Duration = Math.abs(this.options.Duration);

this.Transition = parseInt(this.options.Transition);

this.List = this.options.List;

this.onShow = this.options.onShow;

//初始化显示区域

this._img.style.visibility = "hidden";//第一次变换时不显示红x图

this._img.style.width = this._img.style.height = "100%"; this._img.style.border = 0;

this._img.onmouseover = Bind(this, this.Stop);

this._img.onmouseout = Bind(this, this.Start);

isIE (this._img.style.filter = "revealTrans()");

this._a.target = "_blank";

$(container).appendChild(this._a).appendChild(this._img);

},

//设置默认属性

SetOptions: function(options) {

this.options = {//默认值

Auto:true,//是否自动切换

Pause:1000,//停顿时间(微妙)

Duration:1,//变换持续时间(秒)

Transition:23,//变换效果(23为随机)

List:[],//数据集合,如果这里不设置可以用Add方法添加

onShow:function(){}//变换时执行

};

Extend(this.options, options || {});

},

Start: function() {

clearTimeout(this._timer);

//如果没有数据就返回

if(!this.List.length) return;

//修正Index

if(this.Index 0 || this.Index = this.List.length){ this.Index = 0; }

//如果当前索引不是显示索引就设置显示

if(this._onIndex != this.Index){ this._onIndex = this.Index; this.Show(this.List[this.Index]); }

//如果要自动切换

if(this.Auto){

this._timer = setTimeout(Bind(this, function(){ this.Index++; this.Start(); }), this.Duration * 1000 + this.Pause);

}

},

//显示

Show: function(list) {

if(isIE){

//设置变换参数

with(this._img.filters.revealTrans){

Transition = this.Transition; Duration = this.Duration; apply(); play();

}

}

this._img.style.visibility = "";

//设置图片属性

this._img.src = list.img; this._img.alt = list.text;

//设置链接

!!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");

//附加函数

this.onShow();

},

//添加变换对象

Add: function(sIimg, sText, sUrl) {

this.List.push({ img: sIimg, text: sText, url: sUrl });

},

//停止

Stop: function() {

clearTimeout(this._timer);

}

};

/script

div id="idShow" class="container"

/div

div id="idPicShow" class="container"

ul id="idNum"

/ul

/div

div id="idPicText"/div

div id="idPicList"/div

script

var r = new RevealTrans("idShow");

//添加变换对象

r.Add('/jscss/demoimg/wall1.jpg', '图片变换效果', '#');

r.Add('/jscss/demoimg/wall2.jpg', '图片滑动展示效果', '#');

r.Add('/jscss/demoimg/wall3.jpg', '图片切换展示效果', '#');

r.Start();

//////////////////////

var rvt = new RevealTrans("idPicShow");

//添加变换对象

rvt.Add('/jscss/demoimg/wall1.jpg', '图片变换效果', '#');

rvt.Add('/jscss/demoimg/wall2.jpg', '图片滑动展示效果', '#');

rvt.Add('/jscss/demoimg/wall3.jpg', '图片切换展示效果', '#');

var oList = $("idPicList"), oText = $("idPicText"), arrImg = [];

var oNum = $("idNum"), arrNum = [];

//设置图片列表

Each(rvt.List, function(list, i){

//图片式

var img = document.createElement("img");

img.src = list["img"]; img.alt = list["text"];

arrImg[i] = img;

oList.appendChild(img);

//按钮式

var li = document.createElement("li");

li.innerHTML = i + 1;

arrNum[i] = li;

oNum.appendChild(li);

//事件设置

img.onmouseover = li.onmouseover = function(){ rvt.Auto = false; rvt.Index = i; rvt.Start(); };

img.onmouseout = li.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };

});

//设置图片列表样式 文本显示区域

rvt.onShow = function(){

var i = this.Index, list = this.List[i];

//图片式

Each(arrImg, function(o){ o.className = ""; }); arrImg[i].className = "on";

//按钮式

Each(arrNum, function(o){ o.className = ""; }); arrNum[i].className = "on";

//文本区域

oText.innerHTML = !!list.url ? "a href='" + list.url + "' target='_blank'" + list.text + "/a" : list.text;

}

//文本显示区域

oText.onmouseover = function(){ rvt.Auto = false; rvt.Stop(); };

oText.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };

rvt.Start();

/script

/body

/html

关于图片切换代码js和图片轮换代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。