DDR爱好者之家 Design By 杰米
本文实例讲述了原生JavaScript实现的无缝滚动功能。分享给大家供大家参考,具体如下:
无缝轮播(原生JavaScript)
一:HTML部分:
<div class="box" id="box"> <ul class="J_XSlide list"> <li class="J_tabContent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="/UploadFiles/2021-04-02/1.jpg">二、CSS部分
<style> * { margin: 0; padding: 0; } ul li { list-style: none; } .clearfix { zoom: 1; } .clearfix:after { display: block; clear: both; content: ''; } .box { width: 1226px; height: 460px; overflow: hidden; position: relative; margin: 20px auto 0; } .box .list { position: relative; left: 0; height: 460px; } .box .list li img, .box .list li { float: left; width: 1226px; height: 460px; } .box .tabs { position: absolute; right: 5px; bottom: 5px; z-index: 99999; } .box .tabs .tab { float: left; width: 6px; height: 6px; border: 2px solid #f47500; border-radius: 100%; margin-right: 10px; cursor: pointer; background: #fcf2cf; font-family: arial; } .box .tabs .tab:hover, .box .tabs .cur { border: 2px solid #1227e4; background: #26c776; } .box .btn { position: absolute; width: 30px; height: 70px; top: 50%; margin-top: -35px; z-index: 20; background-color: rgba(0, 0, 0, 0.2); font-size: 30px; color: #fff; text-align: center; line-height: 70px; } .box:hover .btn { background-color: rgba(0, 0, 0, 0.6); } .box .btnl { left: 10px; } .box .btnr { right: 10px; } </style>三、JavaScript部分
3.1 base.js
var GLOBAL = {}; // 定义命名空间函数 GLOBAL.namespace = function(str) { var arr = str.split("."), o = GLOBAL; for(i = (arr[0] === "GLOBAL") "Dom"); // 获取className 第一个参数必须的(class名)、第二个参数父容器,缺省为body节点、第三个参数为DOM节点标签名 GLOBAL.Dom.getElementsByClassName = function(str, root, tag) { if(root) { root = typeof root === 'string' "htmlcode">function getStyle(obj, attr) { return obj.currentStyle "htmlcode">(function() { var oBox = document.getElementById('box'); var oXSlide = GLOBAL.Dom.getElementsByClassName('J_XSlide', oBox)[0]; var li = oXSlide.getElementsByTagName('li'); var liTabs = GLOBAL.Dom.getElementsByClassName('tabs', oBox)[0].getElementsByTagName('li'); var iNow = 0; function tab() { var timer = null; var playTime = 3000; var btn = GLOBAL.Dom.getElementsByClassName('btn', oBox); oXSlide.style.width = li.length * li[0].offsetWidth + 'px'; for(var i = 0, len = liTabs.length; i < len; i++) { liTabs[i].index = i; GLOBAL.Event.addHandler(liTabs[i], 'mouseover', function() { iNow = this.index; showItem(iNow); }); } GLOBAL.Event.addHandler(btn[0], 'click', moveLeft); GLOBAL.Event.addHandler(btn[1], 'click', moveRight); timer = setInterval(autoPlay, playTime); function autoPlay() { moveRight(); } GLOBAL.Event.addHandler(oBox, 'mouseover', function() { clearInterval(timer); }); GLOBAL.Event.addHandler(oBox, 'mouseout', function() { timer = setInterval(autoPlay, playTime); }); } // 选项卡 function showItem(n) { for(var i = 0, len = liTabs.length; i < len; i++) { liTabs[i].className = 'tab'; } if(n == liTabs.length) { liTabs[0].className = 'tab cur'; } else { liTabs[n].className = 'tab cur'; } startMove(oXSlide, {'left': -n * li[0].offsetWidth}); } function moveLeft() { iNow--; if(iNow == -1) { oXSlide.style.left = -liTabs.length * li[0].offsetWidth + 'px'; iNow = liTabs.length - 1; } showItem(iNow); } function moveRight() { iNow++; if(iNow == li.length) { oXSlide.style.left = 0; iNow = 1; } showItem(iNow); } tab(); })();更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年04月24日
2024年04月24日
- 郑中基.2002-安可ENCORE新歌精选(引进版)【步升】【WAV+CUE】
- 姚璎格《影》头版限量编号24K金碟[WAV+CUE]
- 刘德华《回家的路》2CD[WAV+CUE][963M]
- F4《流星雨》[FLAC整轨][499M]
- 物华弥新鹿角立鹤厉害吗 鹿角立鹤培养建议分享
- 物华弥新芙蓉炉厉害吗 芙蓉炉培养建议分享
- 星之翼手游新手开荒指南大全 星之翼新手怎么快速上手
- 赵传2014-歌声传情3CD[广东音像][WAV+CUE]
- 江蕙2002-台语典藏系列·黄金版8CD[WAVCUE]
- 薰妮1980-雾里玫瑰[香港永恒真存珍藏版][WAV+CUE]
- 《给他爱5》被移植到NS平台:玩会序章就崩溃了
- 《星刃》MV幕后公开 韩国女星BIBI大赞服装设计
- 日本人妻COS《葬送的芙莉莲》尤贝尔:死鱼眼超还原
- 陈升.2019-七天【新乐园】【WAV+CUE】
- 痛仰乐队.2014-愿爱无忧【禾广娱乐】【WAV+CUE】