jquery图片切换,js图片切换特效
您当前位置： >> >>
jquerycss3
javascript
& CopyRight , , Inc.All Rights Reserved.Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
这个是一个简单的点击箭头图片切换的例子。JS部分采用过的是jQuery
步骤如下： (1) 准备图片(左右箭头,以及一些示例图片) (2) JS(jquery)的代码如下：
&script type="text/javascript" src="JS/jquery-1.4.4.js"&&/script&
&script type="text/javascript"&
var picPath = new Array();
picPath.push("Images/chuang_yhb.jpg");
picPath.push("Images/dong_wgx.jpg");
picPath.push("Images/gao_xsg.jpg");
var index = 0;
$(function() {
var top = $("#img1").offset().
var left = $("#img1").offset().
var height = $("#img1").height();
var width = $("#img1").width();
$("#img1").attr({ "src": picPath[index] });
$("#img1").parent().hover(function() {
//show the arrow left and right
$("#leftArrow").show();
$("#rightArrow").show();
$("#leftArrow").css({ "left": left - 10, "top": top + (height / 2) });
$("#rightArrow").css({ "left": left + width, "top": top + (height / 2) });
}, function() {
//hide the arrrow left and right
$("#leftArrow").hide();
$("#rightArrow").hide();
$("#leftArrow").click(function() {
if (index & 0) {
$("#img1").attr({ "src": picPath[--index] });
$("#rightArrow").click(function() {
if (index & picPath.length) {
$("#img1").attr({ "src": picPath[++index] });
(3) Html部分如下：
&img id="img1" alt="Show Pictures" style="margin-left:100" /&
&img id="leftArrow" alt="Left Arrow" src="Images/arrowa.jpg" style="position:display:width:50height:35z-index:99" /&
&img id="rightArrow" alt="Right Arrow" src="Images/arrowb.jpg" style="position:display:width:50height:35z-index:99" /&
下面再附一个js版的
Copyright &
All Rights Reserved &&&&&&给图片加水印说明
本专业页面主要是讲关于php,asp,asp.net,jsp给图片加水印实现代码。
给图片加水印相关实例教程与经典代码
??????????????????????????????????????
其它专题页面
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |js实现图片的轮换，但是要有过度效果，我贴出代码，这样只是硬硬的换图没有过渡效果求大神添加切图片时的过渡效果 - ITeye问答
&!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&
&title&&/title&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&script type="text/javascript"&
var numb = 0;
var imgnumb = 1;
function imgfor() {
imgnumb++;
document.getElementById('img1').setAttribute('src','picture/' + imgnumb + '.jpg');
if (imgnumb == 9) {
imgnumb = 0;
function clearfun() {
window.clearInterval(clearid);
clearid = setInterval(imgfor, 2000);
&/script&
&style type=""&
#img1{
perspective: 1300
transform-style: preserve-3d;
transform: translateZ(400px) translateY(300px) rotateX(-90deg);
animation: fallPerspective .8s ease-in-
100% { transform: translateZ(0px) translateY(0px) rotateX(0deg);
}
&/style&
&/head&
&body&
&img alt="这是一张图" id="img1" class="style1" src="picture/1.jpg"
width="500px" height="500px" /&
&input type="button" value="多张图片轮换" onclick="imgfor();" /&
&input type="button" value="结束执行" onclick="clearfun();" /&
&/body&
&/html&
问题补充：不要框架的，框架太大了
给你个链接地址吧
/demoshow/82/jquery-merging-image-boxes
/aino/galleria
给你点思路吧
把图片叠在一起，使用jquery的fadeOut函数隐藏后 下面的自然就显示出来了
/sprite311/imageGallery
已解决问题
未解决问题4853人阅读
03_ASP.NET（21）
04_JavaScript CSS（13）
改进后的使用JS 动态切换图片的代码，可以在一个页面中重复使用。
&!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&&
&meta http-equiv=&Content-Type& mrc=&text/ charset=utf-8& /&
&title&JS切换图片（页面中可重复使用）&/title&
&style type=&text/css&&
* { margin:0; padding:0; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans- }
h1, h2, h3, h4, h5, h6 { font-size:1 }
a { color:#0287CA; text-decoration: }
a:hover { text-decoration: }
ul, li { list-style: }
fieldset, img { border: }
legend { display: }
em, strong, cite, th { font-style: font-weight: }
input, textarea, select, button { font:12px Helvetica, Arial, sans- }
table { border-collapse: }
html { overflow:-moz-scrollbars- }
.ibanner { position: overflow: margin:20px 0 20px 300 }
.ibanner_pic {}
.ibanner_pic a { position: top:0; display:
overflow: }
.ibanner_btn { position: z-index:9999; right:5 bottom:5 font-weight:700; font-family:A }
.ibanner_btn span { display: float: margin-left:4 padding:0 5 background:#000; cursor: }
.ibanner_btn .normal { height:20 margin-top:8 border:1px solid #999; color:#999; font-size:16 line-height:20 }
.ibanner_btn .current { height:28 border:1px solid #FF5300; color:#FF5300; font-size:28 line-height:28 }
&script type=&text/javascript&&
function $(id) {
return document.getElementById(id);
function addLoadEvent(func) {
var oldonload = window.
if (typeof window.onload != 'function') {
window.onload =
window.onload = function () {
oldonload();
function addBtn(ibannerIndex) {
if (!$('ibanner' + ibannerIndex) || !$('ibanner_pic' + ibannerIndex)) {
var picList = $('ibanner_pic' + ibannerIndex).getElementsByTagName('a');
if (picList.length == 0) {
var btnBox = document.createElement('div');
btnBox.setAttribute('id', 'ibanner_btn' + ibannerIndex);
btnBox.setAttribute('class', 'ibanner_btn');
var SpanBox = '';
for (var i = 1; i &= picList. i++) {
var spanList = '&span class=&normal&&' + i + '&/span&';
SpanBox += spanL
btnBox.innerHTML = SpanB
$('ibanner' + ibannerIndex).appendChild(btnBox);
$('ibanner_btn' + ibannerIndex).getElementsByTagName('span')[0].className = 'current';
for (var m = 0; m & picList. m++) {
var attributeValue = 'picLi_' + ibannerIndex +
picList[m].setAttribute('id', attributeValue);
function moveElement(elementID, final_x, final_y, interval) {
if (!document.getElementById) {
if (!document.getElementById(elementID)) {
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) {
if (xpos & final_x) {
var dist = Math.ceil((final_x - xpos) / 10);
xpos = xpos +
if (xpos & final_x) {
var dist = Math.ceil((xpos - final_x) / 10);
xpos = xpos -
if (ypos & final_y) {
var dist = Math.ceil((final_y - ypos) / 10);
ypos = ypos +
if (ypos & final_y) {
var dist = Math.ceil((ypos - final_y) / 10);
ypos = ypos -
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(ibannerIndex) {
var btnList = $('ibanner_btn' + ibannerIndex).getElementsByTagName('span');
for (var i = 0; i & btnList. i++) {
btnList[i].className = 'normal';
function picZ(ibannerIndex) {
var picList = $('ibanner_pic' + ibannerIndex).getElementsByTagName('a');
for (var i = 0; i & picList. i++) {
picList[i].style.zIndex = '1';
var autoKey =
function iBanner(ibannerIndex) {
if (!$('ibanner' + ibannerIndex) || !$('ibanner_pic' + ibannerIndex) || !$('ibanner_btn' + ibannerIndex)) {
$('ibanner' + ibannerIndex).onmouseover = function () {
$('ibanner' + ibannerIndex).onmouseout = function () {
var btnList = $('ibanner_btn' + ibannerIndex).getElementsByTagName('span');
var picList = $('ibanner_pic' + ibannerIndex).getElementsByTagName('a');
if (picList.length == 1) {
picList[0].style.zIndex = '2';
for (var m = 0; m & btnList. m++) {
btnList[m].onmouseover = function () {
for (var n = 0; n & btnList. n++) {
if (btnList[n].className == 'current') {
var currentNum =
classNormal(ibannerIndex);
picZ(ibannerIndex);
this.className = 'current';
picList[currentNum].style.zIndex = '2';
var z = this.childNodes[0].nodeValue - 1;
picList[z].style.zIndex = '3';
if (currentNum != z) {
picList[z].style.left = '650px';
moveElement('picLi_' + ibannerIndex + z, 0, 0, 10);
function autoBanner(ibannerIndex) {
if (!$('ibanner' + ibannerIndex) || !$('ibanner_pic' + ibannerIndex) || !$('ibanner_btn' + ibannerIndex) || autoKey) {
var btnList = $('ibanner_btn' + ibannerIndex).getElementsByTagName('span');
var picList = $('ibanner_pic' + ibannerIndex).getElementsByTagName('a');
if (picList.length == 1) {
for (var i = 0; i & btnList. i++) {
if (btnList[i].className == 'current') {
var currentNum =
if (currentNum == (picList.length - 1)) {
classNormal(ibannerIndex);
picZ(ibannerIndex);
btnList[0].className = 'current';
picList[currentNum].style.zIndex = '2';
picList[0].style.zIndex = '3';
picList[0].style.left = '650px';
moveElement('picLi_' + ibannerIndex + '0', 0, 0, 10);
classNormal(ibannerIndex);
picZ(ibannerIndex);
var nextNum = currentNum + 1;
btnList[nextNum].className = 'current';
picList[currentNum].style.zIndex = '2';
picList[nextNum].style.zIndex = '3';
picList[nextNum].style.left = '650px';
moveElement('picLi_' + ibannerIndex + nextNum, 0, 0, 10);
function bannerInit() {
addBtn('1');
iBanner('1');
setInterval('autoBanner(&1&)', 2000);
addBtn('2');
iBanner('2');
setInterval('autoBanner(&2&)', 3000);
addLoadEvent(bannerInit);
&div class=&ibanner& style=&width:650 height:250& id=&ibanner1&&
&div class=&ibanner_pic& id=&ibanner_pic1&&
&a href=&/jscss/&&&img style=&width:650 height:250& src=&/texiao/1/43156.jpg& alt=&& /&&/a&
&a href=&/jscss/&&&img style=&width:650 height:250& src=&/texiao/1/43157.jpg& alt=&& /&&/a&
&a href=&/jscss/&&&img style=&width:650 height:250& src=&/texiao/1/43158.jpg& alt=&& /&&/a&
&a href=&/jscss/&&&img style=&width:650 height:250& src=&/texiao/1/43159.jpg& alt=&& /&&/a&
&/div&&!--ibanner end--&
&div style=&height:20 background:#EEE;&&&/div&
&div class=&ibanner& style=&width:350 height:125& id=&ibanner2&&
&div class=&ibanner_pic& id=&ibanner_pic2&&
&a href=&/jscss/&&&img style=&width:350 height:125& src=&/texiao/1/43156.jpg& alt=&& /&&/a&
&a href=&/jscss/&&&img style=&width:350 height:125& src=&/texiao/1/43157.jpg& alt=&& /&&/a&
&a href=&/jscss/&&&img style=&width:350 height:125& src=&/texiao/1/43158.jpg& alt=&& /&&/a&
&a href=&/jscss/&&&img style=&width:350 height:125& src=&/texiao/1/43159.jpg& alt=&& /&&/a&
&a href=&/jscss/&&&img style=&width:350 height:125& src=&/texiao/1/43157.jpg& alt=&& /&&/a&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：591694次
积分：7379
积分：7379
排名：第2836名
原创：169篇
转载：42篇
评论：104条
(1)(1)(2)(5)(1)(1)(3)(1)(1)(4)(3)(3)(1)(1)(1)(1)(6)(6)(1)(2)(14)(4)(9)(5)(4)(2)(3)(3)(8)(5)(6)(2)(2)(5)(5)(3)(2)(3)(4)(1)(3)(1)(6)(1)(2)(4)(10)(2)(1)(1)(2)(2)(8)(1)(13)(5)(3)(12)