实例介绍
【实例简介】
【实例截图】
【核心代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#main{
width: 267px;
height: 374px;
margin: 100px auto;
position: relative;
}
#main .scollimg{
width: 267px;
height: 374px;
position: relative;
}
.scollimg img{
width: 267px;
height: 374px;
}
#main .scollimg img{
position: absolute;
top: 0;
left: 0;
}
#main .btn{
width: 267px;
height: 100px;
position: absolute;
top:80px;
left: 0;
}
#main .btn>div{
width: 100px;
height: 220px;
background: #fff;
opacity: 0;
}
#main .btn：hover>div{
opacity: 0.65;
}
#main .btn #btnleft{
position: absolute;
top: 0;
left: 0;
}
#main .btn #btnright{
position: absolute;
top: 0;
right:0;
}
/*左右button里的三角形*/
.triangle{
margin-top: 50px;
width: 0;
height: 0;
border-width:70px 40px;
border-style: solid;
}
#main .btn #btnleft .triangle{
border-color: transparent #ccc transparent transparent;
}
#main .btn #btnright .triangle{
margin-left: 20px;
border-color: transparent transparent transparent #ccc;
}
#main .item{
position: absolute;
bottom: 30px;
left: 100px;
width: 100px;
height: 16px;
}
#main .item span{
width: 16px;
height: 16px;
background: #ccc;
display: inline-block;
border-radius: 50%;
}
#main .item span:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div id="main">
<div class="scollimg">
<img src="img/0503038001546069813.jpg" alt="">
<img src="img/0512514001546062623.jpg" alt="">
<img src="img/0517413001545981618.jpg" alt="">
</div>
<div class="btn">
<div id="btnleft"><div class="triangle"></div></div>
<div id="btnright"><div class="triangle"></div></div>
</div>
<div class="item">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
autoMove('img','span');
}
//轮播图函数
function autoMove(tagImg,tagSpan){
var imgs=document.getElementsByTagName(tagImg);
var spans=document.getElementsByTagName(tagSpan);
//每次轮播后样式
/*轮播到哪个位置，就对哪个位置的图片样式进行设置，首先让所有的图片样式opacity变为0，然后对移动到的位置的样式进行设置opacity为1*/
function InitMove(index){
for(var i=0;i<imgs.length;i ){
imgs[i].style.opacity='0';
spans[i].style.background='#ccc';
}
imgs[index].style.opacity='1';
spans[index].style.background='red';
}
//第一次初始化
InitMove(0);
//轮播过程的变换函数
/*前面已经初始化了图片最开始看到的效果，接着轮播的话会隐藏第一张出现第二张
*这里count从1开始（图片的初始化位置是count为0的情况），count=1执行一次Init*Move(count),使第一张隐藏第二张出现，依次执行。当count==imgs.leghth时由于*图片最后一张的位置是imgs.length-1,所以此时把count置为0；相当于轮播图轮回
*依次重新开始。
*/
var count=1;
function fMove(){
if(count==imgs.length){
count=0;
}
InitMove(count);
count ;
}
//设置自动轮播定时器；
var scollMove=setInterval(fMove,2500);
//点击移动图片；
/*这里就是点击左右移动的button来让图片根据用户的点击左右移动；需要注意一点就*是每次点击左移动或右移动需要首先清除定时器，等移动完了在重新添加定时器不然的*话你点击移动后图片虽然该变了，但是由于定时器还没移动到这张图片上面，所以就需*要等待定时器移动到你移动到的那张图片上面让后才开始定时轮播。比如如果你从开始
*就点击移动图片，一直移动到最后一张那么你就要等待两个定时器的时间才能看到自动*轮播。
*/
var btnleft=document.getElementById('btnleft');
var btnright=document.getElementById('btnright');
btnleft.onclick=function(){
clearInterval(scollMove);
if(count==0){
count=imgs.length;
}
count--;
InitMove(count);
scollMove=setInterval(fMove,2500);
};
btnright.onclick=function(){
clearInterval(scollMove);
fMove();
scollMove=setInterval(fMove,2500);
}
}
</script>
</body>
</html>
标签： Javascript 轮播图
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论