JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果。
比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。
JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。
扩展资料：
能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表）。
JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的，只要你有创意。
我修改测试通过一个。但是有个问题。若改成鼠标悬停边缘滚下去，也就是onMouseOver。是停不下来的，会一直滚下去，因为无论怎么样都是鼠标碰触事件。所以我强烈建议用点击事件,onclick。js css image都是调用的。我都写到页面里了，你自己改下。图片地址我没改。本地测试的。自己换成你的图片。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<title>图片展示特效</title>
<style>
body{ margin:20px autowidth:100%height:auto}
#dHomePageCarousel {
height:221px
width:670px
position:relative
margin:40px auto
}
#dLocalHomesCarousel {
height:131px
margin:0px 2px 3px 1px
overflow:hidden
position:relative
}
.divCarouselInfo {
color:#3C404E
font-size:12px
width:639px
height:64px
line-height:16px
margin-right:15px
padding-top:10px
position:relative
}
.imgBorder{
border:2px solid #fff
position:absolute
cursor:pointer
}
.imgBorder:hover {
border:2px solid #FFAA55
cursor:pointer
position:absolute
}
.btnCarouselLT {
background:url("../images/btn_nav_carousel.png") no-repeat scroll left top transparent
display:block
height:41px
overflow:hidden
position:absolute
cursor:pointer
top:17px
width:40px
}
.btnCarouselRT {
background:url("../images/btn_nav_carousel.png") no-repeat scroll right top transparent
display:block
height:41px
overflow:hidden
position:absolute
cursor:pointer
top:17px
width:40px
}
img {
border:medium none
}
.author{ width:700pxmargin:0 autoheight:autotext-align:center}
</style>
</head>
<body onLoad="clearInterval(autoplay)">
<!-- 头开始 -->
<!-- 滚动房源广告开始 -->
<div id="dHomePageCarousel" style="padding-left:15px">
<div id=dLocalHomesCarousel>
<img id="imgSmallLeft" class="imgBorder" style="height:50pxwidth:70pxleft:10pxbottom:5px" onClick="clearInterval(autoplay)moveD('l')"/>
<img id="imgMiddleLeft" class="imgBorder" style="height:75pxwidth:100pxleft:110pxbottom:5px" onClick="clearInterval(autoplay)move('l')"/>
<img id="imgBig" class="imgBorder" style="height:105px width:140pxleft:240pxbottom:5px" onClick="openNewPage()"/>
<img id="imgMiddleRight" class="imgBorder" style="height:75pxwidth:100px left:410px bottom:5px" onClick="clearInterval(autoplay)move('r')"/>
<img id="imgSmallRight" class="imgBorder" style="width:70pxheight:50pxleft:540pxbottom:5px" onClick="clearInterval(autoplay)moveD('r')"/>
<img id="imgHidden" class="imgBorder" style="width:10pxheight:10pxleft:-90pxbottom:5px"/>
</div>
<script type="text/javascript">
function AdItem(Photo,url) {
this.Photo = Photo
this.url = url
}
var ad = new Array()
ad[0] = new AdItem('images/1.jpg','#')ad[1] = new AdItem('images/2.jpg','#')ad[2] = new AdItem('images/3.jpg','#')ad[3] = new AdItem('images/4.jpg','#')ad[4] = new AdItem('images/5.jpg','#')ad[5] = new AdItem('images/6.jpg','#')
var img = new Array()
img[0] = document.getElementById("imgSmallLeft")
img[1] = document.getElementById("imgMiddleLeft")
img[2] = document.getElementById("imgBig")
img[3] = document.getElementById("imgMiddleRight")
img[4] = document.getElementById("imgSmallRight")
img[5] = document.getElementById("imgHidden")
var position = 0
for(i=0i<img.lengthi++){
img[i].src = ad[i].Photo
}
var cur = 2
adname.href = ad[2].url
</script>
</div>
<script type="text/javascript">
function roll(direction){
var imgLength = img.length
var dataLength = ad.length
var start = position
if('r' == direction){
for(var i=0i<imgLengthi++){
start = start + 1
if(start >(dataLength-1))
start = start - dataLength
img[i].src = ad[start].Photo
}
position = position + 1
if(position >(dataLength-1))
position = position - dataLength
}
if('l' == direction){
var a = true
for(var i=0i<imgLengthi++){
if(a){
start = start - 1
if(start <0){
start = start + dataLength
a = false
}
if(start <(dataLength-1)){
a = false
}
}else{
start = start + 1
if(start >(dataLength-1)){
start = start - dataLength
a = true
}
}
//alert(position + " === " + i + " === " + start)
img[i].src = ad[start].Photo
if(start == (dataLength-1)){
start = -1
}
}
position = position - 1
if(position <0)
position = position + dataLength
}
}
function right(){
i++
var img0H = parseFloat(img[0].style.height)
var img0W = parseFloat(img[0].style.width)
var img0L = parseFloat(img[0].style.left)
var img1H = parseFloat(img[1].style.height)
var img1W = parseFloat(img[1].style.width)
var img1L = parseFloat(img[1].style.left)
var img2H = parseFloat(img[2].style.height)
var img2W = parseFloat(img[2].style.width)
var img2L = parseFloat(img[2].style.left)
var img3H = parseFloat(img[3].style.height)
var img3W = parseFloat(img[3].style.width)
var img3L = parseFloat(img[3].style.left)
var img4H = parseFloat(img[4].style.height)
var img4W = parseFloat(img[4].style.width)
var img4L = parseFloat(img[4].style.left)
var img5H = parseFloat(img[5].style.height)
var img5W = parseFloat(img[5].style.width)
var img5L = parseFloat(img[5].style.left)
//解决IE兼容性问题
if(navigator.userAgent.indexOf("MSIE")>0 &&i%2==0) {
img1W = img1W + 1
img2H = img2H + 1
img2L = img2L + 1
img3H = img3H + 1
img3L = img3L + 1
img4L = img4L + 1
img4W = img4W + 1
}
img[0].style.height = (img0H - 2).toString() + "px"
img[0].style.left = (img0L - 5).toString() + "px"
img[0].style.width = (img0W - 3).toString() + "px"
img[1].style.height = (img1H - 1).toString() + "px"
img[1].style.left = (img1L - 5).toString() + "px"
img[1].style.width = (img1W - 1.5).toString() + "px"
img[2].style.height = (img2H - 1.5).toString() + "px"
img[2].style.left = (img2L - 6.5).toString() + "px"
img[2].style.width = (img2W - 2).toString() + "px"
img[3].style.height = (img3H + 1.5).toString() + "px"
img[3].style.left = (img3L - 8.5).toString() + "px"
img[3].style.width = (img3W + 2).toString() + "px"
img[4].style.height = (img4H + 1).toString() + "px"
img[4].style.left = (img4L - 6.5).toString() + "px"
img[4].style.width = (img4W + 1.5).toString() + "px"
img[5].style.height = (img5H + 2).toString() + "px"
img[5].style.left = (img5L - 5).toString() + "px"
img[5].style.width = (img5W + 3).toString() + "px"
//alert(img[1].style.width)
if(i>19){
clearInterval(hide)
reset()
roll('r')
isRunning = 'false'
}
}
function left(){
i++
var img0H = parseFloat(img[0].style.height)
var img0W = parseFloat(img[0].style.width)
var img0L = parseFloat(img[0].style.left)
var img1H = parseFloat(img[1].style.height)
var img1W = parseFloat(img[1].style.width)
var img1L = parseFloat(img[1].style.left)
var img2H = parseFloat(img[2].style.height)
var img2W = parseFloat(img[2].style.width)
var img2L = parseFloat(img[2].style.left)
var img3H = parseFloat(img[3].style.height)
var img3W = parseFloat(img[3].style.width)
var img3L = parseFloat(img[3].style.left)
var img4H = parseFloat(img[4].style.height)
var img4W = parseFloat(img[4].style.width)
var img4L = parseFloat(img[4].style.left)
var img5H = parseFloat(img[5].style.height)
var img5W = parseFloat(img[5].style.width)
var img5L = parseFloat(img[5].style.left)
//解决IE兼容性问题
if(navigator.userAgent.indexOf("MSIE")>0 &&i%2==0) {
img0W = img0W + 1
img1H = img1H + 1
img1L = img1L + 1
img2H = img2H + 1
img2L = img2L + 1
img3L = img3L + 1
img3W = img3W + 1
}
img[0].style.height = (img0H + 1).toString() + "px"
img[0].style.left = (img0L + 5).toString() + "px"
img[0].style.width = (img0W + 1.5).toString() + "px"
img[1].style.height = (img1H + 1.5).toString() + "px"
img[1].style.left = (img1L + 6.5).toString() + "px"
img[1].style.width = (img1W + 2).toString() + "px"
img[2].style.height = (img2H - 1.5).toString() + "px"
img[2].style.left = (img2L + 8.5).toString() + "px"
img[2].style.width = (img2W - 2).toString() + "px"
img[3].style.height = (img3H - 1).toString() + "px"
img[3].style.left = (img3L + 6.5).toString() + "px"
img[3].style.width = (img3W - 1.5).toString() + "px"
img[4].style.height = (img4H - 2).toString() + "px"
img[4].style.left = (img4L + 5).toString() + "px"
img[4].style.width = (img4W - 3).toString() + "px"
img[5].style.height = (img5H + 2).toString() + "px"
img[5].style.left = (img5L + 5).toString() + "px"
img[5].style.width = (img5W + 3).toString() + "px"
//alert(img[1].style.left)
if(i>19){
clearInterval(hide)
reset()
roll('l')
isRunning = 'false'
}
}
var isRunning
function move(direction){
//alert(isRunning)
if(isRunning != 'udefined' &&isRunning == 'true')
return
frequency = 20
if(navigator.userAgent.indexOf("MSIE")>0) {
frequency = 15
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
frequency = 20
}
i = 0
if(direction == 'r'){
cur = cur + 1
img[5].style.left = "640px"
hide = setInterval("right()", frequency)
isRunning = 'true'
}
if(direction == 'l'){
cur = cur - 1
img[5].style.left = "-90px"
var pos = position - 1
if(pos <0)
pos = pos + ad.length
img[5].src = ad[pos].Photo
hide = setInterval("left()", frequency)
isRunning = 'true'
}
if(cur >(ad.length - 1))
cur = 0
if(cur <0)
cur = ad.length - 1
//alert(cur)
adname.href = ad[cur].url
if(navigator.userAgent.indexOf("Firefox")>0){
adname.textContent = ad[cur].name
adtel.textContent = ad[cur].phone
adaddr.textContent = ad[cur].address
adprice.textContent = ad[cur].price
adtime.textContent = ad[cur].time
} else {
adname.innerText = ad[cur].name
adtel.innerText = ad[cur].phone
adaddr.innerText = ad[cur].address
adprice.innerText = ad[cur].price
adtime.innerText = ad[cur].time
}
}
function moveC(direction){
if(isRunning != 'true'){
move(direction)
clearInterval(movec)
}
}
function moveD(direction){
move(direction)
if('r' == direction){
movec = setInterval("moveC('r')",5)
} else {
movec = setInterval("moveC('l')",5)
}
}
function reset(){
img[0].style.width = "70px"
img[0].style.height = "50px"
img[0].style.left = "10px"
img[1].style.width = "100px"
img[1].style.height = "75px"
img[1].style.left = "110px"
img[2].style.width = "140px"
img[2].style.height = "105px"
img[2].style.left = "240px"
img[3].style.width = "100px"
img[3].style.height = "75px"
img[3].style.left = "410px"
img[4].style.width = "70px"
img[4].style.height = "50px"
img[4].style.left = "540px"
img[5].style.width = "10px"
img[5].style.height = "10px"
img[5].style.left = "-90px"
}
autoplay = setInterval("move('r')",2000)
function openNewPage(){
window.open(ad[cur].url)
}
</script>
<!-- 滚动房源广告结束 -->
</body>
</html>
