jquery---网易轮播图
来源:互联网 发布:青岛seo公司排行 编辑:程序博客网 时间:2024/05/19 08:03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
/*全局样式*/
*{padding: 0px;
margin:0px;
}
ul,li{list-style-type: none;}
img{vertical-align: top;}
.box{width:310px;
height:220px;
margin:40px auto;
position:relative;
overflow:hidden;
}
/*content样式*/
.content{width:2180px;
height:210px;
position: absolute;
left:0px;
top:0px;
}
li{float:left;}
.left{position:absolute;
left:0px;
top:50%;
width:40px;
height:40px;
background:#ccc;
margin-top: -20px;
text-align: center;
line-height: 40px;
cursor:pointer;
display:none;
}
.right{position:absolute;
right:0px;
top:50%;
width:40px;
height:40px;
background:#ccc;
margin-top: -20px;
text-align: center;
line-height: 40px;
cursor:pointer;
display:none;
}
/*圆圈*/
.circle{width:100%;
height:40px;
position:absolute;
left:0px;
bottom:0px;
background:rgba(255,255,255,0.4);
}
.circle ul{width:100%;
height:40px;
margin-left: 40px;
}
.circle li{width:20px;
height:20px;
border-radius:10px;
background:#000;
margin:8px 5px;
cursor:pointer;
}
.circle .active{background:red;}
</style>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="box">
<ul class="content">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
<li><img src="7.jpg" alt=""></li>
</ul>
<div class="left"><<</div>
<div class="right">>></div>
<div class="circle">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<!-- <script src="1.js"></script> -->
<script type="text/javascript">
var index=0;
var b=0;
var num=0;
var dsq;
$(".box").hover(function(){
$(".left").show();
$(".right").show();
window.clearInterval(dsq);
},function(){
$(".left").hide();
$(".right").hide();
dsq=setInterval("stat()",2000);
});
$(".circle li").mouseover(function(){
index=$(this).index();
b=index;
$(this).addClass("active").siblings().removeClass("active");
abc(index);
$(".content").stop().animate({"left":-num*310+"px"});
$(".circle li").eq(num).addClass("active").siblings().removeClass("active");
b++;
if(b>6){
b=0;
}
abc(b);
b--;
if(b<0){
b=6;
}
abc(b);
});
//定时器函数
$(function(){
dsq=setInterval("stat()",2000);
});
function stat(){
num++;
if(num==7){
num=0;
}
abc(num);
b=num;
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
/*全局样式*/
*{padding: 0px;
margin:0px;
}
ul,li{list-style-type: none;}
img{vertical-align: top;}
.box{width:310px;
height:220px;
margin:40px auto;
position:relative;
overflow:hidden;
}
/*content样式*/
.content{width:2180px;
height:210px;
position: absolute;
left:0px;
top:0px;
}
li{float:left;}
.left{position:absolute;
left:0px;
top:50%;
width:40px;
height:40px;
background:#ccc;
margin-top: -20px;
text-align: center;
line-height: 40px;
cursor:pointer;
display:none;
}
.right{position:absolute;
right:0px;
top:50%;
width:40px;
height:40px;
background:#ccc;
margin-top: -20px;
text-align: center;
line-height: 40px;
cursor:pointer;
display:none;
}
/*圆圈*/
.circle{width:100%;
height:40px;
position:absolute;
left:0px;
bottom:0px;
background:rgba(255,255,255,0.4);
}
.circle ul{width:100%;
height:40px;
margin-left: 40px;
}
.circle li{width:20px;
height:20px;
border-radius:10px;
background:#000;
margin:8px 5px;
cursor:pointer;
}
.circle .active{background:red;}
</style>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="box">
<ul class="content">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
<li><img src="7.jpg" alt=""></li>
</ul>
<div class="left"><<</div>
<div class="right">>></div>
<div class="circle">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<!-- <script src="1.js"></script> -->
<script type="text/javascript">
var index=0;
var b=0;
var num=0;
var dsq;
$(".box").hover(function(){
$(".left").show();
$(".right").show();
window.clearInterval(dsq);
},function(){
$(".left").hide();
$(".right").hide();
dsq=setInterval("stat()",2000);
});
$(".circle li").mouseover(function(){
index=$(this).index();
b=index;
$(this).addClass("active").siblings().removeClass("active");
abc(index);
});
// 动画函数
function abc(num){$(".content").stop().animate({"left":-num*310+"px"});
$(".circle li").eq(num).addClass("active").siblings().removeClass("active");
}
//点击右侧函数
$(".right").click(function(){b++;
if(b>6){
b=0;
}
abc(b);
});
//点击左侧函数
$(".left").click(function(){b--;
if(b<0){
b=6;
}
abc(b);
});
//定时器函数
$(function(){
dsq=setInterval("stat()",2000);
});
function stat(){
num++;
if(num==7){
num=0;
}
abc(num);
b=num;
}
</script>
</body>
</html>
0 0
- jquery---网易轮播图
- 仿网易轮播图
- tx5-网易轮播图02
- tx5-网易轮播图
- 仿网易轮播图
- 网易
- 网易
- 网易
- 网易
- jQuery实现网易相册鼠标移动显示隐藏效果
- jquery.ajax调用新浪/网易k线数据 具体操作ajax
- 原生js实现网易轮播图
- tx5-网易轮播图01css部分
- 仿网易轮播图第二次,有改进
- 纯javascript仿网易左右轮播图效果
- jquery 光标不能自动定位到文本末尾的问题 转载(网易)
- 丁磊---网易
- 网易----丁磊
- 解决“应用程序无法启动,应用程序的并行配置不正确”
- 解决vs2013下创建的python文件,到其他平台(如linux)下中文乱码(或运行时报SyntaxError: (unicode error) 'utf-8' codec can't decode byte...)
- 派生类构造函数的执行顺序
- 算法训练 平方计算
- QTextEdit/QPlainTextEdit添加文字超出视图后,滚动条自动移至最底部
- jquery---网易轮播图
- java类成员访问权限总结(private,default,protected,public)
- 1.同域SSO案例
- 官网下载java相关资源
- 深入浅出Mybatis系列(八)---mapper映射文件配置之select、resultMap
- nyoj 58 最少步数 (bfs)
- 计算机网络之万维网WWW
- Big-Endian和Little-Endian
- VM 下安装ghost版系统