这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
,需要的朋友可以参考下
这篇文章主要介绍了使用原生的 javascript 来实现轮播图, 在代码底部给大家补充了原生 javascript 实现 banner 图自动轮播切换
下面看下 js 轮播图的实现代码,具体代码如下所示:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/css">
- * {
- padding: 0;
- margin: 0;
- list-style: none;
- border: 0;
- }
- .all {
- width: 500px;
- height: 200px;
- padding: 7px;
- border: 1px solid #ccc;
- margin: 100px auto;
- position: relative;
- }
- .screen {
- width: 500px;
- height: 200px;
- overflow: hidden;
- position: relative;
- }
- .screen li {
- width: 500px;
- height: 200px;
- overflow: hidden;
- float: left;
- }
- .screen ul {
- position: absolute;
- left: 0;
- top: 0px;
- width: 3000px;
- }
- .all ol {
- position: absolute;
- right: 10px;
- bottom: 10px;
- line-height: 20px;
- text-align: center;
- }
- .all ol li {
- float: left;
- width: 20px;
- height: 20px;
- background: #fff;
- border: 1px solid #ccc;
- margin-left: 10px;
- cursor: pointer;
- }
- .all ol li.current {
- background: yellow;
- }
- #arr {
- display: none;
- }
- #arr span {
- width: 40px;
- height: 40px;
- position: absolute;
- left: 5px;
- top: 50%;
- margin-top: -20px;
- background: #000;
- cursor: pointer;
- line-height: 40px;
- text-align: center;
- font-weight: bold;
- font-family: '黑体';
- font-size: 30px;
- color: #fff;
- opacity: 0.3;
- border: 1px solid #fff;
- }
- #arr #right {
- right: 5px;
- left: auto;
- }
- </style>
- </head>
- <body>
- <div class="all" id='box'>
- <div class="screen">
- <ul>
- <li><img src="images/1.jpg" width="500" height="200"/></li>
- <li><img src="images/2.jpg" width="500" height="200"/></li>
- <li><img src="images/3.jpg" width="500" height="200"/></li>
- <li><img src="images/4.jpg" width="500" height="200"/></li>
- <li><img src="images/5.jpg" width="500" height="200"/></li>
- </ul>
- <ol>
- </ol>
- </div>
- <div id="arr"><span id="left"><</span><span id="right">></span></div>
- </div>
- <script>
- function $(element) {
- return document.getElementById(element);
- }
- var box = $("box");
- var screen = box.children[0];
- var ul = screen.children[0];
- var ulLis = ul.children;
- var ol = screen.children[1];
- var arr = $("arr");
- var left = $("left");
- var right = $("right");
- //动态创建小图标
- for (var i = 0; i < ulLis.length; i++) {
- var li = document.createElement("li");
- li.innerHTML = i + 1;
- ol.appendChild(li);
- }
- //设置这些个小图标
- var olLis = ol.children;
- var imgWidth = screen.offsetWidth;
- for (var j = 0; j < olLis.length; j++) {
- olLis[j].index = j;
- olLis[j].onmouseover = function () {
- //排他思想
- for (var i = 0; i < olLis.length; i++) {
- olLis[i].className = "";
- }
- this.className = "current";
- var target = -imgWidth * this.index;
- cutton(ul, target, 20);
- //为了让点击事件和小面的小图标能够一一对应,设置他们的索引值相同
- pic = square = this.index;
- }
- }
- //给小图标设置一个初始样式
- ol.children[0].className = "current";
- //给ul追加一张图
- ul.appendChild(ul.children[0].cloneNode(true));
- //设置箭头的显示与隐藏
- box.onmouseover = function () {
- arr.style.display = "block";
- //鼠标放上去的时候,不再自动滚动
- clearInterval(timer);
- }
- box.onmouseout = function () {
- arr.style.display = "none";
- //鼠标离开的时候,继续自动滚动
- timer = setInterval(playNext, 1000);
- }
- //设置点击左右小箭头的事件且要求小图标要跟着变化
- //1.设置点击右侧箭头
- var pic = 0;//记录当前为第几项用
- var square = 0;//记录小图标的索引值
- /* right.onclick = function () {//存在的问题是当移动到最后一张的时候,无法跳转到第一张
- pic++;
- var target = -pic * imgWidth;
- cutton(ul, target, 20);
- }*/
- //方法改进
- /*right.onclick = function () {
- //先对pic做一个判断,当pic的值为5的时候,实现一个跳转
- if (pic == ulLis.length - 1) {
- ul.style.left = 0;
- pic = 0;
- }
- pic++;
- var target = -pic * imgWidth;
- cutton(ul, target, 20);
- if (square == olLis.length - 1) {
- square = -1;//下面会加一,就变成了0
- }
- square++;
- //排他思想
- for (var i = 0; i < olLis.length; i++) {
- olLis[i].className = "";
- }
- olLis[square].className = "current";
- }*/
- //使用封装函数
- right.onclick = function () {
- playNext();
- }
- //2.设置点击左侧箭头
- left.onclick = function () {//要判断一下当pic为零时的情况
- if (pic == 0) {
- ul.style.left = -imgWidth * (ulLis.length - 1) + "px";//要记得加单位
- pic = ulLis.length - 1;//给pic重新赋一个值
- }
- pic--;
- var target = -pic * imgWidth;
- cutton(ul, target, 20);
- //设置小图标样式
- if (square == 0) {
- square = olLis.length;
- }
- square--;
- for (var i = 0; i < olLis.length; i++) {
- olLis[i].className = "";
- }
- olLis[square].className = "current";
- }
- //设置自动滚动
- //1.封装点击右侧小箭头事件
- function playNext() {
- //先对pic做一个判断,当pic的值为5的时候,实现一个跳转
- if (pic == ulLis.length - 1) {
- ul.style.left = 0;
- pic = 0;
- }
- pic++;
- var target = -pic * imgWidth;
- cutton(ul, target, 20);
- if (square == olLis.length - 1) {
- square = -1;//下面会加一,就变成了0
- }
- square++;
- //排他思想
- for (var i = 0; i < olLis.length; i++) {
- olLis[i].className = "";
- }
- olLis[square].className = "current";
- }
- //2.调用这个封装的函数,并且设置一个间歇性计时器
- var timer = null;
- timer = setInterval(playNext, 1000);
- //封装函数
- function cutton(obj, target, stp) {
- clearInterval(obj.timer);
- obj.timer = setInterval(function () {
- var step = stp;
- step = obj.offsetLeft > target ? -step : step;
- if (Math.abs(obj.offsetLeft - target) >= Math.abs(step)) {
- obj.style.left = obj.offsetLeft + step + "px";
- } else {
- obj.style.left = target + "px";
- clearInterval(obj.timer);
- }
- }, 15)
- }
- </script>
- </body>
- </html>
补充:原生 javascript 实现 banner 图自动轮播切换
一般在做 banner 轮播图的时候都是用 jquery,因为代码少,方便,不需要花费很长的时间去获取某个元素作为变量,然后再进行操作,只要一个 $ 就搞定了。但是今天我用原生的 javascript 做了一下这个轮播效果,感觉还行,以下是部分 js 源代码,仅供参考!文章底部查看效果演示。
1、鼠标离开 banner 图,每隔 2s 切换一次;
2、鼠标滑过下方的小按钮,可以切换图片;
3、鼠标点击左右按钮,可以切换图片。
- var oPic,oLi,anniu,aLi,aLength,num,timer,oG,_index,oSpan;
- window.onload = function(){
- oPic = document.getElementsByClassName("pic")[0];
- oLi = oPic.getElementsByTagName("li");
- anniu = document.getElementsByClassName("anniu")[0];
- aLi = anniu.getElementsByTagName("li");
- aLength = aLi.length;
- num = 0;
- oG = document.getElementsByClassName("g")[0];
- oSpan = oG.getElementsByTagName("span");
- oLeft = oSpan[0];
- oRight = oSpan[1];
- start();
- oG.onmouseover = end;
- oG.onmouseout = start;
- for(var j=0; j<aLength; j++){
- aLi[j].index = j;
- aLi[j].onmouseover = change;
- }
- oRight.onclick = time;
- oLeft.onclick = times;
- }
- //自动轮播开始或结束
- function start(){
- timer = setInterval(time,2000);
- hide();
- }
- function end(){
- clearInterval(timer);
- show();
- }
- //图片切换++
- function time(){
- for(var i=0; i<aLength; i++){
- oLi[i].style.display = "none";
- aLi[i].className = "";
- }
- num++;
- num = num % 4;
- oLi[num].style.display = "block";
- aLi[num].className = "on";
- }
- //图片切换--
- function times(){
- for(var i=0; i<aLength; i++){
- oLi[i].style.display = "none";
- aLi[i].className = "";
- }
- num--;
- num = (num+4)%4;
- oLi[num].style.display = "block";
- aLi[num].className = "on";
- }
- //鼠标滑过按钮,图片轮播
- function change(){
- _index = this.index;
- for(var k=0; k<aLength; k++){
- aLi[k].className = "";
- oLi[k].style.display = "none";
- }
- aLi[_index].className = "on";
- oLi[_index].style.display = "block";
- }
- //左右按钮显示或隐藏
- function show(){
- oSpan[0].style.display = "block";
- oSpan[1].style.display = "block";
- }
- function hide(){
- oSpan[0].style.display = "none";
- oSpan[1].style.display = "none";
- }
以上所述是小编给大家介绍的使用原生的 javascript 来实现轮播图,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0525/327315.html