大图轮播js

<!DOCTYPE html>
<html>

<head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           * {
               margin: 0px;
               padding: 0px;
           }

           #stage {
               width: 400px;
               height: 40px;
               border: 3px solid black;
               margin: 100px;
               overflow: hidden;
               position: relative;
           }

           #banner {
               width: 2400px;
               height: 300px;
               background-color: rosybrown;
           }

           .items {
               width: 400px;
               height: 40px;
               color: white;
               font-size: 25px;
               text-align: center;
               line-height: 300px;
               float: left;
           }

           .btn-l,
           .btn-r {
               width: 50px;
               height: 300px;
               background-color: black;
               opacity: 0.5;
               color: white;
               font-size: 40px;
               line-height: 300px;
               text-align: center;
               position: absolute;
               top: 0px;
           }

           .btn-l {
               left: 0px;
           }

           .btn-r {
               right: 0px;
           }

           .btn-l:hover,
           .btn-r:hover {
               cursor: pointer;
               /*透明度*/
               opacity: 0.2;
           }
       </style>
   </head>

<body>
       <div id="stage">
           <div class="btn-l">
               <</div>
                   <div class="btn-r">></div>
                   <div id="banner">
                       <div class="items" style="">平洋房产真实房源xxxx套</div>
                       <div class="items" style="">平阳房产真实在线交易xxxx套</div>
                       <div class="items" style="">平阳房产真实在线交易xxxx套</div>
                       <div class="items" style="">平阳房产真实在线交易xxxx套</div>
                       <div class="items" style="">平阳房产真实在线交易xxxx套</div>
                       <div class="items" style="">平洋房产真实房源xxxx套</div>
                   </div>
           </div>
   </body>

</html>
<script>
   var btn_l = document.getElementsByClassName('btn-l')[0];
   var btn_r = document.getElementsByClassName("btn-r")[0];
   var banner = document.getElementById("banner");
   var count = 1;
   var arr = [];

btn_r.onclick = function() {
       if(count < 6) {
           count++;
           arr.push(window.setInterval("move_left()", 20));
       } else if(count == 6) {
           count = 1;
           banner.style.marginLeft = 0 + "px";

count++;
           arr.push(window.setInterval("move_left()", 20));
       }
   }

btn_l.onclick = function() {
       if(count > 1) {
           count--;
           arr.push(window.setInterval("move_right()", 20));
       } else if(count = 1) {
           count = 5;
           banner.style.marginLeft = -2000 + "px";

count++;
           arr.push(window.setInterval("move_left()", 20));
       }
   }

function move_left() {
       if(banner.offsetLeft == (count - 1) * (-400)) {
           clear();
       } else {
           banner.style.marginLeft = banner.offsetLeft - 20 + "px";
       }
   }

function move_right() {
       if(banner.offsetLeft == (count - 1) * (-400)) {
           clear();
       } else {
           banner.style.marginLeft = banner.offsetLeft + 20 + "px";
       }
   }

function clear() {
       for(var x in arr) {
           window.clearInterval(arr[x]);
       }
   }
   //-----------------------------   分割线--------------------------------
</script>

大图轮播js的更多相关文章

利用JS做网页特效——大图轮播
大图轮播完整流程代码操作: <style> * { margin: 0px; padding: 0px; ...
[DBW]大图轮播，可通过两种方法实现
通过在div中加入表格,实现大图轮播,代码如下: 整体的思路: 1.在div中嵌入表格,设置div的宽和高,设置成图片大小,确定其位置,将图片插入表格,超出div部分隐藏 2.在js中定义一个变量接受 ...
bootstrap大图轮播手机端不能手指滑动解决办法
网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上 ...
CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
网站图片的轮播JS代码
这是几个网站的轮播JS效果,实现图片按照时间来切换,目前有几个站实现该功能,特别是浴室柜网站改版前,以下就是JS具体内容可以自己改下路径就可以用的linkarr = new Array();picar ...
js轮播功能标签自动切换同页面多轮播js
需要加入jquery 1.43及以上版本下面还有个简单版,一个页面只支持一个轮播同页面多轮播js <div> <div class="yt_content"& ...
纯原生JS大图轮播
CSS部分: CSS: <style type="text/css"> #banner { position: relative; width: 500px; heig ...
JQUERY写大图轮播；附jquery的hover()方法、animate()方法、find()方法
思想:黑框设置超出部分隐藏. 红框往左移动,通过判断红框左边框距离黑框左边框的像素值,来实现红框的移动. 绿框在最上层,放每张图片的说明和序号. 一:html部分(大框.图片部分.箭头部分.图片介绍部 ...
jQuery实现大图轮播
css样式: *{ margin: 0; padding: 0;}ul{ list-style:none;}.slideShow{ width: 620px; heigh ...

随机推荐

this指针和类的继承
神秘的家伙在对象的世界里,有一个特殊的指针,它叫做this.我们从来没有见过他,但是他却从来都存在.我们通过一个典型的例子来认识它: class Human { char fishc; Human( ...
Task 的入门
https://www.cnblogs.com/huangxincheng/archive/2012/04/03/2430638.html
EF 集合版增删查改
一篇SSM框架整合友好的文章（二）
上一篇讲述了DAO 层,mybatis实现数据库的连接,DAO层接口设计,以及mybtis和spring的整合.DAO层采用接口设计方式实现,接口和SQL实现的分离,方便维护.DAO层所负责的仅仅是接 ...
11-UITableView
UITableView 掌握设置UITableView的dataSource.delegate UITableView多组数据和单组数据的展示 UITableViewCell的常见属性 UITabl ...
ES6学习（三）：数组的扩展
chapter08 数组的扩展 8.1 扩展运算符 8.1.1 扩展运算符的含义 ... 如同rest运算符的逆运算,将一个数组转换为用逗号分隔的参数序列. console.log(...[1, 2, ...
Map the Debris -freecodecamp算法题目
Map the Debris 1.要求返回一个数组,其内容是把原数组中对应元素的平均海拔转换成其对应的轨道周期. 原数组中会包含格式化的对象内容,像这样 {name: 'name', avgAlt: ...
没有CTO的Netflix有哪些值得我们学习的工程文化?
作者介绍: 杨波,拍拍贷基础框架研发总监.具有超过 10 年的互联网分布式系统研发和架构经验,曾先后就职于:eBay 中国研发中心(eBay CDC),任资深研发工程师,参与亿贝开放 API 平台研发 ...
用Java读取xml文件内容
在AXP中,DOM解析器是1 Document Builder类的一个实例,该实例由 DocumenBailderfactorv类负责创,步如下 DocumentBuilderFactory fa ...
udp回显客户端发送的数据
这里让客户端给服务端发送的数据被服务端自动发回来客户端: import socket client_socket = socket.socket(socket.AF_INET, socket.SOC ...

大图轮播js

大图轮播js的更多相关文章

随机推荐

热门专题