实现一个简单的图片轮播效果

学习笔记

思路

这里就说一下我的思路吧，我们可以先将所有图片的不透明度设置为0，也就是全透明，不可见（也不一定靠设置透明度来实现图片不可见，也可以直接设置元素不可见），使用下标的方式来控制图片是否可见，指定下标的图片的不透明度设置为100，也就是图片可见，这样就实现了显示一张图片的效果，然后我们再用定时器循环改变这个下标，这样就实现了在特定间隔内显示不同图片的效果，也就是图片轮播。

效果

点击按钮切换图片的思路也是通过改变下标的方式来控制显示的图片

代码部分

网页部分

<body><div id="box">
<!--        轮播图片--><ul id="transform"><li><img src="1.jpg" alt="this is a picture"></li><li><img src="2.jpg" alt="this is a picture"></li><li><img src="4.jpg" alt="this is a picture"></li></ul><ul id="point"><li></li><li></li><li></li></ul></div><div id="left"><p><</p></div><div id="right"><p>></p></div>
</body>

css部分

<style>* {margin: 0;padding: 0;}/*设置图片大小*/img {width: 700px;height: 500px;cursor: pointer;}#transform {position: absolute;top: 50px;left: 27%;list-style: none;}/*设置轮播图片样式*/#transform li {position: absolute;opacity: 100;}#point {position: absolute;top: 600px;left: 45%;display: flex;list-style: none;}/*小点样式*/#point li {width: 20px;height: 20px;background-color: aqua;border-radius: 50%;margin-left: 20px;cursor: pointer;}/*    左右切换按钮样式*/#left {position: absolute;top: 300px;left: 15%;font-size: 70px;font-weight: bold;color: #00000070;cursor: pointer;}#right {position: absolute;top: 300px;left: 80%;font-size: 70px;font-weight: bold;color: #00000070;cursor: pointer;}</style>

js部分

<script type="text/javascript">
<!--    自动执行定时器函数 图片自动轮播-->window.onload = automatic;var images = document.getElementById("transform").children;var points = document.getElementById("point").children;var interval;var leftButton = document.getElementById("left");var rightButton = document.getElementById("right");//设置开始图片下标 从第一张图片开始var index = 0;//循环设置元素下标for (var i = 0;i < images.length;i++){images[i].index = i;points[i].index = i;//添加点击小点切换图片事件points[i].onclick = appoint;images[i].onmouseover = function (){clearInterval(interval)};images[i].onmouseleave = function (){automatic()};}function appoint(){var apo = this.index;//循环设置li不透明度为0 也就是不可见for (var i = 0;i < images.length;i++){images[i].style.opacity = "0";}images[apo].style.opacity = "100";}//自动切换图片函数function automatic(){interval = setInterval(function (){//循环设置li不透明度为0 也就是不可见for (var i = 0;i < images.length;i++){images[i].style.opacity = "0";}//然后设置指定下标的li的不透明度为100 实现了显示指定下标的图片，而不显示其他图片images[index].style.opacity = "100";//下标自动增长index++;//下标如果超出范围，将下标重置为0if (index == images.length){index = 0;}},2000);}//为左右切换图片按钮添加事件leftButton.onclick = previous;//鼠标移动到 上一张 按钮 停止定时器leftButton.onmouseover = function (){clearInterval(interval)};//鼠标离开 上一张 按钮 开始定时器leftButton.onmouseleave = function (){automatic()};rightButton.onclick = next;//鼠标移动到 下一张 按钮 停止定时器rightButton.onmouseover = function (){clearInterval(interval)};//鼠标离开 下一张 按钮 开始定时器rightButton.onmouseleave = function (){automatic()};//切换下一张图片函数function next(){index = index + 1;//如果下标超出范围 将下标赋值为0if (index == images.length){index = 0;}//循环设置li不透明度为0 也就是不可见for (var i = 0;i < images.length;i++){images[i].style.opacity = "0";}//将下一张图片设置为可见images[index].style.opacity = "100";}//切换上一张图片function previous(){index = index - 1;//如果下标超出范围 将下标设置为 图片数量-1if (index == -1){index = images.length -1;}//循环设置li不透明度为0 也就是不可见for (var i = 0;i < images.length;i++){images[i].style.opacity = "0";}//将上一张图片设置为可见images[index].style.opacity = "100";}</script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}/*设置图片大小*/img {width: 700px;height: 500px;cursor: pointer;}#transform {position: absolute;top: 50px;left: 27%;list-style: none;}/*设置轮播图片样式*/#transform li {position: absolute;opacity: 100;}#point {position: absolute;top: 600px;left: 45%;display: flex;list-style: none;}/*小点样式*/#point li {width: 20px;height: 20px;background-color: aqua;border-radius: 50%;margin-left: 20px;cursor: pointer;}/*    左右切换按钮样式*/#left {position: absolute;top: 300px;left: 15%;font-size: 70px;font-weight: bold;color: #00000070;cursor: pointer;}#right {position: absolute;top: 300px;left: 80%;font-size: 70px;font-weight: bold;color: #00000070;cursor: pointer;}</style>
</head>
<body><div id="box">
<!--        轮播图片--><ul id="transform"><li><img src="1.jpg" alt="this is a picture"></li><li><img src="2.jpg" alt="this is a picture"></li><li><img src="4.jpg" alt="this is a picture"></li></ul><ul id="point"><li></li><li></li><li></li></ul></div><div id="left"><p><</p></div><div id="right"><p>></p></div>
</body><script type="text/javascript">
<!--    自动执行定时器函数 图片自动轮播-->window.onload = automatic;var images = document.getElementById("transform").children;var points = document.getElementById("point").children;var interval;var leftButton = document.getElementById("left");var rightButton = document.getElementById("right");//设置开始图片下标 从第一张图片开始var index = 0;//循环设置元素下标for (var i = 0;i < images.length;i++){images[i].index = i;points[i].index = i;//添加点击小点切换图片事件points[i].onclick = appoint;images[i].onmouseover = function (){clearInterval(interval)};images[i].onmouseleave = function (){automatic()};}function appoint(){var apo = this.index;//循环设置li不透明度为0 也就是不可见for (var i = 0;i < images.length;i++){images[i].style.opacity = "0";}images[apo].style.opacity = "100";}//自动切换图片函数function automatic(){interval = setInterval(function (){//循环设置li不透明度为0 也就是不可见for (var i = 0;i < images.length;i++){images[i].style.opacity = "0";}//然后设置指定下标的li的不透明度为100 实现了显示指定下标的图片，而不显示其他图片images[index].style.opacity = "100";//下标自动增长index++;//下标如果超出范围，将下标重置为0if (index == images.length){index = 0;}},2000);}//为左右切换图片按钮添加事件leftButton.onclick = previous;//鼠标移动到 上一张 按钮 停止定时器leftButton.onmouseover = function (){clearInterval(interval)};//鼠标离开 上一张 按钮 开始定时器leftButton.onmouseleave = function (){automatic()};rightButton.onclick = next;//鼠标移动到 下一张 按钮 停止定时器rightButton.onmouseover = function (){clearInterval(interval)};//鼠标离开 下一张 按钮 开始定时器rightButton.onmouseleave = function (){automatic()};//切换下一张图片函数function next(){index = index + 1;//如果下标超出范围 将下标赋值为0if (index == images.length){index = 0;}//循环设置li不透明度为0 也就是不可见for (var i = 0;i < images.length;i++){images[i].style.opacity = "0";}//将下一张图片设置为可见images[index].style.opacity = "100";}//切换上一张图片function previous(){index = index - 1;//如果下标超出范围 将下标设置为 图片数量-1if (index == -1){index = images.length -1;}//循环设置li不透明度为0 也就是不可见for (var i = 0;i < images.length;i++){images[i].style.opacity = "0";}//将上一张图片设置为可见images[index].style.opacity = "100";}</script>
</html>

