html怎么切换图片_HTML怎么设置点击一张图片换一张图片

1. html图片切换点作用

html图片切换点作用：var name = //[0-9]+.png/.exec($(this).attr('src'));var num = /[0-9]/.exec(name);$(this).attr('src', 'images/' + num + '.' + num + '.png');})。

就将src="http://image2.sina.com.cn/bj/zonghe/pixviewer.swf" 替换为你本地路径的src="pixviewer.swf"，PS:你也可以直接用它的FLASH。

也就是说这个地方可以不用改，然后你将flashvars="pics="后面所有带有.jpg扩展名的，都改为你本地的图片路径就可以了，但最好图片为width="700" height="527" 大小，否则图片会失帧。

编辑：

基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS或Word来编写也可以，不过保存时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。

所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：AMAYA（出品单位：万维网联盟）；FRONTPAGE（出品单位：微软）；Dreamweaver（出品单位Adobe）。

2. html中如何设置图片切换

html是无法设置图片切换的，需要结合js或jquery等相关技术实现。
你可以网络下：js或jquery实现图片切换效果，范例代码超级多，根据他们的修改即可。

3. html怎么实现当鼠标经过一个图片时显示另一张图片

1、准备切换图片素材，一般是两张，如图，放入img文件夹，跟HTML同级。

4. html中如何鼠标点击更换背景图片

html中鼠标点击更换背景图片的方法：

1、html代码：

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

2、css代码：

ul.menu > li > a{

float:left;

width:265px;

height:50px;

margin-top:450px;

text-align:center;

line-height:50px;

color:#ddd;

background-color:#333;

letter-spacing:1px;

cursor:pointer;

text-decoration:none;

text-shadow:0px 0px 1px #fff;

}

ul.menu > li ul{

list-style:none;

float:left;

margin-top:-180px;

width:100%;

height:110px;

padding-top:20px;

background-repeat:no-repeat;

background-color:transparent;

}

ul.menu > li ul li{

display:none;

}

ul.menu > li ul.sub1 {

background-image: url('../img/bg1sub.png');

}

ul.menu > li ul.sub2 {

background-image: url('../img/bg2sub.png');

}

ul.menu > li ul.sub3{

background-image:url(../img/bg3sub.png);

}

ul.menu > li ul li a{

color:#fff;

text-decoration:none;

line-height:30px;

margin-left:20px;

text-shadow:1px 1px 1px #444;

font-size:11px;

}

ul.menu > li ul li a:hover{

border-bottom:1px dotted #fff;

}

ul.menu > li ul.sub1 li{

display:block;

}

3、js代码：

if (!document.defaultView || !document.defaultView.getComputedStyle) { // IE6-IE8

var oldCurCSS = jQuery.curCSS;

jQuery.curCSS = function (elem, name, force) {

if (name === 'background-position') {

name = 'backgroundPosition';

}

if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) {

return oldCurCSS.apply(this, arguments);

}

var style = elem.style;

if (!force && style && style[name]) {

return style[name];

}

return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);

};

}

var oldAnim = $.fn.animate;

$.fn.animate = function (prop) {

if ('background-position' in prop) {

prop.backgroundPosition = prop['background-position'];

delete prop['background-position'];

}

if ('backgroundPosition' in prop) {

prop.backgroundPosition = '(' + prop.backgroundPosition;

}

return oldAnim.apply(this, arguments);

};

function toArray(strg) {

strg = strg.replace(/left|top/g, '0px');

strg = strg.replace(/right|bottom/g, '100%');

strg = strg.replace(/([0-9.]+)(s|)|$)/g, "$1px$2");

var res = strg.match(/(-?[0-9.]+)(px|\%|em|pt)s(-?[0-9.]+)(px|\%|em|pt)/);

return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];

}

4、实现效果

5. HTML中如何做图片切换效果，跪求代码

1、首先输入代码：

<ul>

