23406站长网欢迎你的到来,如本站内容对你有所帮助请收藏(www.23406.com)以便下次访问... 网站收录提交入口
当前位置:首页 > 源代码分享 > javascript轮播图效果代码,小圆圈滚动图片

javascript轮播图效果代码,小圆圈滚动图片

javascript轮播图效果代码,小圆圈滚动图片
javascript轮播图效果代码,小圆圈滚动图片正文-->
站长日常做网站,想做在网站页面中添加图片滚动效果,即可通过23406小编分享的以下代码方法来实现,内容如下:

通过js代码来实现js部分的图片滚动效果功能:当鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。
 
首先,我们先通过display:none让我们初始的两个箭头隐藏;然后获取两个箭头和大盒子,在给大盒子添加鼠标经过和鼠标离开事件。

js代码如下:

 

var left = document.querySelector('.left');
   var right = document.querySelector('.right');
   var box = document.querySelector('.box');
   box.addEventListener('mouseenter',function(){
       left.style.display = 'block';
       right.style.display = 'block';
   })
   box.addEventListener('mouseleave',function(){
       left.style.display = 'none';
       right.style.display = 'none';
   })
 
实现小圆圈滚动图片

这里就用到动画函数,前面已经讲过怎样封装动画函数,这里不在赘述,直接引用。但是要注意将动画函数的js文件放在我们index.js的上面。又因为只有添加了定位了元素才可以使用动画函数,我们还需要给pic这个ul添加定位。然后根据规律发现: 点击某个小圆圈 ,ul滚动的距离为: 小圆圈的索引号乘以图片的宽度。(因为图片是向左走,所以为负值)所以需要知道小圆圈的索引号, 我们就可以在生成小圆圈的时候,给它设置一个自定义属性,点击的时候获取这个自定义属性。
 
先在生成li的时候设置索引:
li.setAttribute('index',i);
        然后在给li添加点击事件的时候获得索引,并得到图片宽度,调用动画函数:
 
 
li.addEventListener('click',function(){
    var boxWidth = box.offsetWidth;
    //获得索引号
    var index = this.getAttribute('index');
    for(var i = 0;i<lis.children.length;i++){
        lis.children[i].className = '';
    }
    this.className = 'selected';
    animate(pic,-index*boxWidth)
})

Js实现轮播图

这可能是轮播图最简单点的实现之一,通过改变background的图片链接来实现该效果,首先需要将图片命名格式统一比如pic01.jpg,pic02.jpg…,再通过js使用定时器去改变background属性里面的url()图片链接的名字来实现切换效果。代码如下:
 
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>轮播图实现02</title>
  <style>
   body{
    margin: 0;
    padding: 0;
   }
   .lunbo{
    width:100%;
    height:720px;
    background-image: url(pic/img1.jpeg);/*背景图片*/
    background-size:100% 100%; 
   }
  </style>
 </head>
 <body>
  <div class="lunbo">
    
  </div>
  <script type="text/javascript">
    var index = 1;
   function lunbo(){
    index ++ ;
    //判断number是否大于3
    if(index > 3){
     index = 1;
    }
    //获取img对象
  var img = document.getElementsByClassName("lunbo")[0];
  img.style.background = "url(pic/img"+index+".jpeg)";
  img.style.backgroundSize="100% 100%"; 
   }
   //2.定义定时器
   setInterval(lunbo,3000);
  </script>
 </body>
</html>

以上就是今日23406小编分享的js滚动图片代码内容了,如还有其它疑问请访问23406网(http://www.23406.com/)反馈。

 

  • 简介
  • 收录
  • 分类
上一篇:dede织梦cms内容页调用当前栏目名称和连接代码 下一篇:ThinkPHP-MVC分层介绍
Alexa排名/搜索流量占比
  • javascript轮播图效果代码,小圆圈滚动图片Alexa排名
  • javascript轮播图效果代码,小圆圈滚动图片搜索流量占比