前言:
眼前各位老铁们对“js带缩略图的轮播”可能比较珍视,各位老铁们都需要了解一些“js带缩略图的轮播”的相关内容。那么小编同时在网络上搜集了一些关于“js带缩略图的轮播””的相关内容,希望大家能喜欢,大家快快来了解一下吧!在我们浏览过的大多数网页中,轮播图基本上是随处可见的,主要用于网站Home页,作为前端技术的一种,目的是通过简易的动画效果和绚丽的图片吸引用户的眼球!轮播图的效果更是多种多样;在本文,小编主要想分享的是比较基本的版本
1. 轮播图的原理
其原理是:将一系列待展示的图片按照出场顺序排列。规定时间内,依次以一定的步长往左/右滑动,但显示区域的大小和位置都是固定的,因此也就使得不同的图片按顺序有出场机会,这就是轮播图。如下图所示:
因此我们可以注意到:
1)每张图片的宽度width与显示区域宽度相等;
2)每次移动的距离恰是这个width的值。
2. 实现
我们先在上次讲的“templates”文件夹下新建一个.html文件,这里我依旧使用上次的sketch.html
。
在“static/css/”下新建.css文件main.css,并在刚刚的.html文件中引入。在写前端的时候,一般我们是先在.html中定义我们要的元素,然后根据元素的样式需求在.css文件中定义,再在元素的开始标签中通过 class="..." 或者 id="..." 来引用。
<head> …… <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}"/> ……</head>
下面直接给出我的代码。
// static/main.css@charset "utf-8";/* CSS Document */.li_img{ float: left; list-style: none;}.ul_img{ width: 8100px; padding: 0px; margin: 0px; transition: all 2s;}.btn_img{ border: #FF8104 solid 1px; border-radius: 15px;}.main_div{ width: 900px; overflow: hidden; position: relative; height: 450px; top: 100px; display: block; box-shadow: 5px 5px 10px #ccc;}.div_btn{ list-style: none; border-radius: 15px; background-color: #FFCF81; width: 60px; height: 30px; left: 25%; margin-left: 30px; margin-top: 160px; margin-bottom: 60px;}
大家可以根据标注与效果自行根据自己的需求对.css代码做修改。但值得注意的是:这里我定义的显示区域.main_div的宽度是900px,意味着我准备的图片宽度也都是900px,每一次移动距离也都是900px。
sketch.html中的代码.
<!-- templates/sketch.html --><body> …… <div> <center> <div class="main_div" id="main_div"> <ul class="ul_img"> <li class="li_img"><img src="{{ url_for('static', filename='images/sketch/01.jpg') }}"/></li> <li class="li_img"><img src="{{ url_for('static', filename='images/sketch/02.jpg') }}"/></li> <li class="li_img"><img src="{{ url_for('static', filename='images/sketch/03.jpg') }}"/></li> <li class="li_img"><img src="{{ url_for('static', filename='images/sketch/04.jpg') }}"/></li> <li class="li_img"><img src="{{ url_for('static', filename='images/sketch/05.jpg') }}"/></li> <li class="li_img"><img src="{{ url_for('static', filename='images/sketch/06.jpg') }}"/></li> <li class="li_img"><img src="{{ url_for('static', filename='images/sketch/07.jpg') }}"/></li> </ul> </div> <div> <img class="btn_img div_btn" src="{{ url_for('static', filename='images/sketch/index/01.jpg') }}"/> <img class="btn_img div_btn" src="{{ url_for('static', filename='images/sketch/index/02.jpg') }}"/> <img class="btn_img div_btn" src="{{ url_for('static', filename='images/sketch/index/03.jpg') }}"/> <img class="btn_img div_btn" src="{{ url_for('static', filename='images/sketch/index/04.jpg') }}"/> <img class="btn_img div_btn" src="{{ url_for('static', filename='images/sketch/index/05.jpg') }}"/> <img class="btn_img div_btn" src="{{ url_for('static', filename='images/sketch/index/06.jpg') }}"/> <img class="btn_img div_btn" src="{{ url_for('static', filename='images/sketch/index/07.jpg') }}"/> </div> </center> </div> ……</body>
这里我用到七张图片存储在“static”下的“/images/sketch/”下,并且我还给每张图片准备了一张缩略图作为按钮,放在“static”下的“/images/sketch/index/”目录下,如图
接下来就是js代码了。在“static/js/”下新建“main.js”文件,在sketch.html中引入,
<head> …… <script src="{{ url_for('static', filename='js/main.js') }}" type="text/javascript"></script> ……</head>
内容如下:
// JavaScript Document // variables for the Shuffling figuresvar count = 0; // 计数:确定当前应该是第几张图片显示(count = 0, 1, 2, ..., (n-1))var isgo = false;/* 确定向左滑动还是向右滑动 1) isgo = true 一连串图片向左滑动 2) isgo = false 一连串图片向右滑动*/var timer; // 计时器 window.onload = function(){ var ul_img = document.getElementsByClassName("ul_img")[0]; // 获取包含图片的容器 var li_img = document.getElementsByClassName("li_img"); // 获取那一串图片 var div_btn = document.getElementsByClassName("div_btn"); // 获取那一串按钮 div_btn[0].style.boxShadow = "3px 3px 6px #4c4c4c"; // 对其一个按钮做添加阴影处理 showtime(); // 开始计时 // 当轮播图顺序滑动时 function showtime(){ timer = setInterval(function(){ if(isgo === false){ console.log(count); if(count >= li_img.length - 2){ count = li_img.length - 1; isgo = true; }else{ count++; } ul_img.style.transform = "translate(" + -900 * count + "px)"; // 注意到这里的900了吗?这是每次滑动的距离 }else{ count--; ul_img.style.transform = "translate(" + -900 * count + "px)"; if(count <= 0){ count = 0; isgo = false; } } // 选择显示的图片,“去到哪里” for(var i = 0; i < div_btn.length; ++i){ div_btn[i].style.boxShadow = "none"; } // 现将所有按钮恢复原状 div_btn[count].style.boxShadow = "3px 3px 6px #4c4c4c"; // 再对应图片的按钮做阴影处理 }, 4000); // 规定每4秒换一次 } // 当鼠标放在对应的按钮上时,马上去到对应的图片 for(var b = 0; b < div_btn.length; ++b){ div_btn[b].index = b; // 当鼠标放在按钮上时,要停止计时 div_btn[b].onmouseover = function(){ clearInterval(timer); for(var a = 0; a < div_btn.length; a++){ div_btn[a].style.boxShadow = "none"; } div_btn[this.index].style.boxShadow = "3px 3px 6px #4c4c4c"; if(this.index === li_img.length - 1){ isgo = true; } if(this.index === 0){ isgo = false; } count = this.index; ul_img.style.transform = "translate(" + -900 * count + "px)"; }; // 当鼠标移开时,继续计时 div_btn[b].onmouseout = function(){ showtime(); }; }};
总结
在本文我们主要是分享了前端经典动画“轮播图”的制作。
预告
下一篇我们将正式步入前后端交互的学习,将主要围绕:
1)uploadfiles上传图片到后台,后台处理完毕后返回前端显示;
2)普通按钮(<input type="button"/>)的onclick函数激发的数据传递。
标签: #js带缩略图的轮播