JS实现图片自动播放效果

本文实例为大家分享了JS实现图片自动播放效果的具体代码，供大家参考，具体内容如下

JS实现图片自动播放

1、先看效果图

2、完整代码

<!DOCTYPE html>
<html>
<head>
 <style>
  /* 定义样式 */
  body{
   margin: 5% 30%;
  }
  .bannerimage{width:700px;height:400px;float:left;background-size:100% 100%;color:#fff;box-shadow: 0 0 12px 2px  #142732;}
  .box{width:700px;height:400px;margin:0px auto;overflow: hidden;}
        /* box的宽度为img的个数乘以bannerimage的宽度*/
  .img-g{width:4900px;height:400px;position:relative;}
  .img-g img{float:left;width:700px;height:400px;}
  .button-g{position:relative;top:-35px;text-align:center;}
  .button-g span{display:inline-block;position:relative;z-index:10;width:10px;height:10px;margin:0 5px;border-radius:100%;cursor: pointer;}
 </style>

 <script type="text/javascript" src="js/jquery.js"></script>

 <script type="text/javascript">
 $(function () {
     // 实现自动播放
  var p=document.getElementsByClassName('img-g')[0];
  var button=document.querySelectorAll('.button-g span')
  // 设置3秒播放
  window.timer=setInterval(move,3000);
  // 轮播设置
  function move(){
      // bannerimage的宽度乘以图片的个数
   if(parseInt(p.style.left)>-4200){
       // 和bannerimage的宽度保持一致即可：700
    p.style.left=parseInt(p.style.left)-700+'px'
    p.style.transition='left 1s';
    tog(-Math.round(parseInt(p.style.left)/700))
    if(parseInt(p.style.left)<=-4200){
     setTimeout(function(){
      tog(0)
      p.style.left='0px'
      p.style.transition='left 0s';
     },1000)
    }
   }else{
    p.style.left='0px'
    p.style.transition='left 0s';
   }
  }

  // 设置小圆点
  for(var i=0;i<button.length;i++){
   // button[i].style.backgroundColor='#eee';
   button[i].onclick=function(){
    p.style.left=-700*this.getAttribute('data-index')+'px'
    tog(this.getAttribute('data-index'))
    clearInterval(window.timer)
    window.timer=setInterval(move,3000);
   }
  }
  // 设置小圆点
  function tog(index){
   if(index>5){
    tog(0);
    return;
   }
   for(var i=0;i<button.length;i++){
    button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
   }
   button[index].style.backgroundColor='rgb(255, 255, 255)';
  }

  // 鼠标移上事件
  p.onmouseover=function(){
   clearInterval(window.timer)
  }
        // 鼠标移除事件
  p.onmouseout=function(){
   window.timer=setInterval(move,3000);
  }
 });
 </script>
</head>
<body>
 <div class="bannerimage">
  <div class='box'>
   <div class='img-g' style='left:0px;transition:left 1s;'>
    <img src="images/img_1.jpg" alt="1">
    <img src="/images/img_2.jpg" alt="2">
    <img src="/images/img_3.jpg" alt="3">
    <img src="/images/img_4.jpg" alt="4">
    <img src="/images/img_5.jpg" alt="5">
    <img src="/images/img_6.jpg" alt="6">
    <img src="/images/img_1.jpg" alt="1">
   </div>
   <div class='button-g'>
    <span data-index='0' style="background-color: #eeeeee"></span>
    <span data-index='1' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    <span data-index='2' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    <span data-index='3' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    <span data-index='4' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    <span data-index='5' style="background-color: rgba(255, 255, 255, 0.5)"></span>
   </div>
  </div>
 </div>
</body>
</html>

3、关键代码讲解

3.1、css设置注意事项：img-g的宽度为：img的个数乘以bannerimage的宽度，如下：

.img-g{width:4900px;height:400px;position:relative;}

3.2、轮播常量及事件设置

常量1设置为：bannerimage的宽度乘以图片的个数，如下：

if(parseInt(p.style.left)>-4200){}

常量2设置为：bannerimage的宽度保持一致即可（700），如下：

p.style.left=parseInt(p.style.left)-700+'px'

小圆点显示设置：

// 设置小圆点
for(var i=0;i<button.length;i++){
 button[i].style.backgroundColor='#eee';
 button[i].onclick=function(){
     p.style.left=-700*this.getAttribute('data-index')+'px'
     tog(this.getAttribute('data-index'))
     clearInterval(window.timer)
     window.timer=setInterval(move,3000);
 }
}
// 设置小圆点点击事件
function tog(index){
    // 圆点的个数
 if(index>5){
  tog(0);
  return;
 }
 for(var i=0;i<button.length;i++){
        // 默认圆点的显示颜色
  button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
 }
    // 当前圆点的显示颜色
 button[index].style.backgroundColor='rgb(255, 255, 255)';
}

鼠标事件：鼠标移上停止播放，移除3秒后播放。

// 鼠标移上事件
p.onmouseover=function(){
 clearInterval(window.timer)
}
// 鼠标移除事件
p.onmouseout=function(){
 window.timer=setInterval(move,3000);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 比较炫的图片播放器 js 焦点效果代码

    图片播放器_图片轮换_焦点效果 #focus_m{position:relative; width:420px; height:384px; background:#133775} .f_img_roll{width:350px; height:300px; position:relative;} .f_img_roll img{position:absolute; left:0; top:0; width:350px; height:300px;} .f_img_tree{position:a

  • js 新浪的一个图片播放图片轮换效果代码

    js 新浪的一个图片播放图片轮换效果代码

    核心代码 复制代码 代码如下: function slide(src,link,text,target,attr,desc) {   this.desc = desc   this.src = src;   this.link = link;   this.text = text;   this.target = target;   this.attr = attr;   if (document.images) {     this.image = new Image();   }   thi

  • js实现幻灯片播放图片示例代码

    1,在页面添加下面的元素.展示出置出图片文件列表文件. 复制代码 代码如下: <select id="img_date" style="width: 100%; margin-top: 10px; height: 50%;" size="20"> <option value="图片的url">图片名字</option> </select> 2,播放文件列表的方法.主要是遍历文件列

  • JS特效实现图片自动播放并可控的效果

    不多说了,实现方法请看下面代码. 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>JS代码实现图片自动播放并可控的效果</title><base target="_blank" /> <link re

  • javascript+html5实现仿flash滚动播放图片的方法

    本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="move.js" type="text/jav

  • javascript实现图片循环渐显播放的方法

    本文实例讲述了javascript实现图片循环渐显播放的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>图片的循环渐显播放效果代码</title> <head> <!--1.将下面的代码插入到HEML的<head></head>之间: --> <script language=javaScript> <!--// sandra0 = new Image()

  • javascript 控制图片播放代码

    javascript 控制图片播放代码

    无标题文档 .photo {width:896px;height:280px;border-top:0;border-right:2px solid #9f9fa1;border-bottom:1px solid #9f9fa1;border-left:2px solid #9f9fa1;font-size:12px} .photo .left {width:310px;height:222px;margin:0 5px} .photo .left img {width:310px;height

  • JS实现的多张图片轮流播放幻灯片效果

    本文实例讲述了JS实现的多张图片轮流播放幻灯片效果.分享给大家供大家参考,具体如下: <body style="width: 715px; height: 95px;"> <script language="javascript" type="text/javascript"> <!-- /************************************************** 名称: 图片轮播类 创建时

  • javascript控制图片播放的实现代码

    javascript控制图片播放的实现代码

    一般实现用鼠标控制图片的滚动效果都比较麻烦,大段大段的代码让新手头疼无从下手,下面我来写个简单的javascript控制图片滚动的效果.代码简洁明了,兼容ie.firefox和google浏览器. 分享代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • js手动播放图片实现图片轮播效果

    本文实例为大家分享了js图片轮播具体实现代码,供大家参考,具体内容如下 一.html代码部分(et.thtml): <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link type="text/css" rel="stylesheet"

随机推荐