当前位置: 秋叶网络博客 前端编程 ◊ 响应式全屏无缝滚动式幻灯片

响应式全屏无缝滚动式幻灯片

作者:秋了秋 发表时间:2015年11月13日

之前有写过淡入淡出的幻灯片《详解jq幻灯片原理及制作方法》,现在写一个左右滚动式幻灯片,虽然web幻灯片功能的代码在网上一抓一大把,但网上很多的都是通过插件封装而来,动不动就几千行代码,一两百kb大小,占用资源不说,对于修改来说也异常困难和麻烦。所以这东西还得自己掌握比较好,自己爱怎么写就怎么写,我让它怎么滚动就怎么滚动,我让它向东它绝不会向西。

如果自己一字一句写出来的话,你会发现幻灯片代码并不用太多,无非就是有这么几个功能:

1.有个定时器让它不断的改变margin或left值;

2.有个轮播焦点,图片移动到第n张,第n个焦点就点亮,点击第n个焦点,滚动到第n张图片;

3.有个左右箭头,点击左它就向左滚动一张,点击右它就向右滚动一张;

4.鼠标移入移出效果,鼠标移上去,幻灯片暂停,鼠标移出,幻灯片继续轮播;

有了这几个思路,我们就开始动手写了,首先是html布局:

<div class="ddd">
<!--图片容器-->
<ul id="cgw">
<li><img src='20151010ivfthh.jpg' alt=''/></li>
<li><img src='20151010dlezyn.jpg' alt=''/></li>
<li><img src='20151010riudvj.jpg' alt=''/></li>
</ul>
<!--焦点-->
<ul id="qiuye_i"></ul>
</div>
<!--左右按钮-->
<div id="prenext"><span class="nex">下一个</span><span class="pre">上一个</span></div>

css样式见参考:

*{ margin: 0; padding: 0; list-style:none;}
.ddd {
width: 100%;
overflow: hidden;
position: relative;
}
#cgw, #cgw2 {
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
#cgw li, #cgw2 li {
float: left;
overflow: hidden;
max-width: 100%;
}
#cgw li{height:400px;}
#cgw li img, #cgw2 li img {
width: 100%;
display: block
}
#cgw li:nth-child(1){background:red;}#cgw li:nth-child(2){background:blue;}#cgw li:nth-child(3){background:green;}#cgw li:nth-child(4){background:red;}#cgw li:nth-child(5){background:blue;}#cgw li:nth-child(6){background:green;}
#qiuye_i {
position: absolute;
bottom: 8px;
left: 50%;
margin-left: -45px;
}
#qiuye_i li {
width: 20px;
height: 20px;
float: left;
background: #ccc;
margin: 5px;
}
#qiuye_i li.on {background:#6824B3;}
#prenext {
margin: 0 auto;
position: relative;
}
#prenext .pre,#prenext .nex {
display: block;
background: black;
position:absolute;
height: 50px;
line-height: 50px;
color: #fff;
width:80px;
text-align: center;
}
#prenext .pre {left: 50px; }
#prenext .nex {right: 50px;}
#qiuye_i li, #prenext .pre, #prenext .nex {
cursor: pointer;
}

幻灯片jq核心代码:

$(function(){
var htm=$('#cgw').html();
$('#cgw').append(htm);
var lenth = $('#cgw>li').length;
for(var i=0;i<lenth/2;i++){
$('<li></li>').appendTo('#qiuye_i');
}
//响应式设计(设置样式)
function qiuye_resize() {
liw = document.body.clientWidth || document.documentElement.clientWidth;
$('#cgw>li').width(liw);
$('#cgw').width(liw * lenth);
var h=$('#cgw>li').height();
$('.ddd').height(h);
$('#prenext').css('margin-top',(-h/2-$('#prenext .nex').height()/2)+'px')
}
//初始化
var i = 0;
qiuye_resize();
window.onresize = function() {qiuye_resize();qiuye_bo();}
//轮播主函数
function qiuye_bo() {
if (i >= lenth) {
$('#cgw').css('left',(-liw*lenth/2+liw)+'px');
i = lenth/2;
}
else if(i<0){
$('#cgw').css('left',(-liw*lenth/2)+'px');
i=lenth/2-1;
}
$('#cgw').stop().animate({'left': -liw * i});
$('#qiuye_i li').eq(i<lenth/2?i:i-lenth/2).addClass('on').siblings().removeClass('on');
i++;document.title=i;
}
qiuye_bo();var qiuye_interval = setInterval(qiuye_bo, 3000);//设置定时器开始轮播
//焦点点击事件
$('#qiuye_i li').click(function() {
clearInterval(qiuye_interval);
i = $(this).index();
qiuye_bo();
qiuye_interval = setInterval(qiuye_bo, 3000);
})
//下一张按钮事件
$('#prenext .nex').click(function() {
clearInterval(qiuye_interval);
qiuye_bo();
qiuye_interval = setInterval(qiuye_bo, 3000);
})
//上一张按钮事件
$('#prenext .pre').click(function() {
clearInterval(qiuye_interval);
i -= 2;
qiuye_bo();
qiuye_interval = setInterval(qiuye_bo, 3000);
})
//鼠标移入移出事件
$('#cgw').mouseover(function() {clearInterval(qiuye_interval);})
$('#cgw').mouseout(function() {qiuye_interval = setInterval(qiuye_bo, 3000);})
});

特别特点:

1.RT 2.响应式 3.宽屏 4.无缝 5.滚动式 其他功能 1.焦点点击 2.hover 3.前进后退点击按钮

效果如下:

幻灯片

2
文章作者: 秋叶网络博客,本站鼓励原创。
转载请注明本文地址:https://www.mizuiren.com/blog/411.html
目录:前端编程 | 标签:幻灯片 | 8074次阅读
登 录
点击获取验证码
还没账号?点击这里