js實(shí)現(xiàn)無(wú)縫滾動(dòng)特效
本文實(shí)例為大家介紹了js實(shí)現(xiàn)無(wú)縫滾動(dòng)特效需要做到的功能,以及關(guān)鍵性js代碼,分享給大家供大家參考,具體內(nèi)容如下
運(yùn)行效果圖:

結(jié)合下學(xué)了的知識(shí),做個(gè)模擬的綜合性擴(kuò)展練習(xí)~~ 大致功能如下:
- 1、點(diǎn)開(kāi)html后,圖片自動(dòng)移動(dòng)展示
- 2、點(diǎn)擊左右方向,可以改變 圖片移動(dòng)的方向(改變left的值,正負(fù))
- 3、鼠標(biāo)移入移出圖片后,圖片暫停移動(dòng)(setInterval,clearInterval)
- 4、鼠標(biāo)移到圖片上,高亮(a:hover)
- 5、點(diǎn)擊小圖, 下面的大圖會(huì)改變
- 6、文字區(qū)域隨著圖片的變化而變化(未成功,有待提高)
具體代碼:
window.onload = function(){
//聲明部分( 現(xiàn)在的習(xí)慣是要寫(xiě)什么聲明什么, 一起寫(xiě)容易搞忘了。。也不知道好不好這樣)
var oDiv = document.getElementById('box');
var oUl = oDiv.getElementsByTagName('ul');
var oLi = oUl.getElementsByTagName('li');
var speed = 2;
var timer = null;
//讓ul的內(nèi)容增一倍,從而實(shí)現(xiàn)無(wú)縫滾動(dòng)
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = oLi[1].offsetWidth * oLi.length + 'px';
//move函數(shù)
function move(){
oUl.style.left = oUl.offsetLeft + speed + 'px';
//控制左
if(oUl.offsetLeft < -oUl.offsetWidth/2){
oUl.style.left = 0;
}
//控制右
if(oUl.offsetLeft > 0){
oUl.style.left = -oUl.offsetWidth/2 + 'px';
}
}
//圖標(biāo)點(diǎn)擊~(yú) 控制移動(dòng)方向
var oLeft = document.getElementById('jt_left');
var oRight= document.getElementById('jt_right');
oLeft.onclick = function(){
speed = -2;
}
oRight.onclick = function(){
speed = 2;
}
//鼠標(biāo)移入移出效果
oDiv.onmouseover = function(){
clearInterval(timer);
}
oDiv.onmouseout = function(){
timer = setInterval(move,20);
}
timer = setInterval(move,20);
//點(diǎn)擊獲取大圖
var aA = oDiv.getElementsByTagName('a');
for(var i=0;i<aA.length;i++){
aA[i].onclick = function(){
showPic(this);
return false;
}
}
function showPic(whichpic){
var source = whichpic.href;
var placeholder = document.getElementById('placeholder');
placeholder.src = source;
}
}
最后文字的替換效果 ,本想用圖片的方式,讓文本框?qū)?yīng)的數(shù)字跟著變~~ 結(jié)果未能成功,不知原因,這方面還需待提高,希望大家能提供一些好的建議,不過(guò)js實(shí)現(xiàn)無(wú)縫滾動(dòng)還是正常實(shí)現(xiàn)了,希望對(duì)大家也能有所幫助。
- jQuery實(shí)現(xiàn)單行文字間歇向上滾動(dòng)源代碼
- jQuery插件實(shí)現(xiàn)無(wú)縫滾動(dòng)特效
- js實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)
- js實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)特效
- 原生javascript實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)效果
- 基于javascript實(shí)現(xiàn)文字無(wú)縫滾動(dòng)效果
- JQuery插件Marquee.js實(shí)現(xiàn)無(wú)縫滾動(dòng)效果
- javascript實(shí)現(xiàn)平滑無(wú)縫滾動(dòng)
- js實(shí)現(xiàn)可控制左右方向的無(wú)縫滾動(dòng)效果
- 簡(jiǎn)單實(shí)現(xiàn)js間歇或無(wú)縫滾動(dòng)效果
相關(guān)文章
JavaScript數(shù)據(jù)類(lèi)型及相互間的轉(zhuǎn)換規(guī)則
這篇文章主要介紹了JavaScript數(shù)據(jù)類(lèi)型及相互間的轉(zhuǎn)換規(guī)則,文章通過(guò)圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-09-09
js arguments,jcallee caller用法總結(jié)
這篇文章主要介紹了js中arguments, jcallee caller用法。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11
JS開(kāi)發(fā)中百度地圖+城市聯(lián)動(dòng)實(shí)現(xiàn)實(shí)時(shí)觸發(fā)查詢(xún)地址功能
這篇文章主要介紹了JS開(kāi)發(fā)中百度地圖+城市聯(lián)動(dòng)實(shí)現(xiàn)實(shí)時(shí)觸發(fā)查詢(xún)地址功能,需要的朋友可以參考下2017-04-04

