PC端网站开发总结-css方面因为不想引入swiper，觉得没必要，就自己写了个。首先声明这里没有使用transfor

做了两个PC端网站【都是公司官网，兼容主流浏览器】。

图片循环轮播

因为不想引入swiper，觉得没必要，就自己写了个。

首先声明这里没有使用transform:translate3d()，图片数量也没有增加，一共6张。

实现方式：

点击下一张时

var $lastLi = $('.show-photo li').first() //获取第一个li节点
var liHtml = '<li>' + $('.show-photo li').first().html() + '</li>' 
$(".show-photo ul").append(liHtml) //将第一个li节点内容append到最后去，这里对界面不会产生影响，
因为ul宽度很大，目的是为了让所有的li在同一水平上。注意这里重复了第一张图片
var selected = $('.show-photo li.active') 
selected.removeClass('active').addClass('leaderSkrinkImg').siblings().removeClass('leaderSkrinkImg') //给正在active的img加一个缩小的动画
selected.next().removeClass('leaderSkrinkImg').addClass('active') //给将要active的img加放大的动画
$lastLi.animate({
    marginLeft: '-160px' //让整个ul的内容向左滑动
}, 1000,function(){
    $lastLi.remove() //这里必须动画完了之后才可以执行，否则会影响向左滑动。向左滑动动画完成后，将多余的li移除掉
})

点击上一张时

var liHtml = '<li style="margin-left:-160px">' + $('.show-photo li').last().html() + '</li>' //这里优先加了个margin的作用是为了不影响布局
$(".show-photo ul").prepend(liHtml)
var $lastLi = $('.show-photo li').first() //获取prepend之后的第一个li节点
var selected = $('.show-photo li.active')
selected.removeClass('active').addClass('leaderSkrinkImg').siblings().removeClass('leaderSkrinkImg')
selected.prev().removeClass('leaderSkrinkImg').addClass('active')
$lastLi.animate({
    marginLeft: '0'
}, 1000)
$('.show-photo li').last().remove() //将最后一个重复的li移除

其实最开始是直接先remove节点，然后执行动画的。犹豫点击下一张时，第一张图片会先消失然后再移动，感觉怪怪的，所以改成先执行动画，再移除节点。

关于swiper插件图片自动循环轮播原理解读

待写

关于插件chromagallery.js全屏预览图片画廊原理解读

待写

使用hover出现的问题

需要实现的效果是：hover龙猫的这张图片，红块从左边出来然后鼠标停留在红块上可以点击跳转，鼠标离开红块，红块再消失

出现的问题如图：hover龙猫这张图片红块的确会出现，但是鼠标没法停留，只有鼠标离开龙猫区域红块就消失了。

解决方案：给红块加个hover态，hover在红块上时，使得红块一直是出现的状态。在这里是使其left值为0。

至于其他的动画都是使用css3的几个动画属性来操作的，这里想对着几个动画属性做个知识总结。

animation

CSS动画：animation、transition、transform、translate傻傻分不清

CSS3 animation属性中的steps功能符深入介绍

animation中的steps()逐帧动画

transform

transition

查看两篇文章，觉得写的很全了，就直接拿来记录下，哈哈

CSS transition 过渡详解

深入理解CSS过渡transition

几个不足：

需要事件触发，所以没法在网页加载时自动发生
是一次性的，不能重复发生，除非一再触发
只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态

浏览器兼容性问题解决方案 · 总结

还是借鉴别人的，平时没总结，好尴尬

juejin.cn/post/684490…

那些年我们经常遇到的浏览器兼容性问题

函数节流和函数去抖

鼠标滚轮事件有用到

参考轻松理解JS函数节流和函数防抖

使用正则表达进行模板渲染

var str=`<div>
 <p>{{username}}</p>
 <p>{{pwd}}</p>
</div>`
var data = { username: 'haha',pwd: 123 }
//将data中的数据替换到str字符串中
//解决方案
var render = function(str,data){
    return str.replace(/{{([\w]+)}}/g,function(all,key){
        return data[key]
})
}
//最终结果是：
str = `<div>
 <p>haha</p>
 <p>123</p>
</div>`

PC端网站开发总结-css方面