6. HTML怎么设置切换图片

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H5course</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.imgview {
width: 255px;
height: 402px;
margin: 50px auto;
border: 10px solid red;
overflow: hidden;
}
.imgview img {
width: 255px;
height: 402px;
}
.imgview-nav {
width: 255px;
margin: 10px auto;
border: 1px solid red;
list-style-type: none;
}
.imgview-nav li {
float: left;
width: 15px;
height: 15px;
border: 1px solid blue;
margin: 10px;
}
span {
display: inline-block;
width: 50px;
height: 50px;
background: #CFC;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="imgview" id="imgView">
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/1.jpg" alt=""></td>
<td><img src="img/2.jpg" alt=""></td>
<td><img src="img/3.jpg" alt=""></td>
<td><img src="img/4.jpg" alt=""></td>
<td><img src="img/5.jpg" alt=""></td>
<td><img src="img/6.jpg" alt=""></td>

</tr>
</table>
</div>
<ul class="imgview-nav" id="imgviewNav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<span>左边</span>
<span>右边</span>
</div>
<script>
var imgView = document.getElementById('imgView'),
imgWidth = imgView.getElementsByTagName('img'),
btn = document.getElementsByTagName('li'),
len = btn.length,
imgNum = 0,
endPos = 0,
timer = null,
timer2 = null,
conSpan = document.getElementsByTagName('span');

conSpan[0].onclick = function (){
if (timer) {
clearInterval(timer);
};
if (timer2) {
clearInterval(timer2);
};
imgNum--;
if (imgNum < 0 ) {
imgNum = len;
};
timer = setInterval(move, 16);
timer2 = setInterval(autoMove, 3000);
}
conSpan[1].onclick = function (){
if (timer) {
clearInterval(timer);
};
if (timer2) {
clearInterval(timer2);
};
imgNum++;
if (imgNum == len ) {
imgNum = 0;
};
timer = setInterval(move, 16);
timer2 = setInterval(autoMove, 3000);
}
//绑定事件。添加移动效果
for (var i = 0; i < len; i++) {
btn[i].index = i;
btn[i].onmouseover = function(){
clearInterval(timer2);
imgNum = this.index;
if (timer) {
clearInterval(timer);
};
timer = setInterval(move, 16);
}
btn[i].onmouseout = function(){
timer2 = setInterval(autoMove, 2000);
}
};
//图片缓动效果，原理是保持步数不变，改变距离的同时改变速度
function move(){
var starPos = imgView.scrollLeft,
speed;
endPos = imgNum * imgWidth[0].offsetWidth;
speed = (endPos - starPos) / 20;
if (speed == 0) {
clearInterval(timer);
} else if(speed > 0){
speed = Math.ceil(speed);
} else {
speed = Math.floor(speed);
}
imgView.scrollLeft = starPos + speed;

}
//控制图片的自动滚动，通过控制索引值来控制图片的自动滚动
function autoMove(){
imgNum++;
if(imgNum == len) {
imgNum = 0;
};
timer = setInterval(move, 20);
}timer2 = setInterval(autoMove, 2000);
</script>
</body>
</html>

7. 在HTML中用css如何实现图片切换！！！

该图片切换特效实现很简单，而且兼容性很好。
html页面如下

css样式

* {margin:0; padding:0;}
body {font-size:12px; color:#222; font-family:Verdana,Arial,Helvetica,sans-serif; background:#f0f0f0;}
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {zoom:1;}
ul,li {list-style:none;}
img {border:0;}

.wrapper {width:800px; margin:0 auto; padding-bottom:50px;}

/* qqshop focus */
#focus {width:800px; height:280px; overflow:hidden; position:relative;}
#focus ul {height:380px; position:absolute;}
#focus ul li {float:left; width:800px; height:280px; overflow:hidden; position:relative; background:#000;}
#focus ul li div {position:absolute; overflow:hidden;}
#focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000;}
#focus .btn {position:absolute; width:780px; height:10px; padding:5px 10px; right:0; bottom:0; text-align:right;}
#focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;}
#focus .btn span.on {background:#fff;}
#focus .preNext {width:45px; height:100px; position:absolute; top:90px; background:url(img/sprite.png) no-repeat 0 0; cursor:pointer;}
#focus .pre {left:0;}
#focus .next {right:0; background-position:right top;}
</style>

js脚本

$(function() {
var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
var len = $("#focus ul li").length; //获取焦点图个数
var index = 0;
var picTimer;

//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
var btn = "<div class='btnBg'></div><div class='btn'>";
for(var i=0; i < len; i++) {
btn += "<span></span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity",0.5);

//为小按钮添加鼠标滑入事件，以显示相应的内容
$("#focus .btn span").css("opacity",0.4).mouseenter(function() {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");

//上一页、下一页按钮透明度处理
$("#focus .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});

//上一页按钮
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});

//下一页按钮
$("#focus .next").click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});

//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$("#focus ul").css("width",sWidth * (len));

//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$("#focus").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},4000); //此4000代表自动播放的间隔，单位：毫秒
}).trigger("mouseleave");

//显示图片函数，根据接收的index值显示相应的内容
function showPics(index) { //普通切换
var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
}
});

用到的左右切换图片

8. HTML怎么设置点击一张图片换一张图片

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

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

9. html怎样实现图片自动切换

1、首先，打开html编辑器，新建html文件，例如：index.html。

导航:首页 > 动漫图片 > html怎么切换图片

html怎么切换图片

与html怎么切换图片相关的资料