使用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 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
js实现一键复制功能
Mar 16 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
Vue和Flask通信的实现
May 19 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
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
react-router中的属性详解
2017/06/01 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
python素数筛选法浅析
2018/03/19 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL