使用html+js+css 实现页面轮播图效果(实例讲解)
作者:欢呀 发布时间:2024-02-24 01:48:44
标签:html,js,css,轮播图
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();
来源:http://www.cnblogs.com/shaoxiaohuan/archive/2017/09/20/7562224.html
0
投稿
猜你喜欢
- 一、搭建项目环境1、创建 RBAC五张表RBAC,即基于角色的权限访问控制(Role-Based Access Control),就是用户通
- coalesce 函数可以接受多个参数,将会返回这些参数中第一个非NULL的值,若提供的参数全部为NULL,则返回NULLifnull 函数
- 有的时候,我们为了保持网页的美观,需要将较长的文字在一定长度时截断。比如我们希望在列表中显示文章标题的前15个字,那么一个这样的标题:“rs
- 1. rangerange是python内置的一个类,该类型表示一个不可改变(immutable)的数字序列,常常用于在for循环中迭代一组
- 场景:把一个时间字符串转成Date,存进Mysql。时间天数会比实际时间少1天,也可能是小时少了13-14小时Mysql的时区是CST(使用
- 1 类继承Python 是面向对象的编程语言,因此支持面向对象的三大特性之一:继承。继承是代码重用的一种途径,Python 中的继承就像现实
- 前言本篇主要给大家讲述了如何利用Go语言的语法特性实现Set类型的数据结构,分享出来供大家参考学习,话不多说了,来一起看看详细的介绍吧。需求
- 项目进行到和服务器交互,通过post访问服务器端jsp,jsp访问服务器端mysql数据库,最终返回到客户端的中文出现乱码问题。在整个流程中
- 目录1、原始需求2、解决方案3、canal介绍、安装canal的工作原理架构安装4、验证1、原始需求既要同步原始全量数据,也要实时同步MyS
- 1、没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2、I/O吞吐量小,形成了瓶颈效应。 3、没有 创建计算列导致查询
- 本文实例讲述了Python进程间通信用法。分享给大家供大家参考。具体如下:#!/usr/bin/env python# -*- coding
- Flask 环境配置你的应用程序可能需要大量的软件包才能正常的工作。如果都不需要 Flask 包的话,你有可能读错了教程。当应用程序运行的时
- 一、背景:nginx 的log 不会自动按天备份,而且记录时间格式不统一,此程序专门解决这两个问题;二、windows 部署方式1.在 ng
- 页面缓存e.g.@cache_page(time_out, key_prefix=key_prefix)def my_view(): ...
- mysql时间戳转换select unix_timestamp(); 获取当前时间的时间戳SELECT FROM_UNIXTIME(1529
- 根据 Dotzler 的统计,IE6 的份额正在缩水,这可能是 2009 年本人听到的第一个好消息。于此同时,Gmail 的浏览器支持列表中
- 这篇文章主要介绍了Python OpenCV视频截取并保存实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价
- python将a.txt的内容复制到b.txt 中# 1. 用r方式打开a.txtf = open("a.txt",&q
- 总结为:改注册表。顺手写个脚本:import tkinter as tkfrom tkinter import ttkimport winr
- 本文实例讲述了Python中IPYTHON用法。分享给大家供大家参考。具体分析如下:1. 使用TAB补全功能2. 配置IPYTHON.ipy