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">
<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">&lt;</div>
<div class="right">&gt;</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 实现页面轮播图效果的更多相关文章

  1. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  2. css动画属性--轮播图效果

    通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...

  3. 纯CSS实现轮播图效果,你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  4. 纯js轮播图练习-2,js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  5. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  6. js原生实现轮播图效果(面向对象编程)

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  7. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

  8. js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  9. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

随机推荐

  1. linux下使用gcc编译运行C程序

    gcc(GNU Compiler Collection)是Linux下最常用的C语言编译器,是GNU项目中符合ANSI C标准的编译系统,能够编译用C.C++和Object C等语言编写的程序.  在 ...

  2. CSS3动画效果之transition

    CSS3中有两种方式实现动画,transition和animation+@keyframe. 两者的作用机制不一样:transition定义在可能要进行动画的元素上,对某些CSS属性进行监听,一旦CS ...

  3. NHibernate学习教程(6)--事务Transactions

    本节内容 事务概述 1.新建对象 [测试成功提交] [测试失败回滚] 2.删除对象 3.更新对象 4.保存更新对象 结语 上一篇我们介绍了NHibernate中的Insert, Update,  De ...

  4. 201521123083 《Java程序设计》第10周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常,多线程 1.finally题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 一个tr ...

  5. 201521123082 《Java程序设计》第13周学习总结

    201521123082 <Java程序设计>第13周学习总结 标签(空格分隔): java 1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. ...

  6. 个人作业二——英语学习APP 案例分析

    英语学习APP的案例分析 我们生活中很多时候要和软件打交道,大家上课开小差时候玩的手机游戏,买火车票的网站,互相联系用的微信.QQ,等等都是软件,都很值得分析.你为何成为它们的用户?它们的团队做对了什 ...

  7. SNS团队Beta阶段第五次站立会议(2017.5.26)

    1.立会照片 2.每个人的工作 成员 今天已完成的工作 明天计划完成的工作 罗于婕 生词本功能测试,bug修复 发音图标的改进 龚晓婷 辅助完善历史纪录的功能 对于历史记录功能的测试 林仕庄 继续完善 ...

  8. 第二次项目冲刺(Beta阶段)--第四天

    一.站立式会议照片 二.项目燃尽图 三.项目进展 队员  ID 贡献比 王若凡 201421123022 20% 吕志哲 201421123021 16% 欧阳勇 201421123026 16% 卢 ...

  9. 201521123060 《Java程序设计》第7周学习总结

    1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 答:contains方法调用indexOf方法,遍历遍历内部用于保存数据的e ...

  10. 201521123066 《Java程序设计》 第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 1.clone方法 1.1 Object对象中的clone ...