HTML之轮播
最近学了网页多张图片的轮播，图片轮播对于大多数网页来讲是必不可少的。javascript
要实现的效果是：按下前、后按钮，显示的图片改变，按下 1 2 3 4 按钮会显示对应的图片，当鼠标移到图片外面，图片在每隔必定时间就变成另外一张。css
大概思路：html
1.建立ul下4个li标签放到div标签，li标签里面放img标签，用于存放照片，建立另外1个ul下四个li标签放到同个div标签里，用于作底部的按钮。java
<div id="slider"> <ul id="list"> <li id='item'><img src="./imgs/1.jpg" alt=""</li> <li id='item'><img src="./imgs/2.jpg" alt=""</li> <li id='item'><img src="./imgs/3.jpg" alt=""</li> <li id='item'><img src="./imgs/4.jpg" alt=""</li> </ul> <button type="button" class="prev">prev</button> <button type="button" class="next">next</button> <ul id="block"> <li class="bullet focus">1</li> <li class="bullet">2</li> <li class="bullet">3</li> <li class="bullet">4</li> </ul> </div>
而后给个个标签加上CSS样式浏览器
把ul标签的默认样式去掉ide
ul{
list-style: none;
}
#slider{//设置DIV样式
width: 700px;
height: 330px;
border: 5px solid red;
position: relative;
}
#slider #list #item{ //设置存照片的li的样式
position: absolute;
left: 70px;
top:50px;
opacity: 0;//透明度设为0
}
#slider #list #item:first-of-type{
opacity: 1;//第一张图片的透明度设为1，这样所有图片就只显示第一张。
}
#slider .prev, #slider .next{//设置“下一张”按钮的样式
position: absolute;
top: 150px;
}
#slider .next{
right:0;//right设为0，将“下一张”按钮放到DIV右边框左边缘
}
#block .bullet{//设置4个按钮块的样式
width: 50px;
height: 50px;
margin-left: 5px;
position: relative;
border: 2px solid #000000;
float: left;
top: 300px;
left: 250px;
cursor: pointer; /*光标放上去会变成一只手*/
line-height: 50px;
text-align: center;
}
#block .bullet.focus{//设置选中的按钮块样式
background-color: #FF0000;
}
作好这些准备后，接下来就是写JS代码实现轮播。函数
在此以前，要先屡清楚，想让JS代码实现什么？ 实现图片的转换，就是点击按钮要显示对应的图片，实质是将要显示的图片的透明度置为1，将当前的图片透明度置为0。this
先定义一个函数，用来获取到保存图片的标签的样式（浏览器兼容性问题）code
function getStyle(el, property){//el为标签对象，property为el对应style的属性
if(getComputedStyle){
return getComputedStyle(el)[property];
}else{
return el.currentStyle[property];
}
}
接下来写让图片显示和消失（opacity=0||1）的函数htm
function animate(el, properties ){//el为标签对象，properties对象有多个修改el标签style的属性
clearInterval(el.timerId);// 清除定时器，防止重复调用形成的元素愈来愈快
el.timerId = setInterval(function(){//定义一个定时调用的函数
for(var property in properties){遍历properties的属性
var current = null;
var target = properties[property];//获取要修改的property；
if(property === 'opacity'){//若是属性是opacity就将当前的opacity值扩大100倍，方便运算（opacity取值只在0到1之间）
current = Math.round(parseFloat(getStyle(el,'opacity'))*100);
}else{//要修改的属性不是opacity
current = parseInt(getStyle(el,property));
}
var speed = (target - current) /30;//设置变化的速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//设置这条语句是为了不speed在-1到1之内直接变为0
if(property === 'opacity'){
el.style.opacity = (current + speed) / 100;
}else{
el.style[property] = current + speed + 'px';
}
}
},20)
}
完成这部分JS代码后，咱们来实现按按钮实现图片的转换：
建立一个当即执行函数(function(){})()
首先咱们要有变量来保存当前图片和下一张图片：prevIndex, nextIndex，保存有多少张照片的变量：len
var prevIndex, nextIndex，len;
接下来写图片变换的函数slidePrev()，slideNext()，slideTo(prev , next)
function slideNext(){
prevIndex = nextIndex;
nextIndex++;
if(nextIndex === len ){
nextIndex = 0;
}
slideTo(prevIndex, nextIndex);
}
function slidePrev(){
prevIndex = nextIndex;//记录当前照片
nextIndex--;//next索引指向上一张照片
if(nextIndex === -1 ){若是索引超出第一张照片，就转到最后一张
nextIndex =len-1;
}
slideTo(prevIndex, nextIndex);
}
function slideTo(prev , next){
var lis = document.querySelectorAll('#list #item');//获取全部存照片的li标签
animate(lis[prev],{opacity:0});//将存当前照片的li标签透明度设为0
animate(lis[next],{opacity:100});//将存要显示的照片的li标签透明度设为1
}
而后在当即执行函数定义函数 init()，用来执行点击prev、next按钮的操做
function init(){
prevIndex = nextIndex = 0;//初始化照片的定位，当前为第一张
len = document.querySelectorAll('#list #item').length;
//上一张图片
document.querySelector('.prev').onclick = function(){
slidePrev();
}
//上一张图片
document.querySelector('.next').onclick = function(){
slideNext();
}
}
接下来实现点击小方块显示对应图片：效果是点击对应方块会变色，而且显示对应照片；上面咱们已经将第一个小方块的classname设为bullet focus，只要将点击的方块的classname设为bullet focus，而后其余小方块classname设为bullet就好了。在init（）函数内添加代码：
var bullets = document.querySelectorAll('#block .bullet');//获取所有小方块
//点击方框切换图片
for(var i=0;i<bullets.length;i++){//遍历全部小方块
bullets[i].index = i;//记录小方块对应的图片
bullets[i].onclick = function(){//点击后执行slideTo函数，显示点击小方块对应的图片
prevIndex = nextIndex;
nextIndex = this.index;
slideTo(prevIndex,nextIndex);
}
}
而后要在slideTo（）函数中处理点击后将点击的小方块设为选中：
var bullets = document.querySelectorAll('#block .bullet');
bullets[prev].className = 'bullet';//取消当前的小方块的焦点
bullets[next].className = 'bullet focus';设置点击的小方块为焦点
设置完后基本功能就实现了，就差自动轮播效果：
var id;
function auto(){
clearInterval(id);
id = setInterval(function(){
slideNext();
},2000)
}
function stop(){
clearInterval(id);
}
实现自动轮播的功能，以后在init（）函数中调用auto（）就好了，此外咱们能够实现鼠标停在图片上中止轮播，移出图片后轮播，在init()中添加
var slider = document.querySelector('#slider');
slider.onmouseover = function(){
stop();
}
var cu=0;
slider.onmouseout = function(){
auto();
}
//自动轮播
auto();
至此，全部功能所有实现。
轮播.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#slider{
width: 700px;
height: 330px;
border: 5px solid red;
position: relative;
}
#slider #list #item{
position: absolute;
left: 70px;
top:50px;
opacity: 0;
}
#slider #list #item:first-of-type{
opacity: 1;
}
#slider .prev, #slider .next{
position: absolute;
top: 150px;
}
#slider .next{
right:0;
}
#block .bullet{
width: 50px;
height: 50px;
margin-left: 5px;
position: relative;
border: 2px solid #000000;
float: left;
top: 300px;
left: 250px;
cursor: pointer; /*光标放上去会变成一只手*/
line-height: 50px;
text-align: center;
}
#block .bullet.focus{
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="slider">
<ul id="list">
<li id='item'><img src="./imgs/1.jpg" alt=""</li>
<li id='item'><img src="./imgs/2.jpg" alt=""</li>
<li id='item'><img src="./imgs/3.jpg" alt=""</li>
<li id='item'><img src="./imgs/4.jpg" alt=""</li>
</ul>
<button type="button" class="prev">prev</button>
<button type="button" class="next">next</button>
<ul id="block">
<li class="bullet focus">1</li>
<li class="bullet">2</li>
<li class="bullet">3</li>
<li class="bullet">4</li>
</ul>
</div>
<script src="animate.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
(function (){
var prevIndex, nextIndex;
var len;
var id;
init();
function init(){
prevIndex = nextIndex = 0;
len = document.querySelectorAll('#list #item').length;
//上一张图片
document.querySelector('.prev').onclick = function(){
slidePrev();
}
//上一张图片
document.querySelector('.next').onclick = function(){
slideNext();
}
var bullets = document.querySelectorAll('#block .bullet');
//点击方框切换图片
for(var i=0;i<bullets.length;i++){
bullets[i].index = i;
bullets[i].onclick = function(){
prevIndex = nextIndex;
nextIndex = this.index;
slideTo(prevIndex,nextIndex);
}
}
var slider = document.querySelector('#slider');
slider.onmouseover = function(){
stop();
}
var cu=0;
slider.onmouseout = function(){
auto();
cu++;
console.log(cu);
}
//自动轮播
auto();
}
function slidePrev(){
prevIndex = nextIndex;
nextIndex--;
if(nextIndex === -1 ){
nextIndex =len-1;
}
slideTo(prevIndex, nextIndex);
}
function slideNext(){
prevIndex = nextIndex;
nextIndex++;
if(nextIndex === len ){
nextIndex = 0;
}
slideTo(prevIndex, nextIndex);
}
function slideTo(prev , next){
var bullets = document.querySelectorAll('#block .bullet');
var lis = document.querySelectorAll('#list #item');
bullets[prev].className = 'bullet';
bullets[next].className = 'bullet focus';
animate(lis[prev],{opacity:0});
animate(lis[next],{opacity:100});
}
function auto(){
clearInterval(id);
id = setInterval(function(){
slideNext();
},2000)
}
function stop(){
clearInterval(id);
}
})()
</script>
</body>
</html>
相关文章
- 1. HTML之水平轮播
- 2. html------轮播图
- 3. 轮播图html
- 4. html 轮播
- 5. html轮播
- 6. HTML轮播
- 7. 轮播图 html+css+js
- 8. 纯HTML+JS实现轮播
- 9. HTML+CSS +JS 轮播图
- 10. 轮播图 html + css + js
- 更多相关文章...
- • HTML 指南 - 网站建设指南
- • W3C HTML 活动 - W3C 教程
- • 互联网组织的未来：剖析GitHub员工的任性之源
- • Flink 数据传输及反压详解
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 升级Gradle后报错Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地环境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中关键字前后几行的内容
- 5. XXE萌新进阶全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通过agent监控winserve12
- 8. IT行业UI前景、潜力如何？
- 9. Mac Swig 3.0.12 安装
- 10. Windows上FreeRDP-WebConnect是一个开源HTML5代理，它提供对使用RDP的任何Windows服务器和工作站的Web访问
欢迎关注本站公众号,获取更多信息
相关文章
- 1. HTML之水平轮播
- 2. html------轮播图
- 3. 轮播图html
- 4. html 轮播
- 5. html轮播
- 6. HTML轮播
- 7. 轮播图 html+css+js
- 8. 纯HTML+JS实现轮播
- 9. HTML+CSS +JS 轮播图
- 10. 轮播图 html + css + js