html 无缝轮播图完整代码
2024-05-10 08:14:37
1,实现轮播效果
2，实现代码
<!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/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 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='all'>
<div class="screen" id="screen"><ul id="ul"><li><img src="data:images/1.jpg" width="500" height="200" /></li><li><img src="data:images/2.jpg" width="500" height="200" /></li><li><img src="data:images/3.jpg" width="500" height="200" /></li><li><img src="data:images/4.jpg" width="500" height="200" /></li><li><img src="data:images/5.jpg" width="500" height="200" /></li></ul><ol></ol><div id="arr"><span id="left"><</span><span id="right">></span></div></div>
</div>
</body>
</html>
<script>//需求：无缝轮播图//步骤：//1.老三步。获取相关元素。//2.补齐相互盒子//1.复制第一张图片所在的li，填入所在的ul中。//2.生成相关的ol中的li。//3.点亮第一个ol中的li。//3.鼠标放到小方块儿上，轮播图片。//4.添加定时器。//5.左右切换的按钮。//1.老三步。获取相关元素。var box = document.getElementById("all");var ul = box.children[0].children[0];var ol = box.children[0].children[1];var ulLiArr = ul.children;//2.补齐相互盒子//1.复制第一张图片所在的li，填入所在的ul中。var newLi = ulLiArr[0].cloneNode(true);ul.appendChild(newLi);//2.生成相关的ol中的li。for(var i=0;i<ulLiArr.length-1;i++){var newOlLi = document.createElement("li");newOlLi.innerHTML = i+1;ol.appendChild(newOlLi);}//3.点亮第一个ol中的li。var olLiArr = ol.children;ol.children[0].className = "current";//3.鼠标放到小方块儿上，轮播图片。for(var i=0;i<olLiArr.length;i++){olLiArr[i].index = i;olLiArr[i].onmouseover = function () {for(var j=0;j<olLiArr.length;j++){olLiArr[j].className = "";}olLiArr[this.index].className = "current";animate(ul,-this.index*ul.children[0].offsetWidth);key = square = this.index;}}//4.添加定时器。var timer = null;var key = 0;var square = 0;timer = setInterval(autoPlay,1000);function autoPlay(){key++;square++;if(key>olLiArr.length){key=1;ul.style.left = 0;}animate(ul,-key*ul.children[0].offsetWidth);square = square>olLiArr.length-1?0:square;for(var j=0;j<olLiArr.length;j++){olLiArr[j].className = "";}olLiArr[square].className = "current";}//5.鼠标移开开启定时器，鼠标放上去开启定时器。box.onmouseover = function () {clearInterval(timer);}box.onmouseout = function () {timer = setInterval(autoPlay,1000);}//6.左右切换的按钮。var btnArr = box.children[0].children[2].children;btnArr[0].onclick = function () {key--;square--;if(key<0){key=4;ul.style.left = -5*ul.children[0].offsetWidth + "px";}animate(ul,-key*ul.children[0].offsetWidth);square = square<0?olLiArr.length-1:square;for(var j=0;j<olLiArr.length;j++){olLiArr[j].className = "";}olLiArr[square].className = "current";}btnArr[1].onclick = function () {autoPlay();}// 基本封装function animate(obj,target) {clearInterval(obj.timer);var speed = obj.offsetLeft < target ? 15 : -15;obj.timer = setInterval(function() {var result = target - obj.offsetLeft;obj.style.left = obj.offsetLeft + speed + "px";if(Math.abs(result) <= 15) {obj.style.left = target + "px";clearInterval(obj.timer);}},10);}</script>
html 无缝轮播图完整代码相关推荐
- HTML轮播图完整代码 (原生Javascript）
HTML轮播图完整代码 (原生Javascript) <!DOCTYPE html> <html><head><meta charset="utf- ...
- JS原生实现简单的轮播图(完整代码,一看就懂)
实现完后的效果图: 实现思路: 先实现能左右箭头点击能实现图片的更换,也就是五张图片先隐藏然后看一下当前要现在第几张就让它显示,其他四张隐藏. 需要注意的地方是当前图片是第一张或第五张的时候我们要加判 ...
- 原生js+css 实现轮播图 完整代码
利用原生的js实现轮播图,可以添加到自己的UI库中,在以后的项目中对其进行修改然后添加到已有项目中. 先写出css部分和html部分,直接上代码 <!DOCTYPE html> <h ...
- 左右无缝轮播html,JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: 无缝轮播图 *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;h ...
- 使用jQuery完成无缝轮播图案例
前言: 一.前面给大家讲了关于css的一些有趣的小案例,这一期来给大家介绍下jQuery,jQuery的使用相比较js的使用比较简单,因为jQuery会自动给你生成循环函数,使代码简洁,相比较js实现 ...
- javaScript小案例------js实现无缝轮播图效果篇
原生js书写无缝轮播图 javaScript无缝轮播图思路及源码 无缝轮播图效果 总体思路 下面附上代码: html css animate.js index.js javaScript无缝轮播图思路 ...
- jquery实现动态左右无缝轮播图
JQ代码实现动态无缝轮播图功能 相比之下 运用jquery比js原生代码 书写更为方便 简介 通俗易懂 以下为代码: <!DOCTYPE html> <html><hea ...
- 左右无缝轮播图的实现
无缝轮播图: <title>无缝轮播图</title><style>*{margin: 0;padding:0; }ul{list-style: none;}.ba ...
- JavaScript实现无缝轮播图效果
通过原生js实现无缝轮播效果. 思路: 1.利用html+css完成轮播图片,按钮,底部小点的整体效果的布局. 2.通过原生js完成图片轮播,无缝自动切换,底部小点随图片切换而切换. 步骤1: 建立无 ...
最新文章
- iOS开发基础知识--碎片44
- vscode 使用 ssh 登录
- Web前端笔记-2D图形平面内平移定位（two.js）
- MSP430杂谈--AD7793硬件SPI驱动与模拟SPI驱动
- 模拟时钟在LCD上的显示
- ZFS 学习（转载）
- 那位有epson R1900中文清零软件？
- 点云采样FPS原理及实现
- 【入门】QQ聊天机器人--HelloWorld篇
- pathrewrite不生效_Vue使用Proxy代理后仍无法生效的解决
- java实现逻辑推断
- MyBatis SSM
- ElementUI tree超出显示省略号
- surging教学视频资源汇总
- RAM ROM 寄存器(Rigester) CPU的关系
- C语言实现通讯录（静态版本+动态版本）
- python network programming tutorial
- CMMI的五个级别及其特征简述
- 作为外汇交易者，外汇交易跟非法集资的区别你都清楚吗？
- C# 带小数点儿的字符串（如：88.6），取整数部分（或四舍五入）