仿造了一个小米官网，分为几部分写了，最后进行拼凑。采用的是jquery。
大体如下：
其实并不难，但是熟练度并不高，导致编写有些慢。扒下来的网站图片尺寸，让我绝望了一下，因为对不齐哈哈哈，导致看起来好丑。然后默默微调。
主要注意以下几个点：
（1）写网页的时候，注意效果，返工好麻烦
（2）图片改变的时候与小圆点的变化
（3）箭头点击时候的轮播效果
（4）布局 布局
（5）特效特效
代码：（截取了一段其余的都差不多~）
$(function() {
//图书模块
var library_data = [
{
title: '哈利•波特与被诅咒的孩子',
contentone: '哈利•波特"第八个故事中文版震撼来',
contenttwo: '袭！特别彩排版剧本！',
price: '29.37元',
imgs: '../upload/hlbt.png',
},
{
title: '好吗好的',
contentone: '畅销作家大冰2016年新书！讲给你',
contenttwo: '听，好吗好的！',
price: '17.99元',
imgs: '../upload/hmhd.png',
},
{
title: '',
contentone: '海量好书，享受精品阅读时光',
contenttwo: '漂亮的中文排版，千万读者选择！',
price: '',
imgs: '../upload/more-duokan.jpg',
}
];
var li_one = $('.content_library>.oneul');
$.each(library_data, function (index, value) {
// console.log($('.content_library>ul'));
li_one.append('<li class="li_one"> <h4>图书</h4>' +
' <div class="content_library_all">' +
'<h5>' + library_data[index].title + '</h5>\n' +
' <p>"' + library_data[index].contentone + '</p>\n' +
' <p>"' + library_data[index].contenttwo + '</p>\n' +
' <span>' + library_data[index].price + '</span>\n' +
' <img src="' + library_data[index].imgs + '" alt="">\n' +
' </div></li>'
)
})
li_one.after('<ul class="twoul"><li><a href="javascript:;"></a></li><li><a href="javascript:;"></a></li><li><a href="javascript:;"></a></li></ul>');
//要给最后一张图片上面添加一个a标签 并且把h5移除
$(' .content_library .li_one:last .content_library_all h5').remove();
$('.content_library .li_one:last .content_library_all span').remove();
$(' .content_library .li_one:last .content_library_all img').before('<a href="javascript:;" class="read">前往多看阅读</a>');
//给ul的li小圆点 注册点击事件，对应的换图片 是一个淡入的过程 时间要快
$('.twoul li:first').css({backgroundColor: 'white', border: '3px solid #ffac13'});
$('.twoul li').on('click', function () {
$(this).css({backgroundColor: 'white', border: '3px solid #ffac13'}).siblings().css(
{backgroundColor: '#b0b0b0', border: '3px solid white'}
);
$(this).parent().prev('.oneul').children().eq($(this).index()).css('z-index', '2').siblings().css('z-index', '-1');
})
//鼠标经过的时候 显示远点的经过效果
$('.twoul li a').hover(function () {
$(this).addClass('li_class');
}, function () {
$(this).removeClass('li_class');
})
//鼠标经过整个盒子的时候 显示箭头
$('.content_library').hover( function(){
$(this).css('boxShadow','2px 9px 27px 0px rgba(66,66,66,0.3)').animate({top:-3},200);
$('.content_library_arrow_left').css('z-index','2').next().css('z-index','2');
$('.content_library_arrow_right').css('z-index','2').next().css('z-index','2');
},function(){
$(this).css('boxShadow','none').animate({top:0},200);
$('.content_library_arrow_left').css('z-index','-2').next().css('z-index','-2');
$('.content_library_arrow_right').css('z-index','-2').next().css('z-index','-2');
})
arrowAction('.content_library_arrow_left','.content_library_arrow_right','.content_library .oneul .li_one','.content_library .twoul li');
})
function arrowAction(arrowleft,arrowright,arrow,name) {
var img = 0;
// console.log( $('.content_library .oneul .li_one').index());
$(arrowleft).on('click', function () {
/**左箭头点击的时候 能够使之改变 并且能够 获取当前的索引 并且能够改变小圆点
* 注意当前的索引与小圆点的赋值关系 是以动画的效果
* 层级
* 注意判断 当img=0（左边）的时候 以及img等于length-1的时候
* */
img > 0 ? img-- : img = $(arrow).length - 1;
if (img === $(arrow).length - 1) {
$(arrow).eq(img).css('z-index', '2').siblings().css('z-index', '-2');
} else {
$(arrow).eq(img).css('z-index', '2').siblings().css('z-index', '-2');
}
$(name).eq(img).css({backgroundColor: 'white', border: '3px solid #ffac13'}).siblings().css(
{backgroundColor: '#b0b0b0', border: '3px solid white'}
);
});
$(arrowright).on('click', function () {
img < $(arrow).length - 1 ? img++ : img = 0;
$(arrow).eq(img).css('z-index', '2').siblings().css('z-index', '-2');
$(name).eq(img).css({backgroundColor: 'white', border: '3px solid #ffac13'}).siblings().css(
{backgroundColor: '#b0b0b0', border: '3px solid white'}
);
})
}
命名无能~ 哈哈，主要是在小圆点那边的创建，非要脑抽的每一次each遍历的时候都要创建，导致会显示两个。以及鼠标点击，以及鼠标经过的时候，样式的改变，有冲突，改成添加类就好~
丑萌~ 哈哈哈 明天贴其余的~
