JS-京东首页轮播图的实现
摘要： 游戏前端开发主程 游戏开发前端后端 游戏前端开发 策划 xml 代码 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″ /> <title>……
| 游戏前端开发主程 |
| 游戏开发前端后端 |
| 游戏前端开发 策划 |
xml 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>京东首页</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 500px;
height: 380px;
border: 3px solid black;
margin: 100px auto;
/*po*/
position: relative;
}
#wrap img {
width: 500px;
height: 380px;
position: absolute;
/*o0*/
opacity: 0;
/*过渡*/
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#wrap img:first-child {
/*o1*/
opacity: 1;
}
#left,
#right {
width: 50px;
height: 90px;
background-color: gray;
color: white;
position: absolute;
/*lh90*/
line-height: 90px;
top: 50%;
margin-top: -45px;
}
#left {
left: 0;
}
#right {
right: 0;
}
#ul1 {
/*lstn*/
list-style-type: none;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -75px;
}
#ul1 li {
background-color: gray;
width: 20px;
height: 20px;
border-radius: 50%;
/*fl*/
float: left;
margin-left: 5px;
line-height: 20px;
/*tac*/
text-align: center;
color: white;
}
#ul1 li:first-child {
background-color: red;
}
</style>
</head>
<body>
<div id=”wrap”>
<!– 图片 –>
<img
src=”http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=8c3abdbfc5bb011953ebab6e33484e2e”
alt=””
/>
<img
src=”http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=d9d4d51d2af370c53cb1d482a7f7589e”
alt=””
/>
<img
src=”http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=12af83edf2accc357141b6cb619c01b1″
alt=””
/>
<img
src=”http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=600dc5fd8c295f95d4d7f716f7ce2939″
alt=””
/>
<img
src=”http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=4907e4596459abe53be2103a029a2327″
alt=””
/>
<img
src=”http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=8f002abe18ea06df90dd14d91d82fef7″
alt=””
/>
<!– 分页 –>
<ul id=”ul1″>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<!– 上下翻页 –>
<div id=”left”>上一张</div>
<div id=”right”>下一张</div>
</div>
<script type=”text/javascript”>
//获取对象
var wrap = document.getElementById(‘wrap’)
var imgs = wrap.getElementsByTagName(‘img’)
var left = document.getElementById(‘left’)
var right = document.getElementById(‘right’)
var ul1 = document.getElementById(‘ul1’)
var lis = ul1.getElementsByTagName(‘li’)
var index = 0 //记录图片所在的下标位置
//上一张按钮的点击事件
left.onclick = function() {
//第一种方式:
// index–;
// if (index == -1) {
// index = 5;
// }
//
// //设置当前下标对应的图片,透明度为1,其它图片设置为0;
// for (var i = 0;i < imgs.length;i++) {
// if (index == i) {
// imgs[i].style.opacity = 1;
// } else{
// imgs[i].style.opacity = 0;
// }
// }
//第二种方式:
//将之前显示的图片隐藏
imgs[index].style.opacity = 0
index–
if (index == -1) {
index = 5
}
//将切换之后的图片显示
imgs[index].style.opacity = 1
//改变分页数 圆点的位置
changePoint()
}
// 下一张的点击事件
right.onclick = function() {
//让上一张图片隐藏
imgs[index].style.opacity = 0
index++
if (index == 6) {
index = 0
}
//显示当前图片
imgs[index].style.opacity = 1
//改变分页数 圆点的位置
changePoint()
}
//切换界面(分页数) 圆点的位置
function changePoint() {
for (var i = 0; i < lis.length; i++) {
//找到图片下标对应的分页小圆点
if (index == i) {
//图片对应的分页设置背景色红色
lis[i].style.backgroundColor = ‘red’
} else {
//其它为灰色
lis[i].style.backgroundColor = ‘gray’
}
}
}
//为圆点添加鼠标移入事件
for (var i = 0; i < lis.length; i++) {
//鼠标移入事件
lis[i].onmouseenter = function() {
imgs[index].style.opacity = 0
for (var j = 0; j < lis.length; j++) {
//找到移入当前圆点对应的下标
if (this == lis[j]) {
index = j //找到对应图片的下标
}
}
//显示圆点对应的图片
imgs[index].style.opacity = 1
//改变分页数 圆点的位置
changePoint()
}
}
//定时器改变图片以及圆点位置
function changeImage() {
imgs[index].style.opacity = 0 //隐藏之前的图片
index++
if (index == 6) {
index = 0
}
//显示切换之后的图片
imgs[index].style.opacity = 1
//改变分页数 圆点的位置
changePoint()
}
//添加定时器
//var timer = setInterval(changeImage,1000);
//或者
var timer = setInterval(‘changeImage()’, 1000)
//鼠标移入图片时,清除定时器
wrap.onmouseenter = function() {
//清除定时器
clearInterval(timer)
}
//鼠标移出,开启新的定时器
wrap.onmouseleave = function() {
timer = setInterval(‘changeImage()’, 1000)
}
</script>
</body>
</html>
| ubuntu 前端开发环境 |
| 前端开发环境 生产环境搭建 |
| eclipse前端开发环境搭建 |
» 本文来自：前端开发者 » 《JS-京东首页轮播图的实现》
» 本文链接地址：https://www.rokub.com/8835.html
» 您也可以订阅本站：https://www.rokub.com
近期评论