banner轮播图
来源:互联网 发布:数据删除恢复软件 编辑:程序博客网 时间:2024/06/05 10:23
html样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="banner">
<div class="img_box">
<img class="select" src="img/banner1.jpg" alt="" />
<img src="img/banner2.jpg" alt="" />
图片来源自己设置
<img src="img/banner3.jpg" alt="" />
<img src="img/banner4.jpg" alt="" />
</div>
<ul class="num">
<li class="select"></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:;" class="banner_left"></a>
<a href="javascript:;" class="banner_right"></a>
</div>
</body>
<script src="js/js.js"></script>
</html>
***********************css样式**********************************************************************************
*{
margin:0;
padding:0;
}
ul{list-style: none;}
#banner{
width: 1000px;
height: 400px;
border:1px solid #ccc;
margin: 50px auto;
position: relative;
}
.img_box{
width:1000px;
height:400px;
}
.img_box img{
width:100%;
height:100%;
display: none;
}
.img_box img.select{
display: block;
}
.num{
position: absolute;
width: 160px;
height:30px;
right:20px;
bottom: 20px;
}
.num li{
float:left;
width:20px;
height:20px;
margin-right:20px;
background: #ccc;
border-radius: 50%;
}
.num li.select{
background: orange;
}
a{
width: 30px;
height:50px;
background:url(../img/pre.png);
position:absolute;
top:50%;
margin-top:-35px;
opacity: 0.4;
}
.banner_right{
right: 0;
background-position:-50px 0;
}
a.select{
opacity: 1;
}
*****************************js************************************************************************
var oBanner=document.getElementById("banner");
var aImgs=document.getElementsByTagName("img");
var aLis=document.getElementsByTagName("li");
var bannerRight=document.getElementsByClassName("banner_right")[0];
console.log(bannerRight)
var bannerLeft=document.getElementsByClassName("banner_left")[0];
function change(n){
for(var i=0;i<aLis.length;i++){
aLis[i].className="";
aImgs[i].className="";
}
aLis[n].className="select";
aImgs[n].className="select";
}
var step=0;
//选项点击
for(var i=0;i<aLis.length;i++){
aLis[i].index=i;
aLis[i].onclick=function(){
change(this.index);
step=this.index;
}
}
//右点击
bannerRight.onclick=fn;
function fn(){
console.log("hah")
step++;
if(step>3){
step=0;
}
change(step);
}
bannerLeft.onclick=function(){
step--;
if(step<0){
step=3;
}
change(step);
}
var timer=window.setInterval(fn,1000);
oBanner.onmouseover=function(){
window.clearInterval(timer);
bannerLeft.className="banner_left select";
bannerRight.className="banner_right select";
}
oBanner.onmouseout=function(){
timer=window.setInterval(fn,1000);
bannerLeft.className="banner_left";
bannerRight.className="banner_right";
}
- 轮播图banner
- banner轮播图
- banner轮播图
- banner轮播图
- Banner轮播图
- Banner轮播图
- Banner轮播图
- Banner轮播图
- Banner轮播图
- Banner轮播图
- Banner轮播图
- banner轮播图
- Banner 轮播图
- 左右轮播图,banner
- banner轮播图的实现
- Banner (android 轮播图)
- banner—轮播图
- appframework实现Banner轮播图
- Unity 文件复制工具
- S5PV210开发系列五 sd卡驱动实现
- C++嵌入lua脚本
- thinkphp引入 阿里大于短信平台
- Cygwin下vim配置
- banner轮播图
- 所有元素遍历
- html的空格显示距离问题
- 算法导论学习笔记-2
- 基于GOLDENGATE构建在线报表系统--模式1
- odi 1.7--补丁--关于数据是10的整数倍时往essbase送数报错
- Myeclipse中的发布项目到服务器的按钮,点击没有反应了
- 小米净水器
- Leetcode_3