Java Web-----轮播图的实现

轮播图的实现可以用多种方法，只用CSS可以实现，用Javascript也可以实现。
不过实现出来的效果也是多种多样的。
这篇是用Javascript对轮播图的实现

轮播图的实现

图片板块
a. 首先，开辟一轮播图存放的板块，用ul，li来实现图片的存放

b.确保ul的长度放的下这5张图，并修改样式，使得图片水平排列并去除ul，li的样式等
按钮板块的样式
a.设置与图片数量相等的按钮，首先设置按钮的样式，使其大小合适，并更改其样式为圆形（通过设置其圆角边值50%）等
css：
html：

b.将按钮相对于图片定位至图片下方，调整大小及背景颜色

添加左右按钮
a.左右按钮的相对定位于图片板块的两端，并设置样式
html:

css:

动画的添加(见代码)
a.图片的动画
b.按钮的动画
c.左右按钮的动画

代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>轮播</title><style type="text/css">.center{width: 500px;height: 300px;margin: auto auto;padding: 0;position: relative;text-decoration: none;border:1px solid gray;overflow: hidden;}.small{height:12px;width: 100px;padding: 0;position: absolute;text-decoration: none;bottom: 0;left: 220px;}.button{width: 12px;height:12px;text-decoration: none;margin-right: 8px;display: block;background: rgba(0,0,0,.5);border-radius: 50%;float: left;}.button:hover{background: green;}#left{width: 20px;height: 50px;position: absolute;left: 0;top: 120px;background: rgba(80,80,80,.5);line-height: 50px;text-align: center;color: #fff;z-index: 3;}#right{width: 20px;height: 50px;position: absolute;right: 0px;top: 120px;background: rgba(80,80,80,.5);line-height: 50px;text-align: center;color: #fff;z-index: 3;}.big{width: 2500px;height: 300px;padding: 0;margin: 0;list-style: none;position:absolute;left:0px;}.img{width: 500px;height: 300px;float: left;padding: 0;margin: 0;}.img img{width: 100%;height: 100%;}.left:hover{color: green;}.right:hover{color: green;}</style></head>
<body><div class="center"><ul class="big"><li class="img" value="0"><img src="img/1.jpg"/></li><li class="img" value="1"><img src="img/2.jpg"/></li><li class="img" value="2"><img src="img/3.jpg"/></li><li class="img" value="3"><img src="img/4.jpg"/></li><li class="img" value="4"><img src="img/5.jpg"/></li></ul><ul class="small"><li class="button" onmouseover="f2(this)" onmouseout="f3(this)" value="0"><a></a></li><li class="button" onmouseover="f2(this)" onmouseout="f3(this)" value="-1"><a></a></li><li class="button" onmouseover="f2(this)" onmouseout="f3(this)" value="-2"><a></a></li><li class="button" onmouseover="f2(this)" onmouseout="f3(this)" value="-3"><a></a></li><li class="button" onmouseover="f2(this)" onmouseout="f3(this)" value="-4"><a></a></li></ul><div id="left"><</div><div id="right" onclick="f1()">></div></div><script type="text/javascript">var imgul = document.getElementsByClassName("big")[0];var buttonal = document.getElementsByClassName("small")[0];var left = document.getElementById("left");var right = document.getElementById("right");var index = 1;buttonshow(index);left.onclick=function(){var offset;if(imgul.offsetLeft=="0"){offset = -2000;}else{var offset = parseInt(imgul.offsetLeft)+500;}imgul.style.left=offset+'px';if(index==1){index=6;}index=index-1;buttonshow(index);}function f1(){var offset;if(imgul.offsetLeft=="-2000"){offset = 0;}else{var offset = parseInt(imgul.offsetLeft)-500;}imgul.style.left=offset+'px';if(index==5){index=0;}index=index+1;buttonshow(index);console.log(imgul.style.left);}function buttonshow(index){var buttonindex = parseInt(index)-1;var buttons = document.getElementsByClassName("button");for(var i = 0;i<buttons.length;i++){if(i==buttonindex){buttons[i].style.background='red';}else{buttons[i].style.background='rgba(0,0,0,.5)';}}}var timer=null;timer = setInterval(f1,1500);function f2(a1){a1.style.background='red';var flag = parseInt(a1.value)*500;imgul.style.left=parseInt(flag)+'px';}function f3(a1){a1.style.background='rgba(0,0,0,.5)';}</script>
</body>
</html>

Java Web-----轮播图的实现相关推荐

JS实现某东移动web轮播图
移动web轮播图参考实例,可以从中保存轮播图的图片,这里我们放入uploads的文件夹下,将八张图片一次改为l1.jpg,l2.jpg-(最后面都demo) https://m.jd.com/ HT ...
使用swiper_关于使用swiper制作web轮播图
我这个方法是很适用于小白的,利用swiper插件的应用.https://www.swiper.com.cn/这个是swiper中文官网的网址,上面有关于swiper的说明和使用方法.想要用到swipe ...
手机端网页制作轮播图html怎么写,原生JS实现移动端web轮播图详解（结合Tween算法造轮子）...
前言相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改 ...
java写轮播图,Android零基础入门第49节：AdapterViewFlipper图片轮播
上一期学习了ExpandableListView的使用,你已经掌握了吗?本期开始学习AdapterViewFilpper的使用. 一.认识AdapterViewFilpper AdapterViewF ...
新增轮播图跳转web页面、轮播、推荐歌单数据存储（简易音乐七）
新增轮播图跳转web页面.轮播.推荐歌单数据存储( 简易音乐七) 关于效果图第一步,添加引用新增数据库实体类修改fragment代码新增WebActivity页面加载网页关于本篇主 ...
java中广告维护轮播图怎么做_Banner广告轮播图
需求描述轮播图也是大部分app都有的效果,商品类跟新闻类的app是肯定会有的. 轮播图的效果跟第一次启动时的引导页类似,不过轮播图在引导页的基础上多了几个功能:在第一页也能向左滑动,在最后一页也能向 ...
Web APIs介绍（四）——offset/client/scroll/轮播图/本地存储
1.1. 元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距 ...
Web APIs：移动端网页特效--移动端常用开发框架（Bootstrap）及阿里百秀轮播图案例
框架概述框架,顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案.框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行开发. 前端常用的框架有 Bootstrap.V ...
web 完整轮播图前端轮播图详细
web 完整轮播图前端轮播图预览: 应用 HTML + CSS + JS HTML CSS JS 预览: 应用 HTML + CSS + JS JS代码分析如下: html代码比较简短,这里用j ...
web前端必学功法之一：轮播图
web前端必学功法之一:轮播图效果演示: <style>* {margin: 0;padding: 0;}/* 去除a标签的下划线 */a {text-decoration: none; ...

Java Web-----轮播图的实现

轮播图的实现

Java Web-----轮播图的实现相关推荐

最新文章

热门文章