js實現(xiàn)無縫滾動特效
本文實例為大家介紹了js實現(xiàn)無縫滾動特效需要做到的功能,以及關(guān)鍵性js代碼,分享給大家供大家參考,具體內(nèi)容如下
運(yùn)行效果圖:
結(jié)合下學(xué)了的知識,做個模擬的綜合性擴(kuò)展練習(xí)~~ 大致功能如下:
- 1、點(diǎn)開html后,圖片自動移動展示
- 2、點(diǎn)擊左右方向,可以改變 圖片移動的方向(改變left的值,正負(fù))
- 3、鼠標(biāo)移入移出圖片后,圖片暫停移動(setInterval,clearInterval)
- 4、鼠標(biāo)移到圖片上,高亮(a:hover)
- 5、點(diǎn)擊小圖, 下面的大圖會改變
- 6、文字區(qū)域隨著圖片的變化而變化(未成功,有待提高)
具體代碼:
window.onload = function(){ //聲明部分( 現(xiàn)在的習(xí)慣是要寫什么聲明什么, 一起寫容易搞忘了。。也不知道好不好這樣) var oDiv = document.getElementById('box'); var oUl = oDiv.getElementsByTagName('ul'); var oLi = oUl.getElementsByTagName('li'); var speed = 2; var timer = null; //讓ul的內(nèi)容增一倍,從而實現(xiàn)無縫滾動 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)擊~ 控制移動方向 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é)果未能成功,不知原因,這方面還需待提高,希望大家能提供一些好的建議,不過js實現(xiàn)無縫滾動還是正常實現(xiàn)了,希望對大家也能有所幫助。
相關(guān)文章
JavaScript使用Promise實現(xiàn)并發(fā)請求數(shù)限制
本文主要介紹了JavaScript使用Promise實現(xiàn)并發(fā)請求數(shù)限制,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04用html+css+js實現(xiàn)的一個簡單的圖片切換特效
這篇文章主要介紹了用html+css+js實現(xiàn)的一個簡單的圖片切換特效,需要的朋友可以參考下2014-05-05canvas+gif.js打造自己的數(shù)字雨頭像的示例代碼
本篇文章主要介紹了canvas+gif.js打造自己的數(shù)字雨頭像的示例代碼,這里整理了詳細(xì)的代碼,非常具有實用價值,需要的朋友可以參考下2017-10-10AutoJs4.4.1免費(fèi)版快速接通vscode調(diào)試腳本的操作方法
這篇文章主要介紹了AutoJs4.4.1免費(fèi)版快速接通vscode進(jìn)行調(diào)試腳本,首先下載AutoJs并安裝,下載完成后,將2個apk文件拷貝到手機(jī)安裝即可,接下來需要安裝插件,本文分步驟給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10