使用html+js+css 实现页面轮播图效果(实例讲解)

作者:欢呀 时间:2024-02-24 01:48:44 

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">&lt;</div>
 <div class="right">&gt;</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();

来源:http://www.cnblogs.com/shaoxiaohuan/archive/2017/09/20/7562224.html

标签:html,js,css,轮播图
0
投稿

猜你喜欢

  • mysql多表查询的几种分类详细

    2024-01-28 14:43:21
  • python中format函数如何使用

    2022-06-18 06:50:41
  • 一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)

    2023-07-02 17:00:47
  • Python 列表与链表的区别详解

    2022-01-24 10:10:04
  • Vscode编辑器的巧妙用法(快速格式化代码的方法)

    2022-07-02 01:13:33
  • 通过AngularJS实现图片上传及缩略图展示示例

    2024-05-02 17:39:52
  • 有意思的数据结构默克树 Merkle tree应用介绍

    2022-08-19 22:58:50
  • Django 开发调试工具 Django-debug-toolbar使用详解

    2022-03-18 02:31:07
  • 总结Pyinstaller打包的高级用法

    2021-03-27 02:48:16
  • asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)

    2024-04-09 19:47:07
  • python判断一个数是否能被另一个整数整除的实例

    2021-02-06 13:25:42
  • 解决python3 安装完Pycurl在import pycurl时报错的问题

    2023-08-23 10:40:08
  • SQLserver 实现分组统计查询(按月、小时分组)

    2024-01-24 12:52:15
  • python绘制简单直方图的方法

    2023-06-23 19:54:50
  • Python 自动化处理Excel和Word实现自动办公

    2021-06-07 06:41:16
  • 数据库疑难讲解:改善SQL Server内存管理

    2009-10-29 13:30:00
  • php5.3 不支持 session_register() 此函数已启用的解决方法

    2023-11-16 01:59:39
  • Golang中struct{}和struct{}{}的区别解析

    2024-04-23 09:36:21
  • ASP图片分页代码 (通用)

    2009-06-22 12:57:00
  • SQL Server 数据文件收缩和查看收缩进度的步骤

    2024-01-12 19:34:03
  • asp之家 网络编程 m.aspxhome.com