最简单的js图片切换效果实现代码（js如何实现图片切换）

本篇文章给大家谈谈最简单的js图片切换效果实现代码，以及js如何实现图片切换对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、JavaScript 的网页图片切换代码
• 2、js鼠标单击实现图片切换？
• 3、如何用JS实现简单的图片替换
• 4、js实现左右切换轮播图思路
• 5、求1.JS图片切换代码 2.切换功能

JavaScript 的网页图片切换代码

!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

style type="text/css"

/* Reset style */

* { margin:0; padding:0; word-break:break-all; }

body {

background:#fff;

color:#000000;

font:12px/1.6em Helvetica, Arial, sans-serif;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

h1, h2, h3, h4, h5, h6 { font-size:1em; }

a { color:#0287CA; text-decoration:none; }

a:hover { text-decoration:underline; }

ul, li { list-style:none; }

fieldset, img { border:none; }

legend { display:none; }

em, strong, cite, th { font-style:normal; font-weight:normal; }

input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }

table { border-collapse:collapse; }

html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/

/* iFocus style */

#ifocus { width:650px; height:245px; margin:0px; border:1px solid #DEDEDE; background:#F8F8F8; }

#ifocus_pic { display:inline; position:relative; float:left; width:540px; height:225px; overflow:hidden; margin:10px 0 0 10px; }

#ifocus_piclist { position:absolute; }

#ifocus_piclist li { width:550px; height:225px; overflow:hidden; }

#ifocus_piclist img { width:550px; height:225px; }

#ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; }

#ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }

#ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; }

#ifocus_btn .current { background: url(img/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }

#ifocus_opdiv { position:absolute; left:0; bottom:0; width:545px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }

#ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }

#ifocus_tx .normal { display:none; }

/style

script type="text/javascript"

function $(id) { return document.getElementById(id); }

function addLoadEvent(func){

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function(){

oldonload();

func();

}

}

}

function moveElement(elementID,final_x,final_y,interval) {

if (!document.getElementById) return false;

if (!document.getElementById(elementID)) return false;

var elem = document.getElementById(elementID);

if (elem.movement) {

clearTimeout(elem.movement);

}

if (!elem.style.left) {

elem.style.left = "0px";

}

if (!elem.style.top) {

elem.style.top = "0px";

}

var xpos = parseInt(elem.style.left);

var ypos = parseInt(elem.style.top);

if (xpos == final_x ypos == final_y) {

return true;

}

if (xpos final_x) {

var dist = Math.ceil((final_x - xpos)/10);

xpos = xpos + dist;

}

if (xpos final_x) {

var dist = Math.ceil((xpos - final_x)/10);

xpos = xpos - dist;

}

if (ypos final_y) {

var dist = Math.ceil((final_y - ypos)/10);

ypos = ypos + dist;

}

if (ypos final_y) {

var dist = Math.ceil((ypos - final_y)/10);

ypos = ypos - dist;

}

elem.style.left = xpos + "px";

elem.style.top = ypos + "px";

var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

elem.movement = setTimeout(repeat,interval);

}

function classNormal(iFocusBtnID,iFocusTxID){

var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');

var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');

for(var i=0; iiFocusBtns.length; i++) {

iFocusBtns[i].className='normal';

iFocusTxs[i].className='normal';

}

}

function classCurrent(iFocusBtnID,iFocusTxID,n){

var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');

var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');

iFocusBtns[n].className='current';

iFocusTxs[n].className='current';

}

