這次寫的是滾動字體，首先我的附上代碼：
offsetWidth:width+padding+border的值。
offsetLeft:獲取當前對象與父元素之間的距離.
scrollLeft：是該對象實現的內容與實際內容的距離，即當前滾動的距離。
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth;
如果字體已經滾出的長度大於scroll_end的原長度，就要使其減掉scroll_begin的長度，即復原。（因爲這三者的長度都一樣).
MyMar = setInterval(Marquee,speed);
即每過speed毫秒，實行一次這個函數。
clearInterval(MyMar);
即清除這個設置的timeout。
HTML代碼：
<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<span id="welcome">
歡迎光臨本網站，你想要的這裏都有哦!
</span>
</div>
<div id="scroll_end">
</div>
</div >
js代碼：
function ScrollImgLeft(){
var speed=50;
var MyMar = null;
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML;
function Marquee(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth;
else
scroll_div.scrollLeft++;
}
var MyMar=setInterval(Marquee,speed);
scroll_div.onmouseover = function(){
clearInterval(MyMar);
}
scroll_div.onmouseout = function(){
MyMar = setInterval(Marquee,speed);
}
}
function ScrollImgLeft(){
var speed=50;
var MyMar = null;
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML;
function Marquee(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth;
else
scroll_div.scrollLeft++;
}
var MyMar=setInterval(Marquee,speed);
scroll_div.onmouseover = function(){
clearInterval(MyMar);
}
scroll_div.onmouseout = function(){
MyMar = setInterval(Marquee,speed);
}
}
圖片滾動：圖片滾動跟上面差不多，特別的是如果是循環無縫滾動的話，要將ul的innerHTML設置爲原來的兩倍，這樣在最後的出現時，第一個可以無縫銜接在最後一個後面。參考網址：http://www.jb51.net/article/78342.htm
var oDiv = document.getElementById('scroll');
var oUl = document.getElementById('ul1');
var speed = -1300;
var oLi= document.getElementsByTagName('li');
oUl.style.width = oLi.length*1300+'px';
function move(){
if(oUl.offsetLeft<=-(oUl.offsetWidth*3/4)){
oUl.style.left = 0;
}
else{
oUl.style.left = oUl.offsetLeft + speed + 'px';
}
}
var timer = setInterval(move,3000);//全局變量 ，保存返回的定時器
oDiv.addEventListener('mouseout', function () {
timer = setInterval(move,3000);
},false);
oDiv.addEventListener('mousemove', function () {
clearInterval(timer);//鼠標移入清除定時器
},false);
右擊出現自定義菜單：
代碼：
e.clientX：被觸發時鼠標指針向對於瀏覽器頁面(或客戶區)的水平座標。 客戶區指的是當前窗口。
function click_right(){
var wrap = document.getElementById('wrapper');
wrap.style.display = 'none';
document.getElementById("form1").oncontextmenu = function(event){
var e = event || window.event;
wrap.style.display = "block";
wrap.style.left = e.clientX+'px';
wrap.style.top = e.clientY +'px';
return false;//取消右鍵點擊的默認事件
}
document.getElementById("form1").οnclick= function(e){
if(e.button==2)
{
wrap.style.display = 'block';
}
if(e.button==0)
{
wrap.style.display = 'none';
}
}
}
特別要注意的是，要讓出現的菜單漂浮在div上，要將該div的position設置爲relative，菜單的position設置爲absolute。
最後就是實現點擊上、下一張圖片相應的變化，懸浮在響應的數字上圖片也變化，鼠標移開，圖片自動滾動，首先附上參考網址：https://blog.csdn.net/q908555281/article/details/70314080
附上我的代碼：
html代碼：
<div id="wrapper">
<div id="imgs">
<ul>
<li><a href=""><img src="./image/coin.jpg" alt=""></a></li>
<li><a href=""><img src="./image/coin1.jpg" alt=""></a></li>
<li><a href=""><img src="./image/coin2.jpg" alt=""></a></li>
<li><a href=""><img src="./image/coin3.png" alt=""></a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a class="current">1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ul>
</div>
<div id="previous"><</div>
<div id="next">></div>
</div>
js代碼：
function scroll(){
var imgs_div=document.getElementById("imgs");
var nav_div=document.getElementById("nav");
//獲取到圖片輪播的ul對象數組
var imgsUl=imgs_div.getElementsByTagName("ul")[0];
imgsUl.style.left="0";
//獲取到遠點的ul對象數組
var nav=nav_div.getElementsByTagName("ul")[0];
//上一個
var previous=document.getElementById("previous");
//下一個
var next =document.getElementById("next");
var index=1;
function btnShow(cur_index){
var list=nav.children;
for(var i=0;i<nav.children.length;i++){
nav.children[i].children[0].className="hidden";
}
nav.children[cur_index-1].children[0].className="current";
}
var animTimer;
previous.οnclick=function(){
index-=1;
if(index<1){
index=4;
}
animate(1280);
btnShow(index);
}
next.οnclick=function(){
index+=1;
if(index>4){
index=1;
}
animate(-1280);
btnShow(index);
}
function animate(offset){
var newLeft=parseInt(imgsUl.offsetLeft)+offset;
if(newLeft>0){ //如果圖片已經右滾到第一張，讓它回到倒數第一張
show(-3840);
}else if(newLeft<-3840){ //如果圖片已經左滾到最後一張，讓它回到第一張
show(0);
}else{
show(newLeft);
}
}
function show(offset)
{
imgsUl.style.left=offset+"px";
}
var timer;
function play(){
timer=setInterval(function(){
next.onclick();
},2000)
}
function initImgs(cur_index){ //點擊上下或數字，不需要自動播放
clearInterval(timer);
clearInterval(animTimer);
var off=cur_index*1280;
imgsUl.style.left=-off+"px";
}
for(var i=0;i<nav.children.length;i++){
nav.children[i].index=i;
var sd=nav.children[i].index;
nav.children[i].οnmοuseοver=function(){
var now_index=this.index;
//這裏很重要，要讓當前的圖片的index的值等於鼠標選中的圖片
index=this.index+1;
initImgs(this.index);
btnShow(this.index+1);
}
nav.children[i].οnmοuseοut=function(){
play();
}
}
}
好了，就是這些了，我也不知道最後會不會被採取。