JS轮播图实现简单代码
作者:My-Lady 发布时间:2024-04-28 09:38:41
标签:js,轮播图
本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下
思路:
1、首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片
2、Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化。
3、图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示
4、当鼠标滑动到图片上时,清除定时器,图片停止轮播,当鼠标移出时继续进行轮播
5、图片上有一组小圆点用于与当前显示的图片相对应,同时可以通过点击的方式查看对应的图片
6、图片可以通过点击进行左右滑动显示
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
.container{
margin:0 auto;
width:600px;
height:400px;
position: relative;
overflow: hidden;
border:4px solid gray;
box-shadow: 3px 3px 5px gray;
border-radius:10px;
}
.list{
width:4200px;
height:400px;
position: absolute;
top:0px;
}
img{
float:left;
width:600px;
height:400px;
}
.dots{
position: absolute;
left:40%;
bottom:30px;
list-style: none;
}
.dots li{
float:left;
width:8px;
height:8px;
border-radius: 50%;
background: gray;
margin-left:5px
}
.dots .active{
background: white;
}
.pre,.next{
position: absolute;
top:40%;
font-size:40px;
color:white;
text-align:center;
background: rgba(128,128,128,0.5);
/* display:none;*/
}
.pre{
left:30px;
}
.next{
right:30px;
}
</style>
</head>
<body>
<div class="container">
<div class="list" style=" left:-600px;">
<img src="img/5.jpg">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/1.jpg">
</div>
<ul class="dots">
<li index=1 class="active dot"></li>
<li index=2 class="dot"></li>
<li index=3 class="dot"></li>
<li index=4 class="dot"></li>
<li index=5 class="dot"></li>
</ul>
<div class="pre"><</div>
<div class="next">></div>
</div>
<script type="text/javascript">
var index=1,timer;
function init(){
eventBind();
autoPlay();
}
init();
function autoPlay(){
timer =setInterval(function () {
animation(-600);
dotIndex(true);
},1000)
}
function stopAutoPlay() {
clearInterval(timer);
}
function dotIndex(add){
if(add){
index++;
}
else{
index--;
}
if(index>5){
index = 1;
}
if(index<1){
index = 5;
}
dotActive();
}
function dotActive() {
var dots = document.getElementsByClassName("dot");
var len = dots.length;
for(var i=0 ;i<len ;i++){
dots[i].className = "dot";
}
for(var i=0;i<len;i++){
/*此处可以不用parseInt,当不用全等时*/
if(index === parseInt(dots[i].getAttribute("index"))){
dots[i].className = "dot active";
}
}
}
function eventBind(){
/*点的点击事件*/
var dots = document.getElementsByClassName("dot");
var len = dots.length;
for(var i=0;i<len;i++){
(function(j){
dots[j].onclick = function(e){
var ind = parseInt(dots[j].getAttribute("index"));
animation((index - ind)*(-600));/*显示点击的图片*/
index = ind;
dotActive();
}
})(i)
}
/*容器的hover事件*/
var con = document.getElementsByClassName("container")[0];
/*鼠标移动到容器上时,停止制动滑动,离开时继续滚动*/
con.onmouseover = function (e) {
stopAutoPlay();
}
con.onmouseout =function(e){
autoPlay();
}
/*箭头事件的绑定*/
var pre = document.getElementsByClassName("pre")[0];
var next = document.getElementsByClassName("next")[0];
pre.onclick = function (e) {
dotIndex(false);
animation(600);
}
next.onclick = function (e) {
dotIndex(true);
animation(-600);
}
}
function animation(offset){
var lists = document.getElementsByClassName("list")[0];
var left = parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;
if(left<-3000){
lists.style.left = "-600px";
}
else if(left>-600){
lists.style.left = "-3000px";
}
else{
lists.style.left = left+"px";
}
}
</script>
</body>
</html>
精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
来源:http://blog.csdn.net/heshan1992/article/details/77504204
0
投稿
猜你喜欢
- 目录1.程序入口2.__name__是什么?场景1:直接运行脚本场景2:从其他脚本导入3.__name__可以显示包路径5.测试模块里函数关
- 简单的Python代码:用户登录注册利用业余时间,写了一个用户进行登录注册的代码,非常简单。主要实现的功能是:1、可以进行用户登录,在用户进
- 本文通过Python3+PyQt5实现自定义部件–分数滑块。它既能支持键盘也支持鼠标,使用物理(视口)坐标通过绘制方式显示。#!/usr/b
- 一、嵌套路由(配置好父路由component后,在父路由下面添加children属性来配置这个父路由的子路由)需要注意的是:父组件中的<
- 目录介绍Python连接MySQL实现数据储存总结介绍MySQL是一个关系型数据库,MySQL由于性能高、成本低、可靠性好,已经成为最流行的
- folder.htm<html><head><title>闪亮日子之在线创建文件夹</title&
- 命名空间: 每一个作用域变量存储的位置,或者解释为 存储作用域中变量的字典。作用: 获取想查看某个作用域中的变量名、变量值。使用方法: lo
- 相关文章Pytest框架之fixture详解(一)Pytest框架之fixture详解(二)Pytest框架之fixture详解(三)本文关
- 利用字典dict来完成统计举例:a = [1, 2, 3, 1, 1, 2]dict = {}for key in a: dic
- 以下是引用片段:Function c2u(myText) Dim i c2u = "" For i = 1 to Len
- 购物车的设计目标 从程序员的观点来看,购物车是维护购物者商品选购、允许察看、允许修改的一个对象。购物车本身是一个非常简单的程序,但开发者要考
- 首先 跳过权限表模式启动MySQL:mysqld --skip-grant-tables &从现在开始,你将踏入第一个坑
- 首先,你需要去有道翻译API官网去申请key:http://fanyi.youdao.com/openapi?path=data-mode得
- 前言:K8s也提供API接口,提供这个接口的是管理节点的apiserver组件,apiserver服务负责提供HTTP API,以便用户、其
- 凯撒密码的原理:计算并输出偏移量为3的凯撒密码的结果注意:密文是大写字母,在变换加密之前把明文字母都替换为大写字母def casar(mes
- 一、概述:用来描述或者匹配一系列符合某个语句规则的字符串二、单个符号1、英文句点.符号:匹配单个任意字符。表达式t.o 可以匹配:tno,t
- 这篇文章主要介绍了Pandas数据离散化原理及实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋
- 今天 Python3.8 发布啦,它是 Python2 终结前最后一个大版本,我们一起看看这个版本都添加了那些新功能和特性。PEP 572:
- 方案5 使用xml参数 对sql server xml类型参数不熟悉的童鞋需要先了解下XQuery概念,这里简单提下XQuery 是用来从
- 安装正常情况,只需pip install PIL==1.1.7或者pip install Pillow==2.9.0即可。但需留意安装后的输