function iFocusChange() {

if(!$('ifocus')) return false;

$('ifocus').onmouseover = function(){atuokey = true};

$('ifocus').onmouseout = function(){atuokey = false};

var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');

var listLength = iFocusBtns.length;

iFocusBtns[0].onmouseover = function() {

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (listLength=2) {

iFocusBtns[1].onmouseover = function() {

moveElement('ifocus_piclist',0,-225,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',1);

}

}

if (listLength=3) {

iFocusBtns[2].onmouseover = function() {

moveElement('ifocus_piclist',0,-450,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',2);

}

}

if (listLength=4) {

iFocusBtns[3].onmouseover = function() {

moveElement('ifocus_piclist',0,-675,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',3);

}

}

}

setInterval('autoiFocus()',3500);

var atuokey = false;

function autoiFocus() {

if(!$('ifocus')) return false;

if(atuokey) return false;

var focusBtnList = $('ifocus_btn').getElementsByTagName('li');

var listLength = focusBtnList.length;

for(var i=0; ilistLength; i++) {

if (focusBtnList[i].className == 'current') var currentNum = i;

}

if (currentNum==0listLength!=1 ){

moveElement('ifocus_piclist',0,-225,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',1);

}

if (currentNum==1listLength!=2 ){

moveElement('ifocus_piclist',0,-450,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',2);

}

if (currentNum==2listLength!=3 ){

moveElement('ifocus_piclist',0,-675,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',3);

}

if (currentNum==3 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (currentNum==1listLength==2 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (currentNum==2listLength==3 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

}

addLoadEvent(iFocusChange);

/script

/head

body

br /

div align="center"

div id="ifocus"

div id="ifocus_pic"

div id="ifocus_piclist" style="left:0; top:0;"

ul

lia href="#" target="_blank"img src="/edu/img/js/200909/1.jpg" alt="武林三国" border="0" //a/li

lia href="#" target="_blank"img src="/edu/img/js/200909/2.jpg" alt="武林英雄" border="0" //a/li

lia href="#" target="_blank"img src="/edu/img/js/200909/3.jpg" alt="商业大亨" border="0" //a/li

lia href="#" target="_blank"img src="/edu/img/js/200909/4.jpg" alt="帝国远征" border="0" //a/li

/ul

/div

div id="ifocus_opdiv"/div

div id="ifocus_tx"

ul

li class="current"2008年度排名第一的网页游戏/li

li class="normal"2009年最新的网页游戏 /li

li class="normal"商业大亨，挑战亿万富翁/li

li class="normal"一款2009年不得不玩的帝国远征/li

/ul

/div

/div

div id="ifocus_btn"

ul

li class="current"img src="/edu/img/js/200909/s1.jpg" alt="" //li

li class="normal"img src="/edu/img/js/200909/s2.jpg" alt="" //li

li class="normal"img src="/edu/img/js/200909/s3.jpg" alt="" //li

li class="normal"img src="/edu/img/js/200909/s4.jpg" alt="" //li

/ul

/div

/div

/div

/body

/html

自己改图片链接和大小~~

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实现简单的图片替换

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，填写问题基础代码。

2、在index.html中的script标签，输入js代码：$('img').attr('src', '');。

3、浏览器运行index.html页面，此时网页上的所有图片都被替换成了指定的图片。

js实现左右切换轮播图思路

我们在 CSS 阶段就已经接触到轮播图。通过轮播图我们可以达到一些好玩的特效，但使用 CSS 做出来的轮播图只有左右切换，渐变切换和简单的点击切换。局限性较大，观看效果也不佳。但当我们接触 js 之后，你就发现使用js来实现轮播图后，在看CSS实现轮播的效果就是...。我想说啥你知道的。废话不多说，咱们一起看看如何使用js来实现轮播效果。

（本文以阴阳师中“平安世界”模块的轮播图为例）

这个轮播图，我们通过两大模块构成；左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。

在使用js实现轮播图的效果前，先使用HTML和CSS完善这一模块的布局。

本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。

左右点击切换模块：

我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。

当我们点击右边按钮后，我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果

对每一张图片进行编码，以此来达到循环切换图片的效果。在切换图片时，我们可以使用排他思想。当点击按钮切换下一张图片的时候，我们可以先遍历所有的图片，把所有的图片移动到两边，然后将要移动的图片移动到中央来达到切换效果

在移动的过程中的动画和定时器设置的延迟可以自己添加一下。

左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动，可能还会出现其他问题。

本次现讲一下左右切换的思路。

求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图片切换效果实现代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js如何实现图片切换、最简单的js图片切换效果实现代码的信息别忘了在本站进行查找喔。