轮播图代码

最新推荐文章于 2023-08-12 09:41:18 发布
最新推荐文章于 2023-08-12 09:41:18 发布
阅读量913 收藏 2
点赞数
分类专栏： 笔记 文章标签： 轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DTechnology/article/details/79981170
版权

html

<!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: #DB192A;
    }

    #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 src="common.js"></script>
<script>
  //获取最外面的div
  var box = my$("box");
  //获取相框
  var screen = box.children[0];
  //获取相框的宽度
  var imgWidth = screen.offsetWidth;
  //获取ul
  var ulObj = screen.children[0];
  //获取ul中的所有的li
  var list = ulObj.children;
  //获取ol
  var olObj = screen.children[1];
  //焦点的div
  var arr = my$("arr");

  var pic = 0;//全局变量
  //创建小按钮----根据ul中的li个数
  for (var i = 0; i < list.length; i++) {
    //创建li标签,加入到ol中
    var liObj = document.createElement("li");
    olObj.appendChild(liObj);
    liObj.innerHTML = (i + 1);
    //在每个ol中的li标签上添加一个自定义属性,存储索引值
    liObj.setAttribute("index", i);
    //注册鼠标进入事件
    liObj.onmouseover = function () {
      //先干掉所有的ol中的li的背景颜色
      for (var j = 0; j < olObj.children.length; j++) {
        olObj.children[j].removeAttribute("class");
      }
      //设置当前鼠标进来的li的背景颜色
      this.className = "current";
      //获取鼠标进入的li的当前索引值
      pic = this.getAttribute("index");
      //移动ul
      animate(ulObj, -pic * imgWidth);
    };
  }
  //设置ol中第一个li有背景颜色
  olObj.children[0].className = "current";


  //克隆一个ul中第一个li,加入到ul中的最后=====克隆
  ulObj.appendChild(ulObj.children[0].cloneNode(true));

  //自动播放
 var timeId= setInterval(clickHandle,1000);

  //鼠标进入到box的div显示左右焦点的div
  box.onmouseover = function () {
    arr.style.display = "block";
    //鼠标进入废掉之前的定时器
    clearInterval(timeId);
  };
  //鼠标离开到box的div隐藏左右焦点的div
  box.onmouseout = function () {
    arr.style.display = "none";
    //鼠标离开自动播放
    timeId= setInterval(clickHandle,1000);
  };
  //右边按钮
  my$("right").onclick =clickHandle;
  function clickHandle() {
    //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
    //所以,如果用户再次点击按钮,用户应该看到第二个图片
    if (pic == list.length - 1) {
      //如何从第6个图,跳转到第一个图
      pic = 0;//先设置pic=0
      ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
    }
    pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
    animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
    //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
    if (pic == list.length - 1) {
      //第五个按钮颜色干掉
      olObj.children[olObj.children.length - 1].className = "";
      //第一个按钮颜色设置上
      olObj.children[0].className = "current";
    } else {
      //干掉所有的小按钮的背景颜色
      for (var i = 0; i < olObj.children.length; i++) {
        olObj.children[i].removeAttribute("class");
      }
      olObj.children[pic].className = "current";
    }

  };
  //左边按钮
  my$("left").onclick = function () {
    if (pic == 0) {
      pic = 5;
      ulObj.style.left = -pic * imgWidth + "px";
    }
    pic--;
    animate(ulObj, -pic * imgWidth);
    //设置小按钮的颜色---所有的小按钮干掉颜色
    for (var i = 0; i < olObj.children.length; i++) {
      olObj.children[i].removeAttribute("class");
    }
    //当前的pic索引对应的按钮设置颜色
    olObj.children[pic].className = "current";

  };

  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
      //获取元素的当前的位置,数字类型
      var current = element.offsetLeft;
      //每次移动的距离
      var step = 10;
      step = current < target ? step : -step;
      //当前移动到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval(element.timeId);
        //直接到达目标
        element.style.left = target + "px";
      }
    }, 10);
  }
</script>


<script>


  //  var num=0;
  //  function f1(){
  //
  //    num=1000;
  //  }
  //  f1();
  //  console.log(num);
</script>
</body>
</html>
common.js 
/**
 * Created by Administrator on 2016/7/27.
 */
/**
 * Created by Administrator on 2016/7/21.
 *
 */

/*
 * 该函数是返回的是指定格式的日期,是字符串类型
 * 参数:date ----日期
 * 返回值: 字符串类型的日期
 * */
function getDatetoString(date) {
    var strDate;//存储日期的字符串
    //获取年
    var year=date.getFullYear();
    //获取月
    var month=date.getMonth()+1;
    //获取日
    var day=date.getDate();
    //获取小时
    var hour=date.getHours();
    //获取分钟
    var minute=date.getMinutes();
    //获取秒
    var second=date.getSeconds();
    hour=hour<10?"0"+hour:hour;
    minute=minute<10?"0"+minute:minute;
    second=second<10?"0"+second:second;
    //拼接
    strDate=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;//隐藏问题,关于变量声明的位置
    return strDate;
}

