快捷导航
 
H5+Css+Js制作banner轮播图
VIEW CONTENTS
-推马SEO 门户 SEO知识 查看内容

H5+Css+Js制作banner轮播图

2018-9-30 22:12| 发布者: relaxing| 查看: 1348| 评论: 0
摘要: 直接上代码:<!DOCTYPEHTML><html><head><metacharset="utf-8"/><title></title><metaname="viewport"content="width=device-width,initial-scale=1"><styleid="css">body,ul,ol{margin:0;padding:0;list-style:none ...

直接上代码:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style id="css">

body,ul,ol{

margin: 0;padding: 0;list-style: none;

}

.box{width: 800px;margin: 50px auto;}

.pickList{width:800px;height:360px;overflow: hidden;position: relative;cursor: pointer;}

#btn{padding: 50px;height: 30px;position: relative;}

#btn li{width: 30px;height: 30px;background: #000;color: #fff;text-align: center;float: left;margin: 0 10px;border-radius: 50%;}

#btn li:hover:not(.active){cursor: pointer;}

#btn .active{background: #f60;cursor: pointer;}

</style>

<script type="text/javascript">

//首先我们要获取到他们,便于接下来操作

window.onload=init;

var index=1;

var Lis=document.getElementsByTagName("li");

var Img;

//定时器(需要定义的函数,它的毫秒数)

var timer;

function init(){

timer=setInterval("lunbo()",1800);

//点击小圆点切换图片到指定位置

for (var i=0;i<Lis.length;i++) {

Lis[i].onclick = function(){

clearInterval(timer);

index = this.innerHTML;

//var Img=document.getElementById("img");

Img.src="Image/"+index+".jpg";

resetColor();

Lis[index-1].style.background = "#f60";

timer = setInterval("lunbo()",1800);

}

}

}

//利用定时器使图片达到轮播效果

function lunbo(){

index++;

resetColor();

if(index == 5){

index=1;

}

Img=document.getElementById("img");

Img.src="Image/"+index+".jpg";

//var Lis=document.getElementsByTagName("li");

Lis[index-1].style.background="#f60";

}

//小原点初始值颜色(定义函数,在定时器去调用它)

function resetColor(){

//var Lis=document.getElementsByTagName("li");

for(var i=0;i<Lis.length;i++){

Lis[i].style.background="rgba(0,0,0,1)";

}

}

//鼠标移入和移出

function stop(){

clearInterval(timer);

}

function start(){

//变量作用域,因为这边已经给它清除了,所以必须重新声明它.

timer=setInterval("lunbo()",1800);

}

</script>

</head>

<body">

<div class="box">

<div id="banner" class="pickList" onmouseover="stop()" onmouseout="start()">

<img id="img" src="Image/1.jpg" alt="" >

</div>

<ol id="btn">

<li id="li1" class="active" >1</li>

<li id="li2">2</li>

<li id="li3">3</li>

<li id="li4">4</li>

</ol>

</div>

</body>

</html>


鲜花

握手

雷人

路过

鸡蛋

最新评论

VR视频更多
周排行

让创业更简单

  • 反馈建议:service_media@36kr.com
  • 客服电话:
  • 工作时间:周一到周五

云服务支持

精彩文章,快速检索

关注我们

Copyright 推马SEO-SEO网络推广|优化排名|SEO教程-seo站长论坛  Powered by©  技术支持: