这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这几天一直在看 js 动画,今天又 get 到了一个轮播图,使用纯 js 实现的,但是外观样式不是很好看,如果大家有需要可以美化下,具体实现代码还是很完整的,大家可以参考下
这几天一直在看 js 动画,今天又 get 到了一个轮播图,使用纯 js 实现的,但是没有美化哈,需要的小伙伴自己美化喔
如下代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>图片轮播的效果</title>
- <style type="text/CSS">
- * {
- margin: 0;
- padding: 0;
- text-decoration: none;
- }
- body {
- padding: 20px;
- }
- #container {
- position: relative;
- width: 600px;
- height: 400px;
- border: 3px solid #333;
- overflow: hidden;
- }
- #list {
- position: absolute;
- z-index: 1;
- width: 4200px;
- height: 400px;
- }
- #list img {
- float: left;
- width: 600px;
- height: 400px;
- }
- #buttons {
- position: absolute;
- left: 250px;
- bottom: 20px;
- z-index: 2;
- height: 10px;
- width: 100px;
- }
- #buttons span {
- float: left;
- margin-right: 5px;
- width: 10px;
- height: 10px;
- border: 1px solid #fff;
- border-radius: 50%;
- background: #333;
- cursor: pointer;
- }
- #buttons .on {
- background: orangered;
- }
- .arrow {
- position: absolute;
- top: 180px;
- z-index: 2;
- display: none;
- width: 40px;
- height: 40px;
- font-size: 36px;
- font-weight: bold;
- line-height: 39px;
- text-align: center;
- color: #fff;
- background-color: RGBA(0, 0, 0, .3);
- cursor: pointer;
- }
- .arrow:hover {
- background-color: RGBA(0, 0, 0, .7);
- }
- #container:hover .arrow {
- display: block;
- }
- #prev {
- left: 20px;
- }
- #next {
- right: 20px;
- }
- </style>
- </head>
- <body>
- <div id="container">
- <div id="list" style="left: -600px;">
- <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="无缝滚动" />
- <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="无缝滚动" />
- <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="无缝滚动" />
- <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="无缝滚动" />
- <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="无缝滚动" />
- <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="无缝滚动" />
- <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="无缝滚动" />
- </div>
- <div id="buttons">
- <span index="1" class="on"></span>
- <span index="2"></span>
- <span index="3"></span>
- <span index="4"></span>
- <span index="5"></span>
- </div>
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="prev" class="arrow"><</a>
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next" class="arrow">></a>
- </div>
- <script type="text/javascript">
- window.onload=function(){
- var container = document.getElementById("container");
- var list = document.getElementById("list");
- var buttons = document.getElementById("buttons").getElementsByTagName('span');
- var prev = document.getElementById("prev");
- var next = document.getElementById("next");
- var index = 1;
- function animate(offset){
- var newLeft = parseInt(list.style.left) + offset;
- list.style.left = newLeft + 'px';
- if(newLeft<-3000){
- list.style.left= -600 +'px';
- }
- if(newLeft>-600){
- list.style.left = -3000 + 'px';
- }
- }
- function buttonsshow(){
- for(var i =0; i<buttons.length;i++){
- if(buttons[i].className == 'on'){
- buttons[i].className='';
- }
- }
- buttons[index-1].className='on';
- }
- prev.onclick = function(){
- index-=1;
- if(index<1)
- {
- index=5;
- }
- buttonsshow();
- animate(600);
- };
- next.onclick = function(){
- index+=1;
- if(index>5){
- index=1;
- }
- buttonsshow();
- animate(-600);
- };
- //自动播放
- var timer;
- function play(){
- timer= setInterval(function(){
- next.onclick();
- },1000)
- }
- play();
- function stop(){
- clearInterval(timer);
- }
- container.onmouseover=stop;
- container.onmouseout=play;
- for(var i=0; i<buttons.length; i++){
- ( function(i){
- buttons[i].onclick=function(){
- var clickindex= parseInt(this.getAttribute('index'));
- var offset = 600*(index-clickindex);
- animate(offset);
- index = clickindex;
- buttonsshow();
- }
- })(i);
- }
- }
- </script>
- </body>
- </html>
以上所述是小编给大家介绍的纯 JS 实现轮播图,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0528/327360.html