一直以来都没直视的轮播

2018-01-13 11:05:08来源:segmentfault作者:yuezhongbao人点击

分享

一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用,现成的插件1是省时间,拿来改改尺寸改改参数


就能直接用,2是现在的插件确实很强大,对于我一个刚刚学习前端的人来说,牛人写的轮播我看懂也要花些功夫,


更别说在工作中写出来,估计写出来以后,整个项目都要因我延时了...


我做过的项目也不多,开始用的最多的就是bootstrap里面的轮播,具备最基础的功能,很适合我刚开始做项目用,


最近我无意发现了一个更好用的轮播件(Swiper)这个插件在手机上有点意思,他可以实现手指触摸拖拽,还可以


双指进行缩放,挺好用的,官网有中文的,上手挺容易的(你们还有什么好用的插件可以私信我^-^).


好了说正事 ,接触前端的应该都知道 轮播可以说刚开始学就必须应该


会的,不会那就太没面子了,面试问过我 ,我胸有成竹的叙述其实我心


里想着他要真让我拿出电脑写一个我还真的会蒙


今天下午有时间 ,我凭着用过这么多次的映像自己动手写了一个,真的是最最最最基础的轮播。


我开始想写那种无缝的轮播,我是这么写的<div>
<ul>
<li><img src="img/banner1.jpg"></li>
<li><img src="img/banner2.jpg"</li>
<li><img src="img/banner3.jpg"></li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
外层slider{width:500px;height:400px;position:relative;overflow:hidden;},.main{ float:left;width:1500px;position:absolute;left:0;top:0;transition:all linear .5s} //一张图片宽500px;.mian>li{ float:left;}

像这样:



然后改变.main的left就可以了;我开始是这么想的,也这么做了,轮也能轮了,但是轮播图上index怎么弄,点击它


还要跳到对应的图片上,想了好久


我放弃了,(日后我会解决得)


还有一种轮播,可能你已经想到了 那种改变图片透明度的轮播,我当时想这个好写啊,同样能实现作用,于是....上码!


主要css
.main>li{
position: absolute;
top:0;
left: 0;
opacity: 0;
transition: all linear .5s;
}//三张叠放在一起


.main .active{
opacity: 1;
}
.index .active{
width:12px;
height:12px;
border-radius: 12px;
background-color: red;
}
<script>
var i = 1;
$('.main>li:nth-child('+i+')')
.addClass('active').siblings('.active')
.removeClass('active');//img
$('.index>li:nth-child('+i+')')
.addClass('active').siblings('.active')
.removeClass('active');//index
var timer = setInterval(function () {
animate();
},1000);
//放在对应序号上,切换对应图片
$('.index>li').on('mouseenter',
function(){
var index = $(this).html();
$('.main>li:nth-child('+index+')')
.addClass('active').siblings('.active')
.removeClass('active');//img$('.index>li:nth-child('+index+')')
.addClass('active').siblings('.active')
.removeClass('active');//index
});
//鼠标进入停止出来启动
$('#slider').hover(
function(){clearInterval(timer);},
function(){ timer = setInterval(
function(){ animate() },1000);}
);
//主体函数
function animate(){
++i;
$('.main>li:nth-child('+i+')')
.addClass('active').siblings('.active')
.removeClass('active');//img
$('.index>li:nth-child('+i+')')
.addClass('active').siblings('.active')
.removeClass('active');//index
if(i==3){i=0}
};
</script>

就这段复用性贼差,处理效率贼低的代码我写了半天,


虽然效率低,但还好的是,我下次说我会的时候会比之


前更有底气

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台