实现一个简单的图片轮播效果相关推荐

html+css+js简单实现图片轮播效果
<html> <head> <style type="text/css"> *{background-color:green;} #lunbo{ ...
css和html实现简单的图片轮播效果
目录滑动轮播图渐变效果实现滑动轮播图效果直接保存本地 html 双击打开可看 <!DOCTYPE html> <html lang="en"> &l ...
Javascript实现图片轮播效果。
用js做一个简单的图片轮播效果. 思路如下:用JavaScript来控制轮播的图片的样式(margin-left).用计时器来控制图片的自动播放.鼠标点击控制图片的翻页. 效果图如下.具有以下功能:1 ...
纯css自动全屏轮播图html代码,纯CSS3代码实现简单的图片轮播
以4张图片为例: 1.基本布局: 将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div, 相框设置1个图片的大小并设置溢出隐藏,以保证 ...
Android App图片轮播效果的组件化
简介一个通用的图片轮播效果的通用组件,方便开发者快速集成. 初学者,其实应该实现一个自定义控件的,改天有空,在学习下吧,学习能力一般,以前也没写过java,这个组件都写了好久,惭愧啊. 背景笔者参 ...
切换图片尝试写第一个js插件图片轮播
新手发帖,很多方面都是刚入门,有错误的地方请大家见谅,欢迎批评指正最近在看怎么写js插件,实验写了一个简单的图片轮播插件 jqury.picPlay.js . 基本html框架为<div cl ...
十五分钟用JavaScript基础写一个图片轮播效果
十五分钟用JavaScript基础写一个图片轮播效果前言这次也是一个适合JavaScript初学者的小练手,用JavaScript的基本知识去写一个轮播图,其实轮播图有很多方法去实现,像用一些框架 ...
Qt之实现图片轮播效果
一.简述今天文章讲述的是如何用Qt实现图片轮播的效果,其实我们经常在网页中看到各种广告就是使用了图片轮播,实现小区域内嵌入多个广告的效果. 下面是CSDN页面中两种常见的图片轮播效果.基本上就是定时 ...
纯js制作图片轮播效果
好久没有发博客了,最近都在复习,为了找工作做准备. 前段时间逛了下鼠绘漫画网追海贼王最新漫画,发现他们家的图片轮播效果跟其他网页的图片轮播效果效果不同,看起来更加有趣,于是我尝试了用js复写它. 前提 ...

实现一个简单的图片轮播效果

思路

效果

代码部分

实现一个简单的图片轮播效果相关推荐

最新文章

热门文章