原生js实现图片轮播效果
思路：设置父容器（一定宽度，一定高度，相对定位，子容器超出部分进行隐藏），子容器图片并排（浮动，绝对定位，每次点击进行相应的左或右偏移量）
1.html:
<!DOCTYPE html>
<html>
<head>
<title>Carousel figure</title>
<meta charset="utf-8">
<!-- 浏览器标签页显示图标 -->
<link rel="icon" type="image/x-icon" href="./images/1.jpg">
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<!-- 构建container父容器 -->
<div class="container">
<!-- 图片部分,style部分设置便于js中改变偏移量，从而实现图片轮播-->
<div class="pic" style="left: 0px;">
<!-- 图片部分，建议均加上alt，利于seo -->
<img src="./images/1.jpg" alt="1">
<img src="./images/2.jpg" alt="2">
<img src="./images/3.jpg" alt="3">
<img src="./images/4.jpg" alt="4">
<img src="./images/5.jpg" alt="5">
<img src="./images/6.jpg" alt="6">
</div> <!-- 箭头部分，实现下一张，上一张效果 -->
<a href="javascript:void(0)" class="arrow arrow_left"><</a>
<a href="javascript:void(0)" class="arrow arrow_right">></a> <!-- 当前图片id显示 -->
<div class="point">
<span class="on">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</div> <!-- html body部分加载完成，最后调用js,进行操作；否则无法有效操作 -->
<script type="text/javascript" src="1.js"></script>
</body>
</html>
1.css:
/* body部分清一下外边距与内边距，不建议*（可能影响效率），主流大网站均未采用*进行清边距 */
body{
margin:;
padding:;
}
a{
text-decoration: none;
color: green;
}
a:visited{
color: siver;
}
a:hover{
color: gold;
} .container{
/* container采用相对定位relative，便于子容器进行绝对定位absolute */
position: relative; /* 左右居中对齐 */
margin: 0 auto; /* 每张图片的宽度高度均为320px, */
width: 320px;
height: 320px;
/* 图片超出部分隐藏 */
overflow: hidden;
/* border: 1px solid */
/* 设置阴影：水平阴影偏离0，垂直阴影偏移0，模糊距离10px，颜色 */
box-shadow: 0 0 10px orange;
}
.pic{
position: absolute;
/* 6张图片进行排放，故宽度为1920px */
width: 1920px;
height: 320px;
}
.pic img{
/* 设置左浮动，使6张图片排成一排 */
float: left;
width: 320px;
height: 320px;
}
.arrow{
display: block; border-radius: 50%;
/* 采用字符实体，故设置字体使用font-size */
font-size: 60px;
默认隐藏箭头，
display: none;
}
/* 当悬浮在container区域显示箭头 */
.container:hover .arrow{
display: block;
}
/* 当悬浮在arrow区域显示箭头 */
.container .arrow:hover{
background-color: rgba(0, 0, 0, 0.2);
}
.arrow_left{
position: absolute;
left: 30px;
top: 40%;
text-align: center;
width: 80px;
height: 80px;
}
.arrow_right{
position: absolute;
right: 30px;
top: 40%;
text-align: center;
width: 80px;
height: 80px;
}
.point{
position: absolute;
margin: 280px auto 0 80px;
}
.point span{
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: orange;
text-align: center;
cursor: pointer;
}
.point span.on{
background-color: red;
}
.point span:active{
background-color: gold;
}
1.js:
// 获取pic组第一个
var pic = document.getElementsByClassName('pic')[0];
// 获取arrow_left
var arrow_left = document.getElementsByClassName('arrow_left')[0];
// 获取arrow_right
var arrow_right = document.getElementsByClassName('arrow_right')[0];
// 获取span组
var points=document.getElementsByTagName('span');
var index=0; // 点击右箭头，下一张图片
arrow_right.onclick = function() {
next_pic();
}
// 点击左箭头，上一张图片
arrow_left.onclick = function() {
prev_pic();
} // 函数实现下一张浏览效果
function next_pic() {
// 最后一张，下一张变为第一张（left值为0）
if (parseInt(pic.style.left) === -1600) {
pic.style.left = 0 + "px";
} else {
// 下一张
var pos = parseInt(pic.style.left) - 320;
pic.style.left = pos + 'px';
}
index++;
if(index>5){
index=0;
}
showPoint();
} function prev_pic() {
if (parseInt(pic.style.left) === 0) {
pic.style.left = -1600 + "px";
} else {
var pos = parseInt(pic.style.left) + 320;
pic.style.left = pos + 'px';
}
index--;
if(index<0){
index=5;
}
showPoint();
} var timer = null; // 自动图片轮播，设置1s间隔
function autoPlay() {
// timer=setInterval(function(){
// next_pic();
// },1000);
timer = setInterval(next_pic, 1000);
}
autoPlay(); var container = document.getElementsByClassName('container')[0];
// 鼠标移动到container区域，暂停自动播放
container.onmouseenter = function() {
clearInterval(timer);
}
// 鼠标离开container区域，自动播放
container.onmouseleave = function() {
autoPlay();
} // 实现点击相应的小按钮图片跳转到相应图片功能
for (var i = 0; i < points.length; i++) {
(function(i){
points[i].onclick=function (){
//0~0,1~-320...5~-1600
pic.style.left=-320*i +"px";
};
index=i;
//无法点击point，使其变色
showPoint();
}
)(i);
} // 实现相应图片对应相应小按钮功能
function showPoint(){
for(var i=0;i<points.length;i++){
points[i].className="";
}
points[index].className="on";
}
原生js实现图片轮播效果的更多相关文章
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
- 原生JS实现幻灯片轮播效果
在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...
- 原生Javascript实现图片轮播效果
首先引入js运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ ...
- 原生JS实现图片轮播
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js图片轮播效果实现代码
首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...
- js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
- JQuery简单实现图片轮播效果
很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
随机推荐
- 怎样使用 fiddler抓取网络数据包?
今天我们使用的工具是一个非常著名的抓包工具,百度搜索一下即可找到(或者关注/私信我,查看共享,一般我在百度经验中使用到的软件类工具,都可以在共享网盘中找到),因此这里不演示下载,相信您能很容易得到它的 ...
- LeetCode 682 Baseball Game 解题报告
题目要求 You're now a baseball game point recorder. Given a list of strings, each string can be one of t ...
- 洛谷P4052 [JSOI2007]文本生成器 AC自动机+dp
正解:AC自动机+dp 解题报告: 传送门! 感觉AC自动机套dp的题还挺套路的,,, 一般就先跑遍AC自动机,然后就用dp dp的状态一般都是f[i][j]:有i个字符,是ac自动机上的第j个节点, ...
- python显示进度条
当一个python任务是需要逐个处理相同的事物时(里面有循环操作,例如对一系列的文件进行处理),这时可以将处理的进度条加进来,下面是一个例子: import time import sys def v ...
- Vue项目
1.新建Vue项目:vue init webpack projectName 2.vue-router模块 1.安装vue-router模块:npm install vue-router --save ...
- what's the python之可迭代对象、迭代器与生成器（附面试题）
可迭代对象 字符串.列表.元祖.集合.字典都是可迭代的,数字是不可迭代的.(可以用for循环遍历取出内部元素的就是可迭代的) 如何查看一个变量是否为可迭代: from collections impo ...
- dbdeployer 快速安装MySQL8.0各测试环境
Linux系统必须安装有Go语言: 下载最新的包:https://github.com/datacharmer/dbdeployer/releases 解压: tar -xzf dbdepl ...
- Observer（__ob__: Observer） 对象添加属性
重点通过这句话给对象添加属性: this.$set(r,'upshow',false); 在data中定义laws来装从接口中请求到数据 data(){ return{ laws:[],//法律依据 ...
- （转）以太坊 钱包 创建 导入 Keystore
最近闲来无事 研究了下以太坊钱包 下边分享下 准备工作 : 需要用到的加密:BIP32 BIP39 BIP44 SCRYPT 加密算法 githab地址 https://github.com/Nova ...
- Windows下解压分卷压缩方法
各种压缩分卷格式 rar分卷格式是*.part1.rar,*.part2.rar 等等. 360分卷压缩出来的文件的名字是*.zip.001.*.zip002 等等. WinZip分卷压缩出来的文件名 ...