JavaScript实现轮播图片完整代码

2024-11-02 21:40:54

本文实例为大家分享了JavaScript实现轮播图片的具体代码，供大家参考，具体内容如下

JS代码注释清晰明了，一看就懂！

<!DOCTYPE html>
<html lang="en">

 <head>
 <meta charset="UTF-8">
 <title>最简单的轮播效果</title>
 <style>
 * {
 margin: 0;
 padding: 0
 }

 .box {
 width: 500px;
 height: 300px;
 border: 1px solid #ccc;
 margin: 100px auto;
 padding: 5px;
 }

 .inner {
 width: 500px;
 height: 300px;
 position: relative;
 overflow: hidden;
 }

 .inner img {
 width: 500px;
 height: 300px;
 vertical-align: top
 }

 ul {
 width: 1000%;
 position: absolute;
 list-style: none;
 left: 0;
 top: 0;
 }

 .inner li {
 float: left;
 }

 ol {
 position: absolute;
 height: 20px;
 right: 20px;
 bottom: 20px;
 text-align: center;
 padding: 5px;
 }

 ol li {
 display: inline-block;
 width: 20px;
 height: 20px;
 line-height: 20px;
 background-color: #fff;
 margin: 5px;
 cursor: pointer;
 }

 ol .current {
 background-color: red;
 }
 </style>
 </head>

 <body>
 <div class="box" id="box">
 <div class="inner">
 <!--轮播图-->
 <ul>
  <li>
  <div><img src="img/001.png" alt=""></div>
  </li>
  <li>
  <div><img src="img/1.png" alt=""></div>
  </li>
  <li>
  <div><img src="img/6.png" alt=""></div>
  </li>
  <li>
  <div><img src="img/3.png" alt=""></div>
  </li>
  <li>
  <div><img src="img/4.png" alt=""></div>
  </li>

 </ul>
 </div>
 </div>
 <script>
 /**
 *
 * @param id 传入元素的id
 * @returns {HTMLElement | null} 返回标签对象，方便获取元素
 */
 function my$(id) {
 return document.getElementById(id);
 }
 //获取各元素，方便操作
 var box = my$("box");
 var inner = box.children[0];
 var ulObj = inner.children[0];
 var list = ulObj.children;
 var olObj = inner.children[1];
 var imgWidth = inner.offsetWidth;
 var right = my$("right");
 var pic = 0;
 //根据li个数，创建小按钮
 for(var i = 0; i < list.length; i++) {
 var liObj = document.createElement("li");
 //olObj.appendChild(liObj);
 liObj.innerText = (i + 1);
 liObj.setAttribute("index", i);
 //为按钮注册mouseover事件
 liObj.onmouseover = function() {
  //先清除所有按钮的样式
  for(var j = 0; j < olObj.children.length; j++) {
  olObj.children[j].removeAttribute("class");
  }
  this.className = "current";
  pic = this.getAttribute("index");
  animate(ulObj, -pic * imgWidth);
 }
 }
 //设置ol中第一个li有背景颜色
 //olObj.children[0].className = "current";
 //克隆一个ul中第一个li,加入到ul中的最后=====克隆
 ulObj.appendChild(ulObj.children[0].cloneNode(true));
 var timeId = setInterval(onmouseclickHandle, 4000);
 function onmouseclickHandle() {
 //如果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移动出去一个图片

 }
 //设置任意的一个元素,移动到指定的目标位置
 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>
 </body>

</html>

精彩专题分享：jQuery图片轮播 JavaScript图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

原生js和jquery实现图片轮播淡入淡出效果

图片轮播有很多种方式,这里采用其中的淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后
JS实现简易图片轮播效果的方法

本文实例讲述了JS实现简易图片轮播效果的方法.分享给大家供大家参考.具体如下: 这里使用JS制作简易图片轮播效果: 制作比较粗糙,使用的图片是width:660ppx,height:550px; 效果图如下: 代码部分如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; char
原生javascript实现图片轮播效果代码

看到BlueDream在他博客上写的javascript仿QQ滑动菜单的效果,代码实在是优雅,相比较差别一下就凸显了,下次再把他代码的精髓偷过来,嘿嘿. [原理简述] html和css跟JQuery实现图片轮播效果里面的一样,略去.主要是几个公共函数,渐显和渐失,用闭包实现.至于主体逻辑部分,非常一般. [程序源码] 贴几个公共函数算了,fadeIn,渐显,fadeOut,渐失复制代码代码如下: function id(name) {return document.getElementByI
js实现支持手机滑动切换的轮播图片效果实例

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
js图片轮播效果实现代码

首先给大家看一看js图片轮播效果,如下图具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去三.定义图片切换函数提示: 1.遍历所有放数字索引的li,将每个li上的类去掉. 2.根据传递过来的index值找到对应的li给
最简单的JavaScript图片轮播代码(两种方法)

通过改变每个图片的opacity属性: 素材图片: 代码一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: ; padding: ; } ul { list-style-type: non
js 图片轮播(5张图片)

演示地址:http://img.jb51.net/online/picPlayer/picplay.htm 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199
带左右箭头图片轮播的JS代码

轮播图实现效果见下图,图片能自己轮播,点击左右按钮进行翻页轮播,鼠标悬停图片或者标题上,停止轮播: 效果图为: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/19
js图片自动轮播代码分享(js图片轮播)

1.利用图片width显示位置来播放图片,技术:.offsetWidth .aBtn[i].index = i .setInterval() .oUl[0].style.left = .onclick()2.利用数组放入图片经行轮播,技术:setInterval().没有onclick() 图片轮播12js.html 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:
原生js和jquery实现图片轮播特效

(1)首先是页面的结构部分对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

JavaScript实现轮播图片完整代码

相关推荐

随机推荐