html图片切换点作用

html图片切换点作用,第1张

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)。

1、首先输入代码:

<div class="wrapper">

<div id="focus">

<ul>

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" alt="QQ商城焦点图效果下载" /></a></li>

2、然后输入代码:

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/02.jpg" alt="QQ商城焦点图效果教程" /></a></li>

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/03.jpg" alt="jquery商城焦点图效果" /></a></li>

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/04.jpg" alt="jquery商城焦点图代码" /></a></li>

3、然后再输入代码:

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/05.jpg" alt="jquery商城焦点图源码" /></a></li>

</ul>

</div>

</div><!-- wrapper end -->

</body>

4、然后就完成了。

<!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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6106833.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-15
下一篇 2023-03-15

发表评论

登录后才能评论

评论列表(0条)

保存