您的位置：首页 > 其它

京东版轮播图

2016-10-19 13:07 232 查看

<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
<style
type="text/css">
*
{
margin:
0;
padding:
0;
}
#wrap
{
width:
300px;
height:
200px;
margin:100px
auto;
border:2px
solid gold;
position:
relative;
}
img
{
width:
300px;
height:
200px;
position:
absolute;
opacity:0;
transition:all
1s;
}
img:nth-child(1){
opacity:1;
}
ul
{
list-style:
none;
position:
absolute;
top:
170px;
left:
87px;
}
li
{
width:
20px;
height:
20px;
background: gray;
margin-left:3px;
border-radius:50%;

text-align: center;
line-height:
20px;
float:left;
}
li
a {
text-decoration:
none;
color:white;
}
.li1
{
background:red;
}
#left
a,
#right a
{
width:
20px;
height:
40px;
background:black;
opacity:0.5;

color:white;
text-align: center;
line-height:
40px;
text-decoration:none;
position:
absolute;
top:
85px;
}
#right
a {
right:0;
}
</style>
</head>
<body>
<div id="wrap">

<img
src="img/01.jpg"
alt="" />
<img
src="img/02.jpg"
alt="" />
<img
src="img/03.jpg"
alt="" />
<img
src="img/04.jpg"
alt="" />
<img
src="img/05.jpg"
alt="" />
<img
src="img/06.jpg" alt=""
/>
<ul>
<li
class="li1"><a
href="###">1</a></li>
<li><a
href="###">2</a></li>
<li><a
href="###">3</a></li>
<li><a
href="###">4</a></li>
<li><a
href="###">5</a></li>
<li><a
href="###">6</a></li>
</ul>
<div
id="left"><a
href="###"><</a></div>
<div
id="right"><a
href="###">></a></div>
</div>
<script
type="text/javascript">
//图片数组
var
imgs = document.getElementsByTagName("img");
//小球数组
var
lis = document.getElementsByTagName("li");
//左按钮
var
leftbtn = document.getElementById("left");
//右按钮
var
rightbtn = document.getElementById("right");
//声明一个变量存储当前是第几张图片
var
index = 0;
//给左按钮绑定点击事件
leftbtn.onclick
= function(){
//1.让当前的图片消失
imgs[index].style.opacity
= "0";
//2.让上一张图片显示
index--;
if(index
== -1){
index
= 5;
}
imgs[index].style.opacity
= "1";
//3.改变小球

changePoint();
}

//给右按钮绑定点击事件
rightbtn.onclick
= function(){
//1.让当前的图片消失
imgs[index].style.opacity
= "0";
//2.让下一张图片显示
index++;
if(index
== 6){
index
= 0;
}
imgs[index].style.opacity
= "1";
//3.改变小球
changePoint();
}
//换小球函数
function
changePoint(){
for(var
i = 0; i
< lis.length; i++){
if(index
== i){
lis[i].style.background
= "red";
}else{
lis[i].style.background
= "gray";
}
}
}
//为小球添加鼠标移入事件
for(var
i = 0; i
< lis.length; i++){
lis[i].onmouseenter
= (function(nowIndex){
return
function(){
imgs[index].style.opacity
= "0";
index
= nowIndex;
imgs[index].style.opacity
= "1";
changePoint();
}
})(i);
}
//自动换图片函数
function
changeImg(){
//1.让当前的图片消失
imgs[index].style.opacity
= "0";
//2.让下一张图片显示
index++;
if(index
== 6){
index
= 0;
}
imgs[index].style.opacity
= "1";
//3.改变小球
changePoint();

}
var
timer = setInterval(changeImg, 1000);
//可视区域加鼠标移入移出事件
var
wrap = document.getElementById("wrap");
wrap.onmouseenter
= function(){
clearInterval(timer);

}
wrap.onmouseleave
= function(){
timer
= setInterval(changeImg, 1000);
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航