//根据id获取元素对象
function my$(id) {
    return document.getElementById(id);
}


/*
 *
 * innerText属性IE中支持
 * textContent火狐中支持
 * dvObj.innerText="您好";设置innerText的值
 * console.log(dvObj.innerText);获取innerText的值
 * 因为上述原因,inerText有时候需要设置值，有时候需要获取值
 * 所以,需要写一个兼容的代码能在火狐中使用,也可以在IE中使用
 *
 *
 * */

/*
 *设置innerText属性的值
 * element-----为某个元素设置属性值
 * content-----设置的值
 * */
function setInnerText(element,content) {
    if(typeof element.textContent==="undefined"){
        //IE浏览器
        element.innerText=content;
    }else{
        element.textContent=content;
    }
}
/*
 * 获取innerText属性的值
 * element 要获取的元素
 * 返回的是该元素的innerText值
 * */
function getInnerText(element) {
    if(typeof element.textContent==="undefined"){
        //IE浏览器
        return element.innerText;
    }else{
        return element.textContent;
    }
}


//获取当前元素前一个元素
function getPreviousElement(element) {
    if(element.previousElementSibling){
        return element.previousElementSibling;
    }else{
        var ele=element.previousSibling;
        while (ele&&ele.nodeType!==1){
            ele=ele.previousSibling;
        }
        return ele;
    }
}
//获取当前元素的后一个元素
function getNextElement(element) {
    if(element.nextElementSibling){
        return element.nextElementSibling;
    }else{
        var ele=element.nextSibling;
        while(ele&&ele.nodeType!==1){
            ele=ele.nextSibling;
        }
        return ele;
    }
}

//获取父元素中的第一个元素
function getFirstElementByParent(parent) {
    if(parent.firstElementChild){
        return parent.firstElementChild;
    }else{
        var ele=parent.firstChild;
        while (ele&&ele.nodeType!==1){
            ele=ele.nextSibling;
        }
        return ele;
    }
}
//获取父元素中的最后一个元素
function getLastElementByParent(parent) {
    if(parent.lastElementChild){
        return parent.lastElementChild;
    }else{
        var ele=parent.lastChild;
        while(ele&&ele.nodeType!==1){
            ele=ele.previousSibling;
        }
        return ele;
    }
}

//获取兄弟元素
function getsiblings(ele) {
    if(!ele)return;//判断当前的ele这个元素是否存在
    var elements=[];//定义数组的目的就是存储当前这个元素的所有的兄弟元素
    var el=ele.previousSibling;//当前元素的前一个节点
    while (el){
        if (el.nodeType===1){//元素
            elements.push(el);//加到数组中
        }
        el=el.previousSibling;
    }
    el=ele.nextSibling;
    while(el){
        if(el.nodeType===1){
            elements.push(el);
        }
        el=el.nextSibling;
    }
    return elements;
}
//    //能力检测多个浏览器为同一个对象注册多个事件
var EventTools= {
    //为对象添加注册事件
    addEventListener: function (element, eventName, listener) {
        if (element.addEventListener) {
            element.addEventListener(eventName, listener, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + eventName, listener)
        } else {
            element["on" + eventName] = listener;
        }
    },
    //为对象移除事件
    removeEventListener: function (element, eventName, listener) {
        if (element.removeEventListener) {
            element.removeEventListener(eventName, listener, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + eventName, listener);
        } else {
            element["on" + eventName] = null;
        }
    },
    //获取参数e
    getEvent: function (e) {
        return e || window.event;
    },
    getPageX: function (e) {
        if (e.pageX) {
            return e.pageX;
        } else {
            //有的浏览器把高度设计在了文档的第一个元素中了
            //有的浏览器把高度设计在了body中了
            //document.documentElement.scrollTop;//文档的第一个元素
            //document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
            return e.clientX + scrollLeft;
        }
    },
    getPageY: function (e) {
        if (e.pageY) {
            return e.pageY;
        } else {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            return e.clientY + scrollTop;
        }
    }

};

//获取元素的当前位置,移动,每次移动多少像素
// function animate(element,target) {
//     //每次调用这个函数的时候先清理之前的计时器
//     clearInterval(element.setId);
//     element.setId=setInterval(function () {
//         //获取元素当前的位置
//         var current=element.offsetLeft;
//         //每次移动的像素
//         var step=15;
//         //判断移动的步数应该是正数还是负数
//         step=current<target?step:-step;
//         //当前的位置=之前的当前位置+移动的步数
//         current=current+step;
//         if(Math.abs(target-current)<Math.abs(step)){
//             //把计时器清理
//             clearInterval(element.setId);
//             element.style.left=target+"px";
//         }else{
//             //赋值给要移动的元素
//             element.style.left=current+"px";
//         }
//     },20);
// }
//
效果图

DTechnology
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页 多幅图片轮番显示的代码
05-30
韩顺平jsp视频教程里的多图轮番显示代码 解压后打开index.html 可看效果
轮播图详解（完整代码在最后）
m0_48639378的博客
07-06 6264
轮播图
【学习笔记56】轮播图的分析
yizhiyang
11-29 284
轮播图的分析
JS实战轮播图详细代码
一步一个脚印，踏实努力，向着目标前进
06-12 3700
这个例子实现了一个简单的轮播图，通过CSS设置轮播图的样式、布局，通过JS实现轮播图的切换、导航等功能。可以根据实际需求进行修改和扩展。
js案例：简单的图片轮播（代码逐行讲解，建议先看完整代码）
qq_52799985的博客
08-09 5312
做一个简单的js图片轮播效果并不需要特别多的知识点，代码逐行讲解，小白必看。
jQuery响应式无限轮播图片代码
04-07
jQuery响应式无限轮播图片代码是一款可以自动将图片居中对齐，组成首尾相接的一组图片，通过导航按钮或移动触摸滑动来前后切换图片。
原生JS京东轮播图代码
12-11
本文实例为大家分享了JS轮播图的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel=...
ASP.NET写的轮播图代码页面
11-01
ASP.NET写的轮播图代码页面，可以参考这个写法设计自己的asp.net页面或者网站，可以用于实验或者课程报告等
web前端自动滚动且点击切换轮播图代码
10-23
用于网站前端开发，页面展示效果动态轮播图滚动，且可点击操作切换轮播图展示代码
7款H5自适应广告轮播图代码免费下载
10-08
7款H5自适应广告轮播图代码免费下载，主要用于网站首页图文轮播风格的调用、广告图片代码图片超链接。适用于手机端、电脑端、平板等其他设备！ 代码特点： 采用HTML5响应式展示效果。 有其中6款自动轮播代码自动...
轮播图（含全部代码：html、css、javascript）
Cap07博客
07-31 5187
代码】轮播图（含全部代码html、css、javascript）
轮播图完整代码详细解析，css+js+html完整代码，可直接复制粘贴使用，仅需改图片即可
最新发布
bsf000000___的博客
08-12 2308
这是一段使用HTML、CSS和JavaScript编写的图片轮播组件。它通过定时器实现自动播放图片，同时提供向左和向右的箭头按钮以手动切换图片。还包括一个圆圈导航，用于显示当前图片的索引，并且可以点击圆圈导航进行图片切换。具体实现步骤如下：以上就是该轮播组件的实现步骤。你可以根据需要进行修改和扩展，例如调整样式、更换图片等。 效果图
轮播图 原生代码（HTML+CSS+JQuery）
qq_69635978的博客
03-29 4601
【代码】轮播图 原生代码（HTML+CSS+JQuery）
轮播图的实现代码
weixin_45273903的博客
01-22 4472
<!DOCTYPE html> <html> <head> <title>轮播图的实现</title> <style> * { padding: 0; margin: 0; } .lunbo { width: 600px; height: 500px...
【HTML+CSS+jQuery】实现轮播图详细代码及详解（带左右切换和分页）
TechnicalXiaobai的博客
07-16 2571
创建了图片对应的圆点导航按钮，并为每个按钮绑定了点击事件，点击按钮时通过。事件来在鼠标悬停在轮播容器上时停止自动轮播，离开时重新开始自动轮播。方法，在图片列表的首尾分别插入了复制的图片，实现无缝轮播的效果。创建了左右切换按钮，并为其绑定了点击事件，通过点击按钮来切换图片。实现自动轮播功能，每隔3000毫秒（3秒）切换到下一张图片。函数来处理图片的动画滑动，实现了无缝轮播的效果。函数来切换图片，并高亮显示对应的按钮。来实现左右切换和图片对应的圆点导航。容器来包裹轮播图片，使用。在图片初始化时，使用了。
HTML+CSS +JS实现轮播图的四种方法
偷只猫来养的博客
06-18 3万+
HTML+CSS +JS实现轮播图 轮播图能够自动播放，当点击左右箭头时可以手动切换图片；当鼠标移入圆点时，自动播放停止，显示当前图片；当鼠标移出圆点时，图片又从当前图片开始自动播放；当鼠标点击圆点时，可以手动切换图片；图片的播放是循环的。 1、布局——HTML + CSS 首先，在页面放一个整体的大盒子，在大盒子中装几个小盒子，分别用于放图片、左右点击箭头、底部切换的圆点。 <div id="box"> <!-- 放图片--> <div id="lunboimg"&
轮播图制作，详细步骤及 HTML+CSS+JS 完整代码
qq_46178261的博客
04-05 5万+
1.轮播图的结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
WEB前端开发：轮播图的实现（H5+C3+JavaScript）(JQuery)
热门推荐
嘻嘻的博客
11-11 5万+
一、轮播图的概念 轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。例如：淘宝，京东，等大型的购物平台。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。 二、轮播图的设计思想 轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为...
实现轮播图效果
Hedia Pan的博客
08-25 929
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滑动效果</title> <link href="slide.css" rel="stylesheet" type="text/css" /> <style> .pic_scroll{ width: 566px } .

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值