使用html+js+css 实现页面轮播图效果(实例讲解)
更新时间：2017年09月21日 08:40:09 作者：欢呀
下面小编就为大家带来一篇使用html+js+css 实现页面轮播图效果(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html 页面
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="carousel.css" rel="external nofollow" > <title>轮播图效果</title> </head> <body> <section id="main"> <div id="picture"></div> <!-- 添加图中按钮 图片轮播在js中大致成型后再写最好--> <div id="dot"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <!-- 添加切换按钮 --> <div id="an"> <div class="left"><</div> <div class="right">></div> </div> </section> <script src="jquery.js"></script> <script src="carousel.js"></script> </body>
css页面 carousel.css
#main{
width: 655px;
height: 361px;
position: relative;
}
#picture{
width:100%;
height: 100%;
}
#picture img{
width:100%;
height: 100%;
display: none;
}
#picture img:nth-child(1){
display: inline-block;
}
/* 设置圆点的样式 */
#dot span{
display: inline-block;
width:25px;
height: 25px;
border-radius: 50%;
background-color: gray;
margin-left: 10px;
opacity: 0.6
}
#dot{
position: absolute;
right: 40px;
bottom: 30px;
}
/* 设置页面刚加载的圆点初始状态 1 第一个圆点放大1.2倍 2、颜色变成蓝色
*/
#dot :nth-of-type(1){
transform: scale(1.2);
background-color: blue;
}
.left ,.right{
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 30px;
color: white;
position: absolute;
bottom: calc((100% - 40px)/2);
text-align: center;
}
.left{
left: 15px;
}
.right{
right: 15px;
}
.left:hover ,.right:hover{
background-color: white;
color:red;
}
js页面 carousel.js
for(var i=1; i<6;i++){
$('#picture').append("<img src='./../images/"+i+".jpg' >");
}
//给图片转化设置定时函数
var index=0;
var timer;
function changeImageDot(){
$('#picture img:nth-child('+(index+1)+')').css({
display:'block',
}).siblings().css({
display:'none',
});
//设置随图片切换，对应的圆点样式发生变化
// index+1 是因为索引是从0开始而 nth-child(i) 中的i是从1 开始的
$('#dot span:nth-child('+(index+1)+')').css({
transform: 'scale(1.2)',
'background-color': 'blue',
}).siblings().css({
transform: 'scale(1)',
'background-color':'gray',
});
}
function produceTime(){
timer=setInterval(function(){
index++;
if(index==5)
index=0;
changeImageDot();
},2000);
}
produceTime();
//鼠标悬浮在圆点上 ， 圆点和图片的变化
$('#dot span').mouseenter(function(){
index=$(this).index();
changeImageDot();
clearInterval(timer);
produceTime();
});
//缺点：点击切换按钮后，图片切换后 ，会立即切换到下一个图片，需要设置 清除计时器后再新建一个计时器
$('.left').click(function(){
index--;
if(index==-1)
index=4;
changeImageDot();
clearInterval(timer);
produceTime();
});
$('.right').click(function(){
index++;
if(index==5)
index=0;
changeImageDot();
clearInterval(timer);
produceTime();
以上这篇使用html+js+css 实现页面轮播图效果(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript暂停和继续定时器的方法的相关资料,非常不错，需要的朋友可以参考下2016-07-07
javascript下高性能字符串连接StringBuffer类
使用StringBuffer类比使用加号节省50%左右的时间，大家对于大数据的连接最好使用这个方法。2010-08-08
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
这篇文章主要介绍了JS变量中有var定义和无var定义的区别以及es6中let命令和const命令,需要的朋友可以参考下2017-02-02
本文主要介绍了javascript history对象的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
下面小编就为大家分享一篇基于wordpress的ajax写法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了微信打开网址添加在浏览器中打开提示的办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
鼠标事件是到目前为止最重要的事件。在这一章我将介绍一些鼠标事件的最常见的问题和技巧。2010-02-02
在JavaScript中，var用来声明变量，但是这个语法并不严格要求，很多时修改，我们可以直接使用一个变量而不用var声明它。2009-09-09
之前在获取元素属性时,踩了个坑,记录一下,下面这篇文章主要给大家介绍了关于JS字符串截取出现的bug以及解决方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了JSONP原理及应用实例详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论