使用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 相关文章推荐
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
Jquery 扩展方法
May 06 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
详解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
使用php4加速网络传输
2006/10/09 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
accesskey 提交
2006/06/26 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
Node.js异步I/O学习笔记
2014/11/04 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
python简易远程控制单线程版
2018/06/20 Python
python实现Zabbix-API监控
2018/09/17 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
介绍一下linux的文件系统
2015/10/06 面试题
生物制药毕业生自荐信
2013/10/16 职场文书
24岁生日感言
2014/01/13 职场文书
优秀纪检干部材料
2014/08/27 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
鉴史问廉观后感
2015/06/10 职场文书
文艺委员竞选稿
2015/11/19 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
Golang连接并操作MySQL
2022/04/14 MySQL