【js】【分享】轮播图实现
一直想学习轮播图，于是找了个视频学习了下。不过移动的效果没有实现，没有那个教程里的src文件。只能放弃。有点小遗憾。图片大家就自己找找吧。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
/*设置outer的样式 宽度加20*/
#outer{
width: 311px;
height: 387px;
margin: 50px auto;
background-color:orange;
padding: 10px 0;
position: relative;
overflow: hidden;
}
/*设置ingList*/
#imgList{
list-style: none;
position: absolute;
left: 0px;
}
#imgList li{
float: left;
margin: 0 10px;
}
#navdiv{
/*开启绝对定位*/
position: absolute;
bottom: 15px;
}
#navdiv a{
float: left;
background-color: red;
width: 15px;
height: 15px;
margin: 0 5px;
opacity: 0.5;
/*兼容ie8*/
filter:alpha(opacity=50);
}
#word{
width: 100px;
height: 100px;
background-color: white;
margin: 0 630px;
position: absolute;
top: 460px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var imgList=document.getElementById("imgList");
var imgArr=document.getElementsByTagName("img");
imgList.style.width=311*imgArr.length+"px";
// 设置导航按钮居中
var navdiv=document.getElementById("navdiv");
var outer=document.getElementById("outer");
navdiv.style.left=(outer.offsetWidth-navdiv.offsetWidth)/2+"px";
//默认显示图片索引
var index=0;
var allA=document.getElementsByTagName("a");
allA.style.backgroundColor="black";
//连接链接切换图片
//为所有连接绑定函数
for(var i=0;i<allA.length;i++){
//为每一个超链接都添加num属性
allA.num=i;
allA.onclick=function(){
index = this.num;
//alert(index);
setA();
imgList.style.left=-311*index+"px";
};
//创建一个方法用来设置选中的a；
}
autoChange();
function setA(){
for(var i=0;i<allA.length;i++){
allA.style.backgroundColor="";
}
allA.style.backgroundColor="black";
}
function autoChange(){
setInterval(function(){
index++;
index%=imgArr.length;
setA();
imgList.style.left=-311*index+"px";
},1000);
}
};
</script>
</head>
<body>
<div id="outer">
<ul id="imgList">
<li><img src="./image/兮1.jpg" alt=""></li>
<li><img src="./image/兮2.jpg" alt=""></li>
<li><img src="./image/兮3.jpg" alt=""></li>
</ul>
<div id="navdiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
<div id="word">
<h1>本兮</h1>
</div>
</body>
</html> 这是用在啥地方的轮播图？ 本兮 是不是自杀了 .. 瑞浩娱乐 发表于 2018-9-20 17:59
这是用在啥地方的轮播图？
网页上的呀！ Vvvvvoid 发表于 2018-9-20 18:25
本兮 是不是自杀了 ..
嗯，是的。去天堂唱歌去了。 求轮播视频 巨无霸 发表于 2018-9-21 14:06
求轮播视频
链接: https://pan.baidu.com/s/1yyhb1Mw5shC0g_b_DBpNyw 提取码: pm6b 里面自己找吧。 没看懂，还是感谢楼主的分享 能作为背景图片，然后自动播放吗 leewei0923 发表于 2020-7-22 16:55
能作为背景图片，然后自动播放吗
背景图片有点悬。
页:
[1]
2