全国咨询热线:18720358503

无需微信小程序源码_原生js轮播(仿慕课网)

类别:行业新闻 发布时间:2021-01-12 浏览人次:

原生js轮播(仿慕课网)       本文主要分享了原生js实现仿慕课网的轮播效果。具有很好的参考价值,下面跟着小编一起来看下吧

效果如下:

代码如下:

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title javascript /title 
 style 
 *{margin:0;padding:0;border:0;}
 a{text-decoration:none;color:#fff;font-size:40px;line-height:200px;display:none;text-align:center;}
 #container{width:300px;height:200px;margin:50px auto;position:relative;overflow:hidden;}
 #list{width:2100px;height:200px;position:absolute;top:0;}
 #list span{width:300px;height:200px;display:inline-block;text-align:center;font-size:22px;float:left;color:#fff;}
 .one{background:red;}
 .two{background:orange;}
 .three{background:blue;}
 .four{background:green;}
 .five{background:black;}
 #buttons{width:200px;height:30px;position:absolute;bottom:0px;left:100px;z-index:9;}
 #buttons span{display:inline-block;cursor:pointer;width:12px;height:12px;border-radius:6px;background: #2a2a2a}
 #prev{width:40px;height:200px;position:absolute;left:0px;}
 #next{width:40px;height:200px;position:absolute;right:0px;}
 #container .on{background:#fff;}
 /style 
 /head 
 body 
 div id="container" 
 div id="list" 
 span 我是黑色第五张 /span 
 span 我是红色第一张 /span 
 span 我是黄色第二张 /span 
 span 我是蓝色第三张 /span 
 span 我是绿色第四张 /span 
 span 我是黑色第五张 /span 
 span 我是红色第一张 /span 
 /div 
 div id="buttons" 
 span index="1" /span 
 span index="2" /span 
 span index="3" /span 
 span index="4" /span 
 span index="5" /span 
 /div 
 a id="prev" href="javascript:;" rel="external nofollow" rel="external nofollow" /a 
 a id="next" href="javascript:;" rel="external nofollow" rel="external nofollow" /a 
 /div 
 script 
 var container = document.getElementById('container'),
 list = document.getElementById('list'),
 buttons = document.getElementById('buttons').getElementsByTagName('span'),
 prev = document.getElementById('prev'),
 next = document.getElementById('next'),
 index = 1,
 len = 5,
 interval = 3000,
 animated = false,
 timer;
 function animate(offset){
 if(offset == 0) return;
 animated = true;
 var time = 150,
 inter = 5,
 speed = offset/(time/inter),
 left = parseInt(list.style.left) + offset;
 var go = function(){
 if((speed 0 parseInt(list.style.left) left) || (speed 0 parseInt(list.style.left) left)){
 list.style.left = parseInt(list.style.left) + speed + 'px';
 setTimeout(go,inter);
 }else{
 list.style.left = left + 'px';
 if(left -100){
 list.style.left = -300*len + 'px';
 if(left (-300*len)){
 list.style.left = '-300px'
 animated = false;
 go();
 function showButton(){
 for(var i=0 ; i buttons.length ; i++){
 if(buttons[i].className == 'on'){
 buttons[i].className = '';
 break;
 buttons[index - 1].className = 'on';
 function play(){
 timer = setTimeout(function(){
 next.onclick();
 play();
 },interval);
 function stop(){
 clearTimeout(timer);
 next.onclick = function(){
 if(animated) {
 return;
 if(index == 5){
 index = 1;
 }else{
 index++;
 animate(-300);
 showButton();
 prev.onclick = function(){
 if(animated) {
 return;
 if(index == 1){
 index = 5;
 }else{
 index--;
 animate(300);
 showButton();
 for (var i = 0; i buttons.length; i++) {
 buttons[i].onclick = function () {
 if (animated) {
 return;
 if(this.className == 'on') {
 return;
 var myIndex = parseInt(this.getAttribute('index'));
 var offset = -300 * (myIndex - index);
 animate(offset);
 index = myIndex;
 showButton();
 container.onmouseover = function(){
 prev.style.display = next.style.display = 'block';
 stop();
 container.onmouseout = function(){
 prev.style.display = next.style.display = 'none';
 play();
 play();
 /script 
 /body 
 /html 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!


推荐阅读

无需微信小程序源码_原生js轮播(仿慕课网)

原生态js滚屏(仿慕课网) 文中关键共享了原生态js完成仿慕课网的滚屏实际效果。具备非常好的参照使用价值,下边跟随网编一起來看看吧实际效果以下:编码以下:!DOCTYPE htm...

2021-01-12
微信小程序怎么打_ajax接收后台数据在html页面显

ajax接受后台管理数据信息在html网页页面显示信息 PrintWriter out=response.getWriter(); //向顾客端推送标识符数据信息response.setContentType("text/text"); //设定恳求及其响应的內容种类及其编号...

2021-01-12
婚庆市场小程序新玩法_Vue表单验证插件的制造过

Vue表格认证软件的制作全过程 本文关键为大伙儿详尽详细介绍了Vue表格认证软件的制作全过程,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下前不久,大哥搭好...

2021-01-12
北京网站建设云计算云模式有哪些

云计算技术是技术性发展的现况,也是将来发展趋势的方位,早已和人工智能化,物联网网等技术性密不可分融合,更改了客户在全世界范畴运行内存储,浏览和互换数据信息的方法。...

2021-01-12
互联网的投资良机从中国互联网大会中频现

企业动态性制造行业新闻资讯建网站有关九度角度强烈推荐信息内容 互连网的项目投资好时机从这当中国互连网交流会中频出 重要词:互连网项目投资 互连网交流会 县区经济发展 产...

2021-01-12
拼团小程序哪个好用_浅谈react.js 之 批量添加与删

探讨react.js 之 大批量加上与删掉作用 文章投稿:jingxian 下边网编就为大伙儿产生一篇探讨react.js 之 大批量加上与删掉作用。网编感觉挺好的,如今就共享给大伙儿,也给大伙儿做...

2021-01-12
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信