頁面圖片自動滾動
開啟網頁時,圖片自動在迴圈切換,當想仔細檢視某一張圖片時,停止自動播放,左右提供手動切換按鈕,圖片也可新增 超連結;
程式碼為了方便沒有外聯
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
/*css程式碼開始 */
<style>
*{margin:0;padding:0;}
#box1{width:800px;height:400px;margin:50px auto 0;position:relative;}
#imgs{width:800px;height:400px;}
.page{width:50px;height:80px;background-color:rgba(0,0,0,0.2);position:absolute;top:160px;font:20px/80px 'Microsoft YaHei';text-align:center;display:none;color:white;}
#left{left:0;}
#right{right:0;}
#aff{list-style:none;position:absolute;left:210px;bottom:20px;}
#aff li{width:20px;height:20px;float:left;border-radius:50%;margin-left:20px;background-color:gray;text-align:center;font:16px/20px "微軟雅黑";}
/*css程式碼結束 */
</style>
//js原生程式碼
<script type="text/javascript">
//頁面載入完畢執行
window.onload = function(){
//獲取所有標籤物件
var oBox1 = document.getElementById("box1");
var oImgs = document.getElementById("imgs");
var oLeft = document.getElementById("left");
var oRight = document.getElementById("right");
var oLiArr = document.getElementsByTagName("li");
//記錄圖片
var num = 1;
oLiArr[0].style.backgroundColor = "red";
//啟動定時器
var timer = setInterval(run1,2000);
function run1(){
num++;
accoord()
}
function accoord(){
//邊界判斷
if(num==9){
num = 1;
}
else if(num==0){
num = 8;
}
//切換圖片
oImgs.src = "img/faa/" + num + ".jpg";
//重置所有圓點的顏色為灰色
for(var i = 0 ;i < oLiArr.length; i++){
oLiArr[i].style.backgroundColor = "gray";
}
//將目前所選中的圓點設定為紅色
oLiArr[num-1].style.backgroundColor = "red";
}
//滑鼠移入視窗停止滾動
oBox1.addEventListener("mouseover",stopFunc,false);
function stopFunc(){
clearInterval(timer);
oLeft.style.display = "block";
oRight.style.display = "block";
}
//滑鼠移出啟動自動 滾動
oBox1.addEventListener("mouseout",startFunc,false);
function startFunc(){
timer = setInterval(run1,2000);
oLeft.style.display = "none";
oRight.style.display = "none";
}
//滑鼠移入左右按鈕
oLeft.addEventListener("mouseover",pageFunc,false);
oRight.addEventListener("mouseover",pageFunc,false);
function pageFunc(){
clearInterval(timer);
this.style.backgroundColor = "rgba(0,0,0,0.6)";
}
//滑鼠移出左右 按鈕
oLeft.addEventListener("mouseout",noPageFunc,false);
oRight.addEventListener("mouseout",noPageFunc,false);
function noPageFunc(){
this.style.backgroundColor = "rgba(0,0,0,0.2)";
}
//滑鼠單擊左按鈕切換圖片
oLeft.addEventListener("click",function(){
num--;
accoord();
},false);
//滑鼠單擊右按鈕切換圖片
oRight.addEventListener("click",function(){
num++;
accoord();
},false);
//滑鼠移動圓點切換圖片
for(var i = 0;i < oLiArr.length;i++){
oLiArr[i].index = i + 1;
oLiArr[i].addEventListener("mouseover",function(){
clearInterval(timer);
num = this.index;
accoord();
},false);
}
}
</script>
</head>
<--h5-->
<body>
<!--整個盒子-->
<div id="box1">
<img src="img/faa/1.jpg" id="imgs"/>
<!--手動切換上一頁-->
<div id="left" class="page"><</div>
<!--手動切換下一頁-->
<div id="right" class="page">></div>
<!--頁數-->
<ul id="aff">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</body>
</html>
相關文章
- 滑鼠雙擊頁面實現自動滾動效果
- JS圖片自動或者手動滾動效果(支援left或者up)JS
- 遮罩層禁止頁面滾動遮罩
- 禁止頁面滾動的方法
- 頁面滾動偵聽器
- js網頁圖片每日自動更新JS網頁
- 移動端頁面滾動--解決方法
- JS仿QQ空間滑鼠停在長圖片時候圖片自動上下滾動效果JS
- 移動端觸屏拖動頁面滾動效果
- vue 監聽頁面滾動事件Vue事件
- Flutter SingleChildScrollView 滾動頁面FlutterView
- 前端頁面自定義滾動條前端
- js頁面全屏垂直滾動效果JS
- 直播平臺製作,禁止頁面滾動 / 滾動事件穿透事件穿透
- Java——圖片滾動顯示Java
- javascript實現圖片滾動JavaScript
- (轉)jquery圖片左右滾動jQuery
- vue頁面有彈層,禁止頁面滾動Vue
- Vue實現浮動按鈕元件 - 頁面滾動時自動隱藏 - 可拖拽Vue元件
- angular 監聽 Windows 滾動事件 實現頁面滾動載入AngularWindows事件
- 2020 用html jQuery實現廣告輪播圖自動切換 滾動頁面 滑鼠懸浮下標且左右切換圖片HTMLjQuery
- JS圖片滾動(無縫、平滑、上下左右滾動)效果JS
- 關於頁面無限滾動思路
- 禁止頁面Body在後臺滾動
- jQuery圖片無縫滾動效果jQuery
- jQuery 頁面滾動 吸頂 和 吸底jQuery
- 禁止蒙層底部頁面跟隨滾動
- H5頁面滾動阻尼效果實現H5
- Flutter 頁面滾動吸頂詳解(NestedScrollView)FlutterView
- 頁面全屏垂直平滑滾動程式碼例項
- js滑鼠移動實現圖片立體滾動效果JS
- CSS 例項之滾動的圖片欄CSS
- 左右帶有按鈕圖片水平滾動
- PPT幻燈片從自動翻頁設定為手動翻頁技巧圖文教程
- 10行程式碼實現頁面無限滾動行程
- 分享一款jQuery全屏滾動頁面特性案例jQuery
- 高效能滾動 scroll 及頁面渲染優化優化
- CSS例項:翻轉圖片、滾動圖片欄、開啟大門CSS