您的位置：首页 > Web前端 > JQuery

京东-首页轮播

2017-10-06 00:03 232 查看

自学前端差不多有半个月了吧，之前一直打算写出自己的第一篇博客，中途却是打开了又放弃，因为实在不知道该写点什么。正好现在闲来无事，就坐在电脑前写写自己这一段的感受吧。其实自学的话，有很多地方真的很让人头疼，没有一点基础真的很难让人弄明白，最简单的做法就是去网上找资料，看视频，做笔记，一点点的把自己需要的东西总结好。在有的资料分享交流群里，会有很多同基础的人一起交流学习，共同参考修改代码，看的多了，自己也就慢慢的能看懂一些。当然，最重要的还是得自己多动手实践，代码这个东西敲得多了，自学的成果也就显而易见了。看了w3c的手册，以及腾讯的代码编写标准，发现写代码真的不是随随便便就写的，所以写的代码一定要符合相应的规范才好，毕竟好习惯从”小”做起

之前一直可喜欢京东的首页轮播，于是找了一些参考视频，学习之后就找机会写了一下，下面就分享一下我的成果，

（ps：本人才疏学浅，还在努力中，难免有不足之处，还请见谅，哈哈~~）

首先附上一张动态轮播成果图

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="京东，轮播">
<meta name="Description" content="京东首页轮播图">
<title>京东轮播</title>
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
#wrap{
position:relative;
width:790px;
height:340px;
margin:100px auto;
box-shadow:0 0 9px #222;
}

#wrap ul.pic li{
display:none;
position:absolute;
width:790px;
height:340px;

}

写完整个代码后发现下面小圆点不能控制图片，点击没有反应不变色，让我郁闷半天，好在最后终于解决了，着实让我有了一番小小的成就感~~~~

#wrap ul.btn li{
position:absolute;
top:50%;
margin-top:-40px;
width:40px;
height:80px;
background:rgba(0,0,0,.5);
font-size:30px;
text-align:center;
line-height:80px;
color:#fff;
cursor:pointer;
}
#wrap ul.btn li.next{
right:0;
}
</style>
</head>
<body>

<div id='wrap'>
<ul class='pic'>
<li>
<img src='images/1.jpg' width='790' height='340' alt='京东'>
</li>
<li>
<img src='images/2.jpg' width='790' height='340' alt='京东'>
</li>
<li>
<img src='images/3.jpg' width='790' height='340' alt='京东'>
</li>
<li>
<img src='images/4.jpg' width='790' height='340' alt='京东'>
</li>
<li>
<img src='images/5.jpg' width='790' height='340' alt='京东'>
</li>
<li>
<img src='images/6.jpg' width='790' height='340' alt='京东'>
</li>
</ul>

<ul class='lib'>
<li class='on'></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class='btn'>
<li class='prev'><</li>
<li class='next'>></li>

</ul>
</div>

<script src='js/jquery.js'></script>
<script>

var $pic = $('#wrap ul.pic li');
var $lib = $('#wrap ul.lib li');
var $next = $('#wrap ul.btn li.next');
var $prev = $('#wrap ul.btn li.prev');
var index = 0;
var length = $pic.length;

init();
function init(){

$pic.eq(0).fadeIn().siblings().fadeOut()
$next.click(function(){
index++;
index%=length;
play();
});
$prev.click(function(){
index--;
index = index<0 ? length-1:index;
play();
});

function play(){
$pic.eq(index).fadeIn().siblings().fadeOut();
$lib.eq(index).addClass('on').siblings().removeClass('on');
}
}
$lib.click(function(){
index = $(this).index();
$lib.eq(index).addClass('on').siblings().removeClass('on');
$pic.eq(index).fadeIn().siblings().fadeOut();
});

</script>
</body>
</html>

（文中有一段代码不太规范，就没有附上，以上代码仅供参考学习）

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

标签： 京东轮播图 javascript jquery

相关文章推荐

新的分享

章节导航