web前端入门到实战：简单的图片轮播

2024-11-09 技术教程

效果：

功能：
1、左右箭头切换
2、状态控制点切换
3、鼠标悬念
4、自动轮播

HTML：

<divclass="zh-carousel"><divclass="zh-img-list"><ul><li><ahref="###"><imgsrc="images/img-demo02.jpg"alt=""><spanclass="zh-desc">广西南宁低价供应各种地被、绿化苗木等</span></a></li><li><ahref="###"><imgsrc="images/img-demo02-1.jpg"alt=""><spanclass="zh-desc">广西南宁低价供应各种地被、绿化苗木等</span></a></li><li><ahref="###"><imgsrc="images/img-demo02-2.jpg"alt=""><spanclass="zh-desc">广西南宁低价供应各种地被、绿化苗木等</span></a></li></ul></div></div>web前端开发学习Q-q-u-n：731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

CSS：

.zh-carousel{position:relative;width:100%;height:246px;}.zh-carousel.zh-img-list{position:relative;z-index:2;width:100%;height:100%;overflow:hidden;}.zh-carousel.zh-img-listul{height:100%;}.zh-carousel.zh-img-listli{position:absolute;z-index:0;left:0;top:0;width:100%;height:100%;}.zh-carousel.zh-img-list.active{z-index:1;}.zh-carousel.zh-img-listlia{display:block;position:relative;height:100%;}.zh-carousel.zh-img-listliimg{display:block;width:100%;height:100%;opacity:0;filter:Alpha(opacity=0);-webkit-transition:all.5sease-out;transition:all.5sease-out;}.zh-carousel.zh-img-list.activeimg{opacity:1;filter:Alpha(opacity=100);}.zh-carousel.zh-img-listli.zh-desc{display:block;position:absolute;z-index:3;left:0;bottom:-36px;width:100%;padding:10px15px;box-sizing:border-box;background-color:rgba(0,0,0,0.5);font-size:14px;color:#fff;-webkit-transition:all.5sease-out;transition:all.5sease-out;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.zh-carousel.zh-img-list.active.zh-desc{bottom:0;}.zh-carousel.zh-status-list{position:absolute;z-index:4;left:0;top:0;width:100%;padding:10px15px;box-sizing:border-box;text-align:right;}.zh-carousel.zh-status-listli{display:inline-block;width:10px;height:10px;margin-left:5px;background-color:#fff;border:1pxsolid#ddd;cursor:pointer;}.zh-carousel.zh-status-list.active{background-color:#FFD8C6;border:1pxsolid#ED713D;}.zh-carousel.zh-prev,.zh-carousel.zh-next{display:inline-block;position:absolute;z-index:4;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);width:20px;height:30px;background-color:rgba(0,0,0,0.5);font-family:"SimSun";font-size:18px;font-weight:bold;color:#fff;text-align:center;line-height:30px;cursor:pointer;}.zh-carousel.zh-prev:hover,.zh-carousel.zh-next:hover{background-color:rgba(0,0,0,0.75);}.zh-carousel.zh-prev{left:0;}.zh-carousel.zh-next{right:0;}web前端开发学习Q-q-u-n：731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

JS：

$.extend({/*图片轮播@paramoptionsobject(配置项)*/carousel:function(options){vardefaults={box:'.zh-carousel',//盒子listBox:'.zh-img-list',//列表框stateBox:'.zh-status-list',//状态框prev:'.zh-prev',//上一个next:'.zh-next',//下一个time:2000//动画时间}varconf=$.extend({},defaults,options);//给第一个添加状态$(conf.box).find(conf.listBox).find('li:first').addClass('active');//获取图片的数量varliNum=$(conf.box).find(conf.listBox).find('li').size();//添加状态列表varstatusList='<ulclass="zh-status-list">';for(vari=0;i<liNum;i++){if(i==0){statusList+='<liclass="active"></li>';}else{statusList+='<li></li>';}}statusList+='</ul>';$(conf.box).append(statusList);//添加左右按钮varbtns='<spanclass="zh-prev"type="button"><</span><spanclass="zh-next"type="button">></span>';$(conf.box).append(btns);//索引varindex=0;//切换函数functionswitchFunc(curIndex){index++;if(index>liNum-1){index=0;}$(conf.box).find(conf.stateBox).find('li').eq(index).addClass('active').siblings().removeClass('active');$(conf.box).find(conf.listBox).find('li').eq(index).addClass('active').siblings().removeClass('active');}//自动播放varautoPlay=setInterval(function(){switchFunc(index);},conf.time);//鼠标悬停$(conf.box).find(conf.listBox).mouseover(function(){clearInterval(autoPlay);}).mouseout(function(){autoPlay=setInterval(function(){switchFunc(index);},conf.time);});//控制点$(conf.box).find(conf.stateBox).find('li').mouseover(function(){clearInterval(autoPlay);}).mouseout(function(){autoPlay=setInterval(function(){switchFunc(index);},conf.time);}).click(function(){$(this).addClass('active').siblings().removeClass('active');$(conf.box).find(conf.listBox).find('li').eq($(this).index()).addClass('active').siblings().removeClass('active');index=$(this).index();});//点击左箭头$(conf.box).find(conf.prev).mouseover(function(){clearInterval(autoPlay);}).mouseout(function(){autoPlay=setInterval(function(){switchFunc(index);},conf.time);}).click(function(){index--;if(index<0){index=liNum-1;}$(conf.box).find(conf.stateBox).find('li').eq(index).addClass('active').siblings().removeClass('active');$(conf.box).find(conf.listBox).find('li').eq(index).addClass('active').siblings().removeClass('active');});//点击右箭头$(conf.box).find(conf.next).mouseover(function(){clearInterval(autoPlay);}).mouseout(function(){autoPlay=setInterval(function(){switchFunc(index);},conf.time);}).click(function(){index++;if(index>liNum-1){index=0;}$(conf.box).find(conf.stateBox).find('li').eq(index).addClass('active').siblings().removeClass('active');$(conf.box).find(conf.listBox).find('li').eq(index).addClass('active').siblings().removeClass('active');});}});//调用$.carousel();