使用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 相关文章推荐
js与jquery回车提交的方法
Feb 03 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
js实现点击烟花特效
Oct 14 Javascript
JS继承最简单的理解方式
Mar 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
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
php两种无限分类方法实例
2015/04/21 PHP
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
javascript常用方法总结
2015/05/14 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
bootstrap table实例详解
2017/01/06 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
JS制作简易计算器的实例代码
2020/07/04 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
Python正则表达式使用范例分享
2016/12/04 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
canvas使用注意点总结
2013/07/19 HTML / CSS
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
合作协议书
2014/04/23 职场文书
安全演讲稿大全
2014/05/09 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
党员自评材料范文
2014/12/17 职场文书
党员活动总结
2015/02/04 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL