Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了完美实现 js 焦点轮播效果的相关代码,采用辅助图片实现图片无限滚动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
假如前后不加一张图片的话,图片顺序为 [1,2,3,4,5],当你点到第 5 张图时,再点 "下一张"(就是要回到第 1 张图那里),这时候,你想象下那个画面,会一瞬间 "刷刷刷" 地闪过中间那几张图片才能到第 1 张图那里,这样,太难看了吧。
为了解决这个问题,所以要在第 5 张那里加多一张 1 图,图片顺序为 [1,2,3,4,5,1]。当你在第 5 张图点下一张时,图片滚动顺序是这样的:5 ----> (1) ----> 1,(注:中间的那个 1 是指后面多加的 1 图),一旦到了那个 "多加的 1 图",轮播就会瞬间回到 前面的 1 图那里。
因为都是 "1 图",所以视觉上不会有那个一次 "刷刷刷" 闪过好几张图片的效果。
效果如图:
实现代码:
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- <style type="text/CSS">
- *{
- margin: 0;
- padding: 0;
- list-style: none;
- text-decoration: none;
- }
- .wrap{
- width: 490px;
- height: 170px;
- margin: 100px auto;
- border: 1px solid #000000;
- position: relative;
- overflow: hidden;
- }
- #pic{
- width: 3430px;
- position: absolute;
- }
- #pic li{
- float: left;
- height: 170px;
- }
- #list{
- position: absolute;
- bottom: 10px;
- left:150px ;
- }
- #list li{
- float: left;
- width: 15px;
- height: 15px;
- background: #fff;
- margin: 0 10px;
- border-radius: 50%;
- cursor: pointer;
- }
- #list .on{
- background: #e27a00;
- }
- .Prev{
- top: 30px;
- left: 0;
- }
- .Next{
- top: 30px;
- right: 0;
- }
- .Prev,.Next{
- position: absolute;
- font-size: 80px;
- font-weight: bold;
- color:#fff ;
- -webkit-transition: all 0.35s ease-in-out
- }
- .Next:hover,
- .Prev:hover{
- background: #ccc;
- background: rgba(204, 204, 204, 0.4);
- }
- </style>
- <script type="text/javascript">
- window.onload=function(){
- var wrap=document.getElementById('wrap');
- var pic=document.getElementById('pic');
- var Li=document.getElementById('list').getElementsByTagName('li');
- var prev=document.getElementById('Prev');
- var next=document.getElementById('Next');
- var animated=false;
- var index=0;
- var timer=null;
- next.onclick=function(){
- if(animated){//如果图片正在滚动时要返回,否则index会变化
- return;
- }
- else{
- index++;
- if(index>=Li.length){
- index=0;
- }
- }
- showlist();
- if(animated == false){//if(!animated)
- animate(-490);
- }
- }
- prev.onclick=function(){
- if(animated){
- return;
- }
- else{
- index--;
- if(index<=0){
- index=Li.length-1;
- }
- }
- showlist();
- if(!animated){//判断其是否滚动完
- animate(490);
- }
- }
- for(var i=0;i<Li.length;i++){
- Li[i].num=i;
- Li[i].onclick=function(){
- if(this.className=="on"){
- return;
- }
- var offset = -490*(this.num-index);
- if(!animated){
- animate(offset);
- }
- index=this.num;
- showlist();
- }
- }
- //图片变换
- function animate(offset){
- animated=true;
- var newLeft=parseInt(pic.style.left) + offset;
- var time=300//位移总时间
- var interval=10;//位移间隔时间
- var speed=offset/(time/interval);//每次位移量
- function go(){
- if((speed < 0 && parseInt(pic.style.left) > newLeft )|| (speed > 0 && parseInt(pic.style.left) < newLeft)){
- pic.style.left = parseInt(pic.style.left) + speed + 'px';
- setTimeout(go,interval);
- }else{
- animated=false;
- pic.style.left= newLeft + 'px';
- if(newLeft > -490){
- pic.style.left = -2450 + 'px';
- }
- if(newLeft < -2450){
- pic.style.left = -490 + 'px';
- }
- }
- }
- go();
- }
- //圆点变换
- function showlist(){
- for(var i=0;i<Li.length;i++){
- Li[i].className="";
- }
- Li[index].className="on";
- }
- //自动播放
- function play(){
- timer=setInterval(function(){
- next.onclick();
- },2000);
- }
- function stop(){
- clearInterval(timer);
- }
- wrap.onmouseover=stop;
- wrap.onmouseout=play;
- play();
- }
- </script>
- </head>
- <body>
- <div class="wrap" id="wrap">
- <ul id="pic" style="left: -490px;">
- <li><a href="#"><img src="/54111d7d00018ba604900170.jpg" alt="5"/></a></li>
- <li><a href="#"><img src="/54111cd9000174cd04900170.jpg" alt="1"/></a></li>
- <li><a href="#"><img src="/54111dac000118af04900170.jpg" alt="2"/></a></li>
- <li><a href="#"><img src="/54111d9c0001998204900170.jpg" alt="3"/></a></li>
- <li><a href="#"><img src="/54111d8a0001f41704900170.jpg" alt="4"/></a></li>
- <li><a href="#"><img src="/54111d7d00018ba604900170.jpg" alt="5"/></a></li>
- <li><a href="#"><img src="/54111cd9000174cd04900170.jpg" alt="1"/></a></li>
- </ul>
- <ul id="list">
- <li class="on"></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
- <a href="javascript:;" class="Prev" id="Prev"><</a>
- <a href="javascript:;" class="Next" id="Next">></a>
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0704/326957.html