轮播图原生js实现和jquery实现和js面向对象方式实现
原生JS实现
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>rotate</title>
<link rel="stylesheet" href="css/index.css" />
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
} </style>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="rotateImg">
<div id="imgcontainer">
<ul>
<li><a href="#"><img src="img/ppt/Familia--Stark.gif" alt="" /></a></li>
<li><a href="#"><img src="img/ppt/game-of-thrones-deaths-09.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/ppt/margaery-and-sansa.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/ppt/Robb-Stark-Game-Of-Thrones.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/ppt/starks.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/ppt/game-of-thrones-has-been-an-integral-part.jpg" alt="" /></a></li> </ul>
</div>
<ul> </ul>
<div class="arrows">
<div class="prev"><</div>
<div class="next">></div>
</div>
</div> </body>
</html>
css:
#rotateImg{
width: 400px;
height: 220px;
margin:100px auto;
position: relative;
font:12px helvetica;
overflow: hidden;
}
img{
width: 400px;
height: 220px;
}
#rotateImg>ul{
position: absolute;
bottom:15px;
left:50%;
margin-left:-60px;
}
#rotateImg>ul>li{
float: left;
/*list-style: none;*/
cursor: pointer;
width: 16px;
height: 16px;
margin-right:10px;
text-align: center;
line-height: 16px;
border-radius: 8px;
background: #fff;
}
#rotateImg>ul>li.light{
background:red;
color:#fff;
}
#imgcontainer{
width: 100%;
}
#imgcontainer>ul{
width: 1000%;
height: 220px;
list-style: none;
position: absolute;
}
#imgcontainer>ul li{
float:left;
}
.arrows{
position: absolute;
width: 100%;
height: 40px;
top:50%;
margin-top:-20px;
display: none;
color: red;
}
.arrows .prev, .arrows .next{
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
font:600 30px/40px "simsun";
background:rgba(0,0,0,0.2);
cursor: pointer;
}
.arrows .prev{
float:left;
}
.arrows .next{
float:right;
}
javascript:
window.onload=function(){
move("rotateImg");
}
function animation(obj,target){
var speed;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
speed = (target - obj.offsetLeft)/10;
speed = (speed>0?Math.ceil(speed):Math.floor(speed));
obj.style.left = obj.offsetLeft+speed+"px";
if(obj.offsetLeft==target){
clearInterval(obj.timer);
}
}, 20)
}
function move(id){
var rotateImg = document.getElementById(id);
var imgUl = rotateImg.children[0].children[0];
var imgList=imgUl.children;
var dotUl = rotateImg.children[1];
var arrows = rotateImg.children[2];
var prev = arrows.children[0];
var next = arrows.children[1];
var width = rotateImg.offsetWidth;
var num = 0;
//clone first image
var newLiFirstImgClone = imgUl.children[0].cloneNode(true);
imgUl.appendChild(newLiFirstImgClone);
//1、create dot according to number of images and append it
for(var i=1;i<imgList.length;i++){
var newDot = document.createElement("li");
newDot.innerHTML = i;
dotUl.appendChild(newDot);
}
var dotLiArray = dotUl.children;
//light first dot
light(num);
//2 click dot,transform image and light dot
for(var k =0;k<dotLiArray.length;k++){
dotLiArray[k].index = k;
dotLiArray[k].onclick=function(){
num = this.index;
light(num);
animation(imgUl,-num*width);
}
}
function light(index){
for(var j=0;j<dotLiArray.length;j++){
dotLiArray[j].className="";
}
dotLiArray[index].className = "light";
}
// 3、next
next.onclick=autoplay;
function autoplay(){
num++;
if(num==imgUl.children.length-1){
light(0);
//if img comes to the clone img,light the first dot
}else if(num==imgUl.children.length){
//if img is in the end ,set position to second img in a flash
imgUl.style.left=0;
num = 1;
light(num);
}else{
light(num);
}
animation(imgUl,-num*width);
}
//4、prevent
prev.onclick=function(){
num--;
if(num==-1){
//if image comes to the end then transform it before the clone image
imgUl.style.left=-width*(imgUl.children.length-1)+"px";
//change img position suddenly
num = imgUl.children.length-2;
}
light(num)
animation(imgUl,-num*width);
}
//5 when mouse move over elements,stop rotate and show arrow
rotateImg.onmouseover=function(){
clearInterval(rotateImg.timer);
arrows.style.display="block";
}
//6 when mouse out star rotate and hide arrow
rotateImg.onmouseout=function(){
clearInterval(rotateImg.timer);
arrows.style.display="none";
rotateImg.timer = setInterval(function(){
autoplay();
}, 1000)
}
//clearInterval and set original state as autoplay
clearInterval(rotateImg.timer);
rotateImg.timer = setInterval(function(){
autoplay();
}, 1000)
}
面向对象的javascript实现：
window.onload = function() {
var ar = ['img/wallPaper/v2-9f779d41608f6b4b62c75b597dde9f1e_b.jpg', 'img/wallPaper/starks.jpg'];
// new Move('img/wallPaper/v2-9f779d41608f6b4b62c75b597dde9f1e_b.jpg','img/wallPaper/starks.jpg','img/wallPaper/mygit.PNG');
new Move(ar);
}
function animation(obj, target) {
var speed;
clearInterval(obj.timer);
obj.timer = setInterval(function() {
speed = (target - obj.offsetLeft) / 10;
speed = (speed > 0 ? Math.ceil(speed) : Math.floor(speed));
obj.style.left = obj.offsetLeft + speed + "px";
if(obj.offsetLeft == target) {
clearInterval(obj.timer);
}
}, 20)
}
function Move() {
this.imgArr = [];
if(Array.isArray(arguments[0])) {
console.log('is array');
this.imgArr = arguments[0];
} else {
if(arguments.length <= 1) {
alert('请指定至少两张图片');
}
for(var a = 0; a < arguments.length; a++) {
this.imgArr.push(arguments[a]);
}
}
this.makeDiv();
var rotateImg = document.getElementById('rotateImg');
this.rotateImg = rotateImg;
this.imgUl = rotateImg.children[0].children[0];
this.imgList = rotateImg.children[0].children[0].children;
this.dotUl = rotateImg.children[1];
this.arrows = rotateImg.children[2];
this.prev = this.arrows.children[0];
this.next = this.arrows.children[1];
this.width = rotateImg.offsetWidth;
this.num = 0;
//clone first image
var newLiFirstImgClone = this.imgUl.children[0].cloneNode(true);
this.imgUl.appendChild(newLiFirstImgClone);
//1、create dot according to number of images and append it
for(var i = 1; i < this.imgList.length; i++) {
var newDot = document.createElement("li");
newDot.innerHTML = i;
this.dotUl.appendChild(newDot);
}
var _this = this;
this.dotLiArray = this.dotUl.children;
this.light(this.num);
//2 click dot,transform image and light dot
for(var k = 0; k < this.dotLiArray.length; k++) {
this.dotLiArray[k].index = k;
this.dotLiArray[k].onclick = function() {
_this.num = this.index;
_this.light(_this.num);
animation(_this.imgUl, -_this.num * _this.width);
}
}
//3 next
this.next.onclick = function() {
_this.autoplay();
}
//自动播放
rotateImg.timer = setInterval(function() {
_this.autoplay(this.num);
}, 1000);
//4、previous
this.prev.onclick = function() {
_this.movePrev();
}
//5 when mouse move over elements,stop rotate and show arrow
rotateImg.onmouseover = function() {
_this.moveOver();
}
//6 when mouse out star rotate and hide arrow
rotateImg.onmouseout = function() {
_this.moveOut();
}
}
Move.prototype.light = function(index) {
for(var j = 0; j < this.dotLiArray.length; j++) {
this.dotLiArray[j].className = "";
}
this.dotLiArray[index].className = "light";
}
Move.prototype.autoplay = function(num) {
this.num++;
if(this.num == this.imgUl.children.length - 1) {
this.light(0);
//if img comes to the clone img,light the first dot
} else if(this.num == this.imgUl.children.length) {
//if img is in the end ,set position to second img in a flash
this.imgUl.style.left = 0;
this.num = 1;
this.light(this.num);
} else {
this.light(this.num);
}
animation(this.imgUl, -this.num * this.width);
}
Move.prototype.movePrev = function() {
this.num--;
if(this.num == -1) {
//if image comes to the end then transform it before the clone image
this.imgUl.style.left = -this.width * (this.imgUl.children.length - 1) + "px";
//change img position suddenly
this.num = this.imgUl.children.length - 2;
}
this.light(this.num)
animation(this.imgUl, -this.num * this.width);
}
Move.prototype.moveOver = function() {
clearInterval(this.rotateImg.timer);
this.arrows.style.display = "block";
}
Move.prototype.moveOut = function() {
clearInterval(this.rotateImg.timer);
var this1 = this;
this.arrows.style.display = "none";
this.rotateImg.timer = setInterval(function() {
this1.autoplay(this1.num);
}, 1000)
}
Move.prototype.makeDiv = function() {
var div = document.createElement('div');
var str = '';
for(var i = 0; i < this.imgArr.length; i++) {
str += '<li><a href="#"><img src="' + this.imgArr[i] + '" alt="" /></a></li>'
}
var rlis = str;
var slide = ' <div id="rotateImg"><div id="imgcontainer"><ul>' + rlis + '</ul></div><ul></ul><div class="arrows"><div class="prev"><</div><div class="next">></div></div></div>';
div.innerHTML = slide;
document.body.append(div);
}
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<title>rotate</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
} #rotateImg {
width: 400px;
height: 220px;
margin: 100px auto;
position: relative;
font: 12px helvetica;
overflow: hidden;
} img {
width: 400px;
height: 220px;
} #rotateImg>ul {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -60px;
} #rotateImg>ul>li {
float: left;
/*list-style: none;*/
cursor: pointer;
width: 16px;
height: 16px;
margin-right: 10px;
text-align: center;
line-height: 16px;
border-radius: 8px;
background: #fff;
} #rotateImg>ul>li.light {
background: red;
color: #fff;
} #imgcontainer {
width: 100%;
} #imgcontainer>ul {
width: 1000%;
height: 220px;
list-style: none;
position: absolute;
} #imgcontainer>ul li {
float: left;
} .arrows {
position: absolute;
width: 100%;
height: 40px;
top: 50%;
margin-top: -20px;
display: none;
color: red;
} .arrows .prev,
.arrows .next {
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
font: 600 30px/40px "simsun";
background: rgba(0, 0, 0, 0.2);
cursor: pointer;
} .arrows .prev {
float: left;
} .arrows .next {
float: right;
}
</style>
<script type="text/javascript" src="js/lanquery.js">
</script>
</head> <body> </body> </html>
继承一个子轮播图：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<title>test</title> <link rel="stylesheet" type="text/css" href="css/dialog.css" />
<link rel="stylesheet" href="css/slideImg.css" />
<script type="text/javascript">
window.onload = function() {
var ar = ['img/wallPaper/v2-9f779d41608f6b4b62c75b597dde9f1e_b.jpg', 'img/wallPaper/starks.jpg','img/wallPaper/mygit.PNG','img/wallPaper/v2-3622d29e9ad7936ab3a869d438aad028_b.jpg'];
// new Move('img/wallPaper/v2-9f779d41608f6b4b62c75b597dde9f1e_b.jpg','img/wallPaper/starks.jpg','img/wallPaper/mygit.PNG');
// new Move(ar); function SubMove(id) {
Move.call(this, id);
}
// SubMove.prototype = new Move();
for(var i in Move.prototype) {
SubMove.prototype[i] = Move.prototype[i];
}
SubMove.prototype.moveOut = function() {
clearInterval(this.rotateImg.timer);
var this1 = this;
this.arrows.style.display = "none";
this.rotateImg.timer = setInterval(function() {
this1.autoplay(this1.num);
}, 3000)
}
new SubMove(ar);
}
</script>
<script type="text/javascript" src="js/lanquery.js"></script>
</head> <body>
</body> </html>
jquery实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery轮播效果图 </title>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
}
ul {
list-style: outside none none;
}
.slider, .slider-panel img, .slider-extra {
width: 650px;
height: 413px;
}
.slider {
text-align: center;
margin: 30px auto;
position: relative;
}
.slider-panel, .slider-nav, .slider-pre, .slider-next {
position: absolute;
z-index: 8;
}
.slider-panel {
position: absolute;
}
.slider-panel img {
border: none;
}
.slider-extra {
position: relative;
}
.slider-nav {
margin-left: -51px;
position: absolute;
left: 50%;
bottom: 4px;
}
.slider-nav li {
background: #ccc;
border-radius: 50%;
color: #fff;
cursor: pointer;
margin: 0 2px;
overflow: hidden;
text-align: center;
display: inline-block;
height: 18px;
line-height: 18px;
width: 18px;
}
.slider-nav .slider-item-selected {
background: lightcoral;
}
.slider-page a{
background: rgba(0, 0, 0, 0.2);
color: #fff;
text-align: center;
display: block;
font-family: "helvetica";
font-size: 22px;
width: 28px;
height: 62px;
line-height: 62px;
margin-top: -31px;
position: absolute;
top: 50%;
}
.slider-page a:hover {
background: rgba(0, 0, 0, 0.4);
}
.slider-next {
left: 100%;
margin-left: -28px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var currentIndex = 0;
var interval;//定时器
var hasStarted = false; //是否已经开始轮播
var t = 2000; //轮播时间间隔
var length = $('.slider-panel').length;
//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide();
//将第一个小原点slider-item设置为点亮状态
$('.slider-item:first').addClass('slider-item-selected');
//隐藏向前、向后翻按钮
$('.slider-page').hide();
//鼠标hover时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
$('.slider-panel, .slider-pre, .slider-next').hover(function() {
stop();
$('.slider-page').show();
}, function() {
$('.slider-page').hide();
start();
});
//小圆点hover
$('.slider-item').hover(function(e) {
stop(); //停止轮播
//轮播到当前hover圆点对应图片
var preIndex = $(".slider-item").filter(".slider-item-selected").index();
currentIndex = $(this).index();
play(preIndex, currentIndex);
}, function() { //hover结束重新轮播
start();
});
//绑定onclick事件
$('.slider-pre').on('click', function() {
pre();
});
$('.slider-next').unbind('click');
$('.slider-next').bind('click', function() {
next();
});
/**
* 向前翻页
*/
function pre() {
var preIndex = currentIndex;
currentIndex = (--currentIndex + length) % length;
//length为图片数，当--currentIndex为-1时将其currentIndex设为length-1
// console.log(currentIndex);
play(preIndex, currentIndex);
}
/**
* 向后翻页
*/
function next() {
var preIndex = currentIndex;
currentIndex = ++currentIndex % length;
play(preIndex, currentIndex);
}
/**
* 从preIndex页翻到currentIndex页
* preIndex 整数，翻页的起始页
* currentIndex 整数，翻到的那页
*/
function play(preIndex, currentIndex) {
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000);
//点亮小圆点
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}
/**
* 开始轮播 默认向后轮播next
*/
function start() {
if(!hasStarted) {
hasStarted = true; clearInterval(interval);
interval = setInterval(next, t);
}
}
/**
* 停止轮播
*/
function stop() {
clearInterval(interval); //清定时器
hasStarted = false;
}
//开始轮播
start();
});
</script>
</head>
<body>
<div class="slider">
<ul class="slider-main">
<li class="slider-panel">
<img src="img/game-of-thrones-deaths-09.jpg"/>
</li>
<li class="slider-panel">
<img src="img/game-of-thrones-deaths-24.jpg"/> </li>
<li class="slider-panel">
<img src="img/game-of-thrones-has-been-an-integral-part.jpg"/> </li>
<li class="slider-panel">
<img src="img/image.jpg"/>
</li>
</ul>
<div class="slider-extra">
<ul class="slider-nav">
<li class="slider-item">1</li>
<li class="slider-item">2</li>
<li class="slider-item">3</li>
<li class="slider-item">4</li>
</ul>
<div class="slider-page">
<a class="slider-pre" href="#"><</a>
<a class="slider-next" href="#">></a>
</div>
</div>
</div>
</body>
</html>
轮播图原生js实现和jquery实现和js面向对象方式实现的更多相关文章
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- js 轮播图 (原生)
注 : 此处内容较多, 只显示代码, 具体讲解看注释. 具体参考 "黑马 pink老师" https://www.bilibili.com/video/BV1Sy4y1C7h ...
- Jquery 轮播图简易框架
=====================基本结构===================== <div class="carousel" style="width: ...
- jquery里面的attr和css来设置轮播图竟然效果不一致
/*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document: ...
- 超级简单的jquery轮播图demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- React视角下的轮播图
天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...
- Js-带进度条的轮播图
带进度条的轮播图--原生JS实现 实现了图片自动轮播,左右按钮实现图片左右转换,下方原点或者缩小图点击选择其中的某一张图片,然后有红条实现图片的进度. <div class="cont ...
- 基于css制作轮播图的部分效果
在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...
- vue music-抓取歌单列表数据（渲染轮播图）
下载安装新依赖 babel-runtime:对es6语法进行转译 fastclick:对移动端进行点击300毫秒延迟 ,,取消掉 babel-polyfill:API 先添加,在npm install ...
随机推荐
- 51nod——2478 小b接水（预处理 思维）
我本来想把每个谷都处理了,想了下觉得不好办.后来看其他人写的是处理每个位置,把每个位置可以接的水累加起来.整挺好. #include <bits/stdc++.h> using names ...
- C/C++程序基础 （三）引用和指针
引用 引用变量与原始变量共享同一地址 int &a = b 则 &a = &b 引用类型的变量必须在声明时初始化,且不可以更换指向变量 常量的引用必须是常量引用,非常量的引用可 ...
- 神经网络系列学习笔记(二)——神经网络之DNN学习笔记
一.单层感知机(perceptron) 拥有输入层.输出层和一个隐含层.输入的特征向量通过隐含层变换到达输出层,在输出层得到分类结果: 缺点:无法模拟稍复杂一些的函数(例如简单的异或计算). 解决办法 ...
- JS大小转化B KB MB GB的转化方法
function conver(limit){ var size = ""; ){ //如果小于0.1KB转化成B size = limit.toFixed() + "B ...
- windows下CMD命令大全（仅供参考）
CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统版本)chcp 修改默认字符集chcp 936默认中文chcp 650011. appwiz.c ...
- Serializer序列器
定义Serializer 1. 定义方法 Django REST framework中的Serializer使用类来定义,须继承自rest_framework.serializers.Serializ ...
- Hi3518EV300编译U-Boot和内核报错:loadlocale.c:130: _nl_intern_locale_data: Assertion `cnt < (sizeof (_nl_value_type_LC_TIME) / sizeof (_nl_value_type_LC_TIME[0]))' failed. Aborted (core dumped)
下载Hi3518EV300的SDK后编译内核和U-boot,发现爆出如下错误: scripts/kconfig/conf --silentoldconfig Kconfig Aborted (core ...
- Diycode开源项目 搭建可以具有下拉刷新和上拉加载的Fragment
1.效果预览 1.1.这个首页就是一个Fragment碎片,本文讲述的就是这个碎片的搭建方式. 下拉会有一个旋转的刷新圈,上拉会刷新数据. 1.2.整体结构 首先底层的是BaseFragment 然后 ...
- Linux下Oracle JDK替换Open JDK
Oracle的产品需要Oracle JDK,但是Linux发行版附带的都是开源的Open JDK,这里给出的方法是在不删除原有Open JDK的情况下,安装Oracle JDK 环境 系统:CentO ...
- 爬虫工程师常用的 Chrome 插件
做多了爬虫都知道,写一个爬虫大部分时间不是在代码上,而是在分析网页上,所有有一套好用的工具可以极大节省劳动力,这里把平时积累的一些 Chrome 插件分享出来,均来自本人和同事推荐,并不定时更新,欢迎 ...