DDR爱好者之家

js代码实现轮播图
站长资源 2024/12/27 佚名
54 1538
DDR爱好者之家 Design By 杰米

本文实例为大家分享了js实现轮播图的具体代码，供大家参考，具体内容如下

又从头到尾把轮播图研究了一遍，感觉理解更深刻了。
就怕自己搞不懂，分析了各个步骤的思路，为啥用，怎么用。
总算搞清楚了。
话不多说，干货奉上.

效果图：

js代码实现轮播图

//1，左右按钮初始隐藏 鼠标进入box 按钮显示 鼠标离开box 按钮隐藏
//获取元素
var box = document.getElementById('box');
var leftbtn = document.getElementById('leftbtn');
var rigbtn = document.getElementById('rigbtn');
//因为图片宽度是多个事件需要用到 所以要定义为全局变量
var pic_width = box.clientWidth;
//注册事件
box.addEventListener('mouseenter', function() {
 leftbtn.style.display = 'block';
 rigbtn.style.display = 'block';
 //清除定时器 停止自动播放 
 clearInterval(timer);
 //停止播放后 清空定时器变量 提升运行效率
 timer = null;
});
box.addEventListener('mouseleave', function() {
 leftbtn.style.display = 'none';
 rigbtn.style.display = 'none';
 //timer在11条里声明过了 这里就不需要再加var进行声明了
 timer = setInterval(function() {
 rigbtn.click();
 }, 1500);
});
//6，创建动画函数animate 点击小圆点 图片会移动 
//因为图片需要缓慢移动到目标位置 而不是瞬移 所以需要让动画函数带缓动效果
function animate(obj, target, callback) {
 //obj是移动的对象 target是移动的目标位置 callback是回调函数
 clearInterval(obj.timer);
 //创建缓动函数 缓动的核心思想就是把移动到目标位置的距离分成若干小步
 //一定时间内走一小步，让这个距离在若干时间完成若干小步后走完
 function move() {
 //定义每一小步走的距离 把一次移动到目标位置的距离分为10份
 //每一份就是一个step
 var step = (target - obj.offsetLeft) / 10;
 //step可能不是整数 导致最终移动距离有误差 
 //所以要把每一步的step变成整数
 //如果step是正数 就取大于step的最小整数
 //如果step是负数 就取小于step的最大整数 用Math()的知识
 /*if(step > 0) {
 step = Math.ceil(step);//向上取整
 } else {
 step = Math.floor(step);//向下取整
 }*/
 //可以将上面的if else语句简化为三元运算符
 step = step > 0 "_blank" href="//www.jb51.net/Special/610.htm">jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米