原生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>
