版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
打开网页时,图片自动在循环切换,当想仔细查看某一张图片时,停止自动播放,左右提供手动切换按钮,图片也可添加 超链接;
代码为了方便没有外联
<!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>