用js写的轮播图,八位女明星,你翻谁的牌,程序员就是可以为所欲为!
2023-09-11 14:21:46 时间
今天下午利用摸鱼的时间做了一个图片轮播,嘿嘿,先看看效果,本来想搞动态图的,整出来效果不好,图片又超过了5M不让传,还是截图吧
感觉需
实现的功能:
1.定时向右滚动。
2.点击明星切换到最中间。
3.鼠标移入定时器被清除、鼠标移开定时器再次载入。
要改进的地方:
1.参数img_num 即总图片的数量必须是大于等于5,小于5的话会有空隙。
2.图片目前设定的宽 262px 高389px 如果尺寸的比例不符合的话效果没那么好。
实现思路:
1.先初始化几张图片(用div,然后div加入img),并将这些div存储到一个array中作为队列。
2.封装一个reset函数(包含自己先前写的动画函数),专门用来对这些图片设置样式,根据他们的位置设置不同的left top 宽度高度等。
3.当我们点击其中的div时,就同步将他的位置设置到队列的中间,同时它左右两边的同步移动(最前面的那个再往前移动的话就放到队列的最后,形成循环)。
4.队列设置好以后,调用reset 函数就会再次排版。
5.定时往右移动,鼠标移入清除定时器,移出时再次生成定时器。
完整代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
*{
margin:0;padding:0;
}
#div_box{width:1100px; margin:0px auto;}
#div_box div{position:absolute;width:0;height:0;z-index:0;cursor:pointer;overflow:hidden;top:152px; left:10px;}
#div_box div img{width:100%;height:100%;vertical-align:top; float:left; border:0;}
</style>
</head>
<body>
<div id="div_box" >
</div>
</body>
<script>
(function(){
var div_box = document.getElementById("div_box");// 获取盒子
var boxQuene=[];//用来存储图片dom对象的
//创建图片
var img_num=8,middle_num=(img_num%2==0)?(img_num/2):Math.floor(img_num/2)+1;
function init(){
var screenWidth = window.screen.availWidth-20;
var screenHeight = window.screen.availHeight-110;
div_box.style.width=screenWidth+'px';
div_box.style.height=screenHeight+'px';
for(var i=1;i<=img_num;i++){//生成卡片
var div = document.createElement("div");
div.id="div_"+i;
var borderColor = '#' + Math.random().toString(16).substr(2, 6).toUpperCase();
div.style.border='3px solid '+borderColor;
div.style.borderRadius='8px';
div.addEventListener('click',check);
div.addEventListener('mouseover',over);
div.addEventListener('mouseout',out);
var img = document.createElement("img");
img.src="../images/2/"+i+".jpg";
div.appendChild(img);
div_box.appendChild(div);
boxQuene.push(div);//一个个的推入到盒子队列
}
//第一次设置卡片样式
reset();
//定时向右翻
autoMove();
}
var left=0,top=50,c_top,zIndex=0,width=262,height=389,first,last;
//重新设置卡片的样式
function reset(){
for(var i=0;i<boxQuene.length;i++){
var obj = boxQuene[i];
width=262,height=389,c_top=0;
var step = Math.floor((img_num-5)/2);
if(i<=step){
first=true;
last=false;
}else if(i>=boxQuene.length-1-step){
first=false;
last=true;
}else{
first=false;
last=false;
}
if(i<middle_num){
zIndex++;
if(first){
left=100;
}else if(i==middle_num-1){
left=(i-step) * 250;
width+=40;
height+=56;
c_top=-30;
}else{
left=(i-step) * 260;
}
}else{
zIndex--;
if(last){
left = screen.availWidth-390;
}else{
left=(i-step) * 260;
}
}
//obj.style.width=width+'px';
//obj.style.height=height+'px';
//obj.style.left=left+'px';
//obj.style.top=top+c_top+'px';
obj.style.zIndex=zIndex;
obj.children[0].id=i;
//使用自己封装的动画函数
(function(o){
var o_width=width+'px',o_height=height+'px',o_left=left+'px',o_top=top+c_top+'px',index=i;
var param = {'width': o_width,'height': o_height,'left': o_left,'top': o_top,'z-index':zIndex};
animate(o,param,'fast');
})(obj);
}
}
//选中图片事件函数
function check(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.id){
var cur = boxQuene.filter(function(item){
return target.id==item.children[0].id;
})
var curIndex = parseInt(/\d+/.exec(cur[0].children[0].id)[0]);
if(curIndex===middle_num-1){
return;
}else{
moveQuene(curIndex);
}
reset();
}
}
function over(){
clearInterval(timmer);
}
function out(){
autoMove();
}
function moveQuene(curIndex){
var step = middle_num-1-curIndex;
if(step>0){
while(step>0){
boxQuene.unshift(boxQuene.pop());
step--;
}
}else{
step = Math.abs(step);
while(step>0){
boxQuene.push(boxQuene.shift());
step--;
}
}
}
//获取属性值
function getStyle(obj, prop) {
var prevComputedStyle = document.defaultView ? document.defaultView.getComputedStyle( obj, null ) : obj.currentStyle;
return prevComputedStyle[prop];
}
/*
obj:dom对象
prop:动画参数
speed:执行速度 fast slow 3000等
func:回调函数
*/
function animate(obj,prop,speed,func){
//防止重复动画事件
if(obj.timer) return ;
//定义定时器执行次数和总执行时间
var limit=20,totalTime;
if(typeof speed==='number'){//如果传入的是
totalTime = speed;
}else if(speed==='slow'){
totalTime = 600;
}else if(speed==='fast'){
totalTime = 200;
}else{
totalTime = 400;
}
var time = totalTime/limit;
var n=0,cache={},display,primary_cur;//cache用来缓存,省的每次都去dom获取
obj.timer = setInterval(function(){
n++;//执行次数每次递增
for(var p in prop){
if("display"===p) {
display = prop["display"];
if(display!=='none'){
obj.style['display'] = display;
}
delete prop["display"];
continue;
}
//判断是否是可以递增的属性,如果不是则直接让它生效,并从prop中删除,删除后就不用每次任务都执行它
var reg = /^(\d)+(px$)?/;//数字和像素这样的判定为可以递增的属性
if(!reg.test(prop[p])){
obj.style[p] = prop[p];
delete prop[p];
continue;
}
var value,opacityFlag=(p == "opacity")?true:false;
var cur = 0;
if(cache[p+"_cur"]){//从缓存中取
cur = cache[p+"_cur"];
value = cache[p+"_value"];
}else{
value = prop[p];
if(opacityFlag) {
//如果本来是隐藏的则cur默认就是0
if(getStyle(obj, 'display')!=='none'){
cur = Math.round(parseFloat(getStyle(obj, p)) * 100);
}
} else {
cur = parseInt(getStyle(obj, p));
//处理100px的格式
(typeof value==='string') && (value=value.replace(/px$/,""));
}
primary_cur=cur;
cache[p+"_value"] = value;
}
var incre ;
if(cache[p+'_increment']){//如果缓存中有则从中取
incre = cache[p+'_increment'];
}else{
if(opacityFlag){
incre = (value*100-cur)/limit;//计算每次变化值
}else{
incre = (value-cur)/limit;//计算每次变化值
}
cache[p+'_increment']= incre;
}
//缓存起来,这样就不用每次都去dom中获取了。
cache[p+"_cur"] = cur + incre;
if (opacityFlag) {
obj.style.filter = "alpha(opacity:"+(cur + incre)+" )";
obj.style.opacity = (cur + incre)/100 ;
}else {
obj.style[p] = cur + incre + "px";
}
}
//如果达到了最大执行次数,要清除定时器,并执行回调函数
if(n==limit){
if(display==='none'){
obj.style['display'] = 'none';
}
//清除定时器
clearInterval(obj.timer);
obj.timer=undefined;
func && func();
}
},time)
}
var _ = {
isFunction : function(o){
return o!== null &&typeof o ==='function';
}
}
var timmer;
function autoMove(){
timmer = setInterval(function(){
//往右翻
boxQuene.unshift(boxQuene.pop());
reset();
},3000);
}
//初始化
init();
})()
</script>
</html>
图片的话自己整,整理不易给个三连吧!!
相关文章
- js压缩图片到2m以下
- JS框架_(JQuery.js)圆形多选菜单选项
- JS框架_(JQuery.js)文章全屏动画切换
- JS框架_(coolShow.js)图片旋转动画特效
- JS框架_(JQbar.js)柱状图动态百分比进度条特效
- JS框架_(JQuery.js)上传进度条
- JS框架_(Laydate.js)简单实现日期日历
- JS框架_(Bootstrap.js)实现简单的轮播图
- 【带着canvas去流浪(12)】用Three.js制作简易的MARVEL片头动画(上) #华为云·寻找黑马程序员#
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
- JS实现——用3L和5L量出4L的水
- Node.js之Console用法小结
- ExtJS简单的动画效果(ext js淡入淡出特效)
- 2015.7.16-js-14(排序)
- Pycharm调用NodeJS运行js代码 的 环境配置
- [Node.js] Sequelize Intro - 2 Migrations
- 从安装node js到构建一个vue并启动它
- 使用lodash替换js字符串中的变量
- webpack最简单的入门教程里bundle.js之运行单步调试的原理解析
- three.js(JS 三维模型库)介绍和入门
- html+css+js实现打砖块小游戏
- 【带着canvas去流浪(12)】用Three.js制作简易的MARVEL片头动画(上) #华为云·寻找黑马程序员#
- JS:crypto-js实现AES加密解密
- 【人工智能 Open AI 】我们程序员真的要下岗了- 全能写Go / C / Java / C++ / Python / JS 人工智能机器人
- 移动端网页使用flexible.js加入百度联盟广告样式不一致问题解决
- 【JS高级】js面向对象三大特性之多态_07
- 【JS高级】js之函数、重载、匿名函数、作用域及作用域链_03