首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js控制多图左右滚动切换效果代码分享

Posted in Javascript onAugust 26, 2015

本文实例讲述了js控制多图左右滚动切换效果。分享给大家供大家参考。具体如下：
这是一款纯js实现点击左右按钮图片自动左右平滑滚动，默认5个一组左右滚动，可以手动修改js参数更改滑动数量。
运行效果图：-------------------查看效果-------------------

js控制多图左右滚动切换效果代码分享

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的js控制多图左右滚动切换效果代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js控制多图左右滚动切换效果</title>
<link href="css/jiaobenzhijia.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
window.onload = function () {
 var oBtnLeft = document.getElementById("goleft");
 var oBtnRight = document.getElementById("goright");
 var oDiv = document.getElementById("indexmaindiv");
 var oDiv1 = document.getElementById("maindiv1");
 var oUl = oDiv.getElementsByTagName("ul")[0];
 var aLi = oUl.getElementsByTagName("li");
 var now = -5 * (aLi[0].offsetWidth + 13);
 oUl.style.width = aLi.length * (aLi[0].offsetWidth + 13) + 'px';
 oBtnRight.onclick = function () {
 var n = Math.floor((aLi.length * (aLi[0].offsetWidth + 13) + oUl.offsetLeft) / aLi[0].offsetWidth);

 if (n <= 5) {
 move(oUl, 'left', 0);
 }
 else {
 move(oUl, 'left', oUl.offsetLeft + now);
 }
 }
 oBtnLeft.onclick = function () {
 var now1 = -Math.floor((aLi.length / 5)) * 5 * (aLi[0].offsetWidth + 13);

 if (oUl.offsetLeft >= 0) {
 move(oUl, 'left', now1);
 }
 else {
 move(oUl, 'left', oUl.offsetLeft - now);
 }
 }
 var timer = setInterval(oBtnRight.onclick, 5000);
 oDiv.onmouseover = function () {
 clearInterval(timer);
 }
 oDiv.onmouseout = function () {
 timer = setInterval(oBtnRight.onclick, 5000);
 }

};

function getStyle(obj, name) {
 if (obj.currentStyle) {
 return obj.currentStyle[name];
 }
 else {
 return getComputedStyle(obj, false)[name];
 }
}

function move(obj, attr, iTarget) {
 clearInterval(obj.timer)
 obj.timer = setInterval(function () {
 var cur = 0;
 if (attr == 'opacity') {
 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
 }
 else {
 cur = parseInt(getStyle(obj, attr));
 }
 var speed = (iTarget - cur) / 6;
 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 if (iTarget == cur) {
 clearInterval(obj.timer);
 }
 else if (attr == 'opacity') {
 obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
 obj.style.opacity = (cur + speed) / 100;
 }
 else {
 obj.style[attr] = cur + speed + 'px';
 }
 }, 30);
} 
</script>
</head>
<body style="background:#CCC;">

<div class="indexmaindiv" id="indexmaindiv">
 <div class="indexmaindiv1 clearfix" >
 <div class="stylesgoleft" id="goleft"></div>
 <div class="maindiv1 " id="maindiv1">
 <ul id="count1">
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/1.jpg" /></div>
 <div class="teanames">乐静老师1</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="https://3water.com"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/2.jpg" /></div>
 <div class="teanames">乐静老师2</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="https://3water.com"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/3.jpg" /></div>
 <div class="teanames">乐静老师3</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="https://3water.com"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/4.jpg" /></div>
 <div class="teanames">乐静老师4</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="https://3water.com"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/5.jpg" /></div>
 <div class="teanames">乐静老师5</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="https://3water.com"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/6.jpg" /></div>
 <div class="teanames">乐静老师6</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="https://3water.com"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/7.jpg" /></div>
 <div class="teanames">乐静老师7</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="https://3water.com"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/8.jpg" /></div>
 <div class="teanames">乐静老师8</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="https://3water.com"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/1.jpg" /></div>
 <div class="teanames">乐静老师9</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="https://3water.com"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/2.jpg" /></div>
 <div class="teanames">乐静老师10</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="https://3water.com"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/3.jpg" /></div>
 <div class="teanames">乐静老师11</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="https://3water.com"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/4.jpg" /></div>
 <div class="teanames">乐静老师12</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="https://3water.com"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/5.jpg" /></div>
 <div class="teanames">乐静老师13</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="https://3water.com"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/6.jpg" /></div>
 <div class="teanames">乐静老师14</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="https://3water.com"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/7.jpg" /></div>
 <div class="teanames">乐静老师15</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="https://3water.com"></a>
 </div>
 </li>
 </ul>
 </div>
 <div class="stylesgoright" id="goright"></div>
 </div>
</div>
</body>
</html>

以上就是为大家分享的js控制多图左右滚动切换效果代码，希望大家可以喜欢。

js控制多图左右滚动切换效果代码分享

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery select(列表)的操作（取值/赋值）
Mar 16 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
详解Bootstrap创建表单的三种格式（一）
Jan 04 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
javascript表单正则应用
Feb 04 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
简介alert()与console.log()的不同
Aug 26 #Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 #Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 #Javascript
jquery实现的横向二级导航效果代码
Aug 26 #Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 #Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 #Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 #Javascript
责任书(145) 竞聘书(31) 聘任书(31) 决心书(42) 意向书(73) 主持词(345) 活动总结(790) 广告词(105) 承诺书(369) 建议书(203)
You might like
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
解析php中curl_multi的应用
2013/07/17 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
PHP7常量数组用法分析
2016/09/26 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
js静态作用域的功能。
2006/12/25 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
详解JavaScript对数组操作（添加/删除/截取/排序/倒序）
2019/04/28 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
Python bytes string相互转换过程解析
2020/03/05 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
adidas澳大利亚官方网站：adidas Australia
2018/04/15 全球购物
Nº21官方在线商店：numeroventuno.com
2019/09/26 全球购物
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
numpy数据类型dtype转换实现
2021/04/24 Python
Pandas 稀疏数据结构的实现
2021/07/25 Python