使用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 三种不同位置代码的写法
Oct 25 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
原生js实现照片墙效果
Oct 13 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
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
php多线程并发实现方法
2016/09/30 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
实测jquery data()如何存值
2013/08/18 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
Python实现二分法算法实例
2015/02/02 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
敏捷开发的主要原则都有哪些
2015/04/26 面试题
六查六看剖析材料
2014/02/15 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
开发房地产协议书
2014/09/14 职场文书
总经理致辞
2015/07/29 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
浅析Django接口版本控制
2021/06/26 Python