Products
GG网络技术分享 2025-03-18 16:13 12
html实现
效果图
javascript
javascript
单点效果图
.common-title {}
.common-ps {}
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
overflow: hidden;
body {
height: 100%;
#wrap {
width: 600px;
height: 900px;
border: 5px solid steelblue;
border-radius: 8%;
background: antiquewhite;
box-shadow: 2px 2px 5px #000000;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: 2% auto;
text-align: center;
transition: 2s;
//绝对定位，子元素继承位置
position: absolute;
.ct {
margin: 10px auto;
}
.cps {
margin-left: 60%;
}
&:hover {
background: seashell;
}
#btn1 {
transition: 1s !important;
}
.cevent-carousel {
margin-top: 1%;
left: 7%;
position: absolute;
.carousel-img {
img {
width: 500px;
height: 300px;
}
}
button {
position: relative;
//nth-child所包含的元素必须和父元素相同，这里父元素为button，这个为span，需要nth-of-type()
&:nth-of-type(1) {
span {
position: absolute;
font-size: 20px;
color: white;
margin-top: -8px;
left: 61%;
}
}
&:nth-of-type(2) {
span {
position: absolute;
font-size: 20px;
color: white;
margin-top: -8px;
left: 61%;
}
}
}
}
.cevent-carousel-pro {
position: absolute;
top: 55%;
.carousel-img {
img {
width: 500px;
height: 300px;
}
}
button {
position: relative;
//nth-child所包含的元素必须和父元素相同，这里父元素为button，这个为span，需要nth-of-type()
&:nth-of-type(1) {
span {
position: absolute;
font-size: 20px;
color: white;
margin-top: -8px;
left: 61%;
}
}
&:nth-of-type(2) {
span {
position: absolute;
font-size: 20px;
color: white;
margin-top: -8px;
left: 61%;
}
}
}
#dotReplacePic {
position: absolute;
list-style: none;
text-align: center;
width: 100%;
margin-left: 30%;
top: 103%;
li {
float: left;
width: 30px;
height: 30px;
background: steelblue;
color: white;
border: 2px solid silver;
border-radius: 50%;
opacity: .8;
margin: 0 1.5%;
transition:1s;
&:hover {
background: tomato;
opacity: .7;
transform: scale(1.5);
}
}
}
}
}
}
}
/* DOM-html-document对象
* 注意：$(function(){}) jQuery中，获取btn的value失效，需要转为window.onload
*/
window.onload = function() {
var btn1 = document.getElementById("btn1");
console.log("mei点", btn1.innerHTML);
var flag = true;
btn1.onclick = function() {
if(flag) {
btn1.innerHTML = "BT Button";
} else {
btn1.innerHTML = "Link Button";
}
flag = !flag;
}
btn1.onmouseenter = function() {
btn1.style.background = "deepskyblue";
}
btn1.onmouseleave = function() {
btn1.style.background = "white";
}
//获取btn
var previous = document.getElementById("btn-previous")
var next = document.getElementById("btn-next");
//获取图片，结果为array数组，需要后面加[index]索引
var imgs = document.getElementsByTagName("img")[0];
console.log("img对象[]:", imgs);
previous.onclick = function() {
console.log("上一张");
imgs.src = "./static/img/logo-500-300-5.jpg";
}
next.onclick = function() {
console.log("下一张");
imgs.src = "./static/img/logo-500-300-1.jpg";
}
//获取btn
var previousPro = document.getElementById("previous")
var nextPro = document.getElementById("next");
var imgList = document.getElementsByClassName("carousel-img-list")[0];
console.log("图片集合：", imgList, "info: ", info);
//获取图片，结果为array数组，需要后面加[index]索引
var imgsPro = ["./static/img/logo-500-300-1.jpg", "./static/img/logo-500-300-5.jpg", "./static/img/logo-500-300-2.jpg", "./static/img/logo-500-300-3.jpg", "./static/img/logo-500-300-4.jpg"];
//保存当前显示图片索引，默认0，第一张
var index = 0;
//共 5 张图片-当前第 1 张
var info = document.getElementById("info");
info.innerHTML = "共 " + imgsPro.length + " 张图片-当前第 " + 1 + " 张";
//原点切换图片
var dotReplacePic = document.getElementById("dotReplacePic");
//在js中创建的元素，想要操作，必须在这里重新获取
var dotLi = document.getElementsByTagName("li");
//每次点击dot，判断index位置
var dotIndex = 0;
//（1）存放li标签
var liNodes = "";
//（2）存放style：css
var liStyle = document.createElement("style");
var liCss = "";
for(var i = 0; i < 5; i++) {
liNodes += "<li></li>";
//这里添加css没有起作用，改为less中添加
liCss = "ul > li:nth-child(" + (i + 1) + "){}";
console.log("liCss: ", liCss);
}
dotReplacePic.innerHTML = liNodes;
liStyle.innerHTML += liCss;
console.log("最后的liStyle：", liStyle);
//放入html
document.head.appendChild(liStyle);
//dot初始化
dotLi[index].style.transform = "scale(1.5)";
dotLi[index].style.opacity = .7;
dotLi[index].style.background = "tomato";
console.log("img对象:", imgs);
previousPro.onclick = function() {
//初始化css样式
dotLi[dotIndex].style.transform = "scale(1)";
dotLi[dotIndex].style.opacity = .8;
dotLi[dotIndex].style.background = "steelblue";
console.log("上一张，索引自减");
index--;
if(index < 0) {
index = imgsPro.length - 1;
}
imgList.src = imgsPro[index];
//在index自减之后记录index位置
dotIndex = index;
dotLi[index].style.transform = "scale(1.5)";
dotLi[index].style.opacity = .7;
dotLi[index].style.background = "tomato";
info.innerHTML = "共 " + imgsPro.length + " 张图片-当前第 " + (index + 1) + " 张";
}
nextPro.onclick = function() {
//初始化css样式
dotLi[dotIndex].style.transform = "scale(1)";
dotLi[dotIndex].style.opacity = .8;
dotLi[dotIndex].style.background = "steelblue";
console.log("下一张，索引自增");
index++;
if(index > imgsPro.length - 1) {
index = 0;
}
imgList.src = imgsPro[index];
//在index自增之后记录index位置
dotIndex = index;
dotLi[index].style.transform = "scale(1.5)";
dotLi[index].style.opacity = .7;
dotLi[index].style.background = "tomato";
info.innerHTML = "共 " + imgsPro.length + " 张图片-当前第 " + (index + 1) + " 张";
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title>html-document对象</title>
<link rel="stylesheet" href="../less/6-bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/4-js-document.css" />
<body>
<div id="wrap">
<h1 class="ct common-title">原生js-DOM轮播图操作</h1>
<h3 class="cps common-ps">一刀coder</h3>
<button id="btn1" class="btn btn-default">这是个link按钮</button>
<div class="cevent-carousel">
<div class="carousel-img">
<img src="static/img/logo-500-300-1.jpg" alt="..." class="img-thumbnail">
</div>
<button id="btn-previous" class=" btn btn-primary" type="button">上一张 <span>↑</span> P</button>
<button id="btn-next" class="btn-next btn btn-warning" type="button">下一张 <span>↓</span> N</button>
</div>
<div class="cevent-carousel-pro">
<div class="carousel-img img-thumbnail">
<img src="static/img/logo-500-300-1.jpg" alt="..." class="carousel-img-list">
</div>
<button id="previous" class=" btn btn-danger" type="button">上一张 <span>↑</span> P</button>
<button id="next" class="btn-next btn btn-success" type="button">下一张 <span>↓</span> N</button>
<button id="info" class="btn-next btn btn-default disabled" type="button"></button>
<ul id="dotReplacePic">
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="../less/6-bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="../less/6-bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/4-js-document.js"></script>
</html>最终效果图
轮播图，初级，横向buton或者底部数字控制轮播，可以实现自动轮播（注释了，使用的话将其注释消掉），核心知识是数据驱动图像的位移达到效果。今天为大家分享使用JavaScript语言实现横向轮播图效果。
js代码：
/** 工厂模式
* */
var Method=(function () {
return {
loadImage:function (arr,callback) {
var img=new Image();
img.arr=arr;
img.list=[];
img.num=0;
img.callback=callback;
// 如果DOM对象下的事件侦听没有被删除掉，将会常驻堆中
// 一旦触发了这个事件需要的条件，就会继续执行事件函数
img.addEventListener(\"load\",this.loadHandler);
img.self=this;
img.src=arr[img.num];
},
loadHandler:function (e) {
this.list.push(this.cloneNode(false));
this.num++;
if(this.num>this.arr.length-1){
this.removeEventListener(\"load\",this.self.loadHandler);
this.callback(this.list);
return;
}
this.src=this.arr[this.num];
},
$c:function (type,parent,style) {
var elem=document.createElement(type);
if(parent) parent.appendChild(elem);
for(var key in style){
elem.style[key]=style[key];
}
return elem;
}
}
})();
html代码：
<!DOCTYPE html><html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#carousel,#imgCon img{
width: 1200px;
height: 400px;
}
#carousel
{
position: relative;
margin: auto;
overflow: hidden;
}
#imgCon{
width: 6000px;
height: 400px;
position: absolute;
left: 0;
font-size: 0;
transition: all 1s;
}
#leftBn,#rightBn
{
position: absolute;
top:170px;
}
#leftBn{
left: 20px;
}
#rightBn
{
right: 20px;
}
ul{
position: absolute;
bottom: 20px;
list-style: none;
margin: auto;
left: 45%;
}
li
{
width: 20px;
height: 20px;
border: 1px solid red;
border-radius: 10px;
float: left;
text-align: center;
color: white;
cursor: default;
line-height:20px;
font-size: 12px;
margin-left: 8px;
}
</style>
</head>
<body>
<div id=\"carousel\">
<div id=\"imgCon\">
<img src=\"img/a.jpeg\">
<img src=\"img/b.jpeg\">
<img src=\"img/c.jpeg\">
<img src=\"img/d.jpeg\">
<img src=\"img/e.jpeg\">
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<img src=\"img/left.png\" id=\"leftBn\">
<img src=\"img/right.png\" id=\"rightBn\">
</div>
<script>
/*
*
* 数据驱动显示
*
* */
var imgCon,leftBn,rightBn,lis,ul,prevLi;
var position=0;//图像的标记 第一张0 第二张1...
init();
function init() {
imgCon=document.getElementById(\"imgCon\");//图
leftBn=document.getElementById(\"leftBn\");//左按钮
rightBn=document.getElementById(\"rightBn\");//右按钮
lis=document.getElementsByTagName(\"li\");//下方数字右按钮
ul=document.getElementsByTagName(\"ul\")[0];
leftBn.addEventListener(\"click\",clickHandler);
rightBn.addEventListener(\"click\",clickHandler);
for(var i=0;i<lis.length;i++){//为每隔小Li 也就是底部数字赋值
lis[i].num=i;
lis[i].addEventListener(\"click\",liClickHandler);
}
changeLi();
}
// setInterval(autoImg,3000);可以实现自动
function autoImg() {//自动轮播
position++;
if(position>4) position=0;
changeImg();
}
function clickHandler(e) {
e= e || window.event;
if(this===leftBn){
position--;
if(position<0) position=4;
}else if(this===rightBn){
position++;
if(position>4) position=0;
}
changeImg();
}
function liClickHandler(e) {
e= e || window.event;
position=this.num;
changeImg();
}
function changeImg() {//图片的转换效果 唯一
imgCon.style.left=-position*1200+\"px\";//一次一张图片的位移
changeLi();
}
function changeLi() {//底部数字的转换效果
if(prevLi){
prevLi.style.backgroundColor=\"rgba(255,0,0,0)\";
}
prevLi=lis[position];
prevLi.style.backgroundColor=\"rgba(255,0,0,0.5)\";
}
</script>
</body>
</html>
以上就是使用JavaScript语言实现横向轮播图效果详细内容，更多请关注wpmee。
Demand feedback
