![如何用css设置网页字体[多图]](/aiimages/%E5%A6%82%E4%BD%95%E7%94%A8css%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93%5B%E5%A4%9A%E5%9B%BE%5D.png)
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）。
你好 这种效果很简单的 采用jquery 然后 假设 另一张图片名叫 a.gif 并且和 depart_info_close.gif存放在同一个文件夹下给a标签新加一个属性 id="a" 然后按照你提供的 html结构 代码如下$(function(){
$("#a").click(function(){
$(this).prev().attr({"src":"a.gif"})
})
})
这样子就好了
代码的意思是 当点击a标签时 寻找与他同级的 并且在他之前的那一个元素 也就是img标签
并且改变 img标签中的 src属性 为 a.gif
希望能帮到你 谢谢
<!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 = 0i <leni++) {
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>
