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


Posted in Javascript onSeptember 21, 2017

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 相关文章推荐
JavaScript中的标签语句用法分析
Feb 10 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
node文件批量重命名的方法示例
Oct 23 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
js实现微信聊天效果
Aug 09 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
详解JavaScript中的六种错误类型
Sep 21 #Javascript
解决Vue编译时写在style中的路径问题
Sep 21 #Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 #Javascript
Node调用Java的示例代码
Sep 20 #Javascript
浅谈react前后端同构渲染
Sep 20 #Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 #Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 #Javascript
You might like
PHP CURL获取返回值的方法
2014/05/04 PHP
php 购物车完整实现代码
2014/06/05 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
javascript自然分类法算法实现代码
2013/10/11 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
js分页代码分享
2014/04/28 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
python生成随机红包的实例写法
2019/09/02 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
自我评价格式
2014/01/06 职场文书
运动会宣传语
2015/07/13 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
5道关于python基础 while循环练习题
2021/11/27 Python
Python基本知识点总结
2022/04/07 Python