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. Mysql介绍和实践总结

    本文首先介绍mysql的安装和基本使用.进阶操作.讲解mysql的导入导出和自动备份,然后介绍安全模式修改密码和mysql的全文本搜索功能,最后记录了个人使用mysql中遇到的问题集. 开始安装: s ...

  2. Swiper+JS 上拉刷新

    JS // 上拉刷新                        var page = 2;            var isAjax = true;//加载数据前状态            $( ...

  3. React——state

    在React--组件中介绍过组件有两种定义方式:函数形式以及类形式.但是要想在组件中使用state,就必须使用类形式定义组件. 组件中的state是组件私有的,完全由组件自己控制. 使用类形式定义一个 ...

  4. 转：面向切面编程AOP的理解

    AOP AOP(Aspect Oriented Programming),即面向切面编程,可以说是OOP(Object Oriented Programming,面向对象编程)的补充和完善.OOP引入 ...

  5. 超级简单实用的前端必备技能-javascript-全屏滚动插件

      fullPage.js fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站 本章内容将详细介绍Android事件的具体处理及常见事件. 主要功能 支持 ...

  6. 201521123065《java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 1.Map通过get(key)来获取值: 2.HashMap和Hash ...

  7. 201521123100 《Java程序设计》 第2周学习总结

    一. 本章学习总结 1.本周学习了Java语言中各种数据类型以及运算符,其中大部分还是和c语言差不多,发现了各种语言的相通性 2.进一步学习了eclipse的功能和使用方法,学会了如何将其与码云连接更 ...

  8. 201521123017 《Java程序设计》第12周学习总结

    1. 本周学习总结 2. 书面作业 Q1.字符流与文本文件:使用 PrintWriter(写),BufferedReader(读) 1.1 生成的三个学生对象,使用PrintWriter的printl ...

  9. Linux Ubuntu jdk(环境变量）配置

    一.下载JDK - jdk版本建议是gz形式的,rpm是RedHat里面的命令,所以下载rpm格式的时候回遇到问题 二. 打开虚拟机,创建目录 1 创建目录 #mkdir home 2 转到该目录下 ...

  10. 如何选择适合的前端UI框架

    根据近几年前端框架的热门,在前端开发框架不断更新与交换的时代,每一年都有黑马出现,是否适合自己开发的项目就不得而知了,只有认真的了解之后才能知道,这里主要给大家说一下如何选择适合旅游的前端UI框架?相 ...