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. 学习笔记GAN004:DCGAN main.py

    Scipy 高端科学计算:http://blog.chinaunix.net/uid-21633169-id-4437868.html import os #引用操作系统函数文件 import sci ...

  2. 对于c语言存储分配程序（malloc函数）实现的理解

    内容主要出自<The C Programming Language>一书,不得不说这是一本程序员必读的书,我大二读了前面几章就扔到一边了,直到最近才又拿起来再读,找不到言语来形容我现在后悔 ...

  3. 微信公众平台接口调用第一步（获取access_token）

    最近公司需要开发微信公众号,闲着无聊就写写博客,希望能帮到你我 上代码: package test; import java.util.List; import java.util.ArrayList ...

  4. 九度OJ 1017 还是畅通工程

    #include <iostream> #include <string.h> #include <sstream> #include <math.h> ...

  5. 团队作业8——第二次项目冲刺（Beta阶段）Day1--5.18

    1.展开站立式会议: 会议内容:①团队里的新成员做简单的自我介绍. ②讨论每天的任务分配问题. ③提出一个严格要求:博客一定要及时发布,并及时提交作业,遇到困难可以提出来一起解决. ④就现阶段的项目进 ...

  6. 201521123040 《Java程序设计》第6周学习总结

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

  7. java第十三次作业

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相内关容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  8. 201521123016 《Java学习笔记》 第11周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问, ...

  9. Eclipse rap 富客户端开发总结(12) ：Rap 优化之组件的销毁

    一.概述      经过几个月的rap 项目实战,总结了一些小经验,在这里总结一下,希望对大家有所帮助. 二.销毁的处理       相信学习rap 的同学都知道,swt 中提供了许多的组件,像lab ...

  10. 下载安装ActiveMQ(消息队列)

    安装步骤: 第一步.安装jdk环境,因为ActiveMQ是使用java语言编写. 第二步.将下载好的activemq压缩包上传至Linux系统,进行解压. 第三步.进入解压后的bin/目录,进行启动a ...