js制作网站首页图片轮播特效代码


Posted in Javascript onAugust 30, 2016

本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>图片轮播</title>
 <style>
  .warp{
   width: 600px;
   height: 750px;
   position: relative;
   margin:30px auto 0;
   overflow: hidden;
  }
  #box{
   width: 600px;
   height: 750px;
   position: absolute;
   top: 0px;
   left: 0px;
   overflow: hidden;
   /*overflow-x:auto;*/
  }
  #box #con{
   width: 6000px;
   height: 750px;
   overflow: hidden;
  }
  #con img{
   float: left;
   width: 600px;
   height: 750px;
  }
  #btnL{
   position: absolute;
   left: 0px;
   top: 366px;
   width: 36px;
   height: 36px;
   background: url(images/btnL.png) 0 0 no-repeat;
   cursor: pointer;
  }
  #btnR{
   position: absolute;
   right: 0px;
   top: 366px;
   width: 36px;
   height: 36px;
   background: url(images/btnR.png) 0 0 no-repeat;
   cursor: pointer;
  }
  #num{
   position: absolute;
   bottom: 10px;
   left: 148px;
   overflow: hidden;
   list-style: none;
  }
  #num li{
   float: left;
   margin:0 5px;
   font-size: 16px;
   line-height: 25px;
   height: 25px;
   width: 25px;
   background: #ccc;
   text-align: center;
   cursor: pointer;
  }
  #num li.select{
   background-color: green;
   color: white;
  }
 </style>
</head>
<body>
 <div class="warp">
  <div id="box">
   <div id="con">
    <img src="images/meinv1.jpg" alt="">
    <img src="images/meinv2.jpg" alt="">
    <img src="images/meinv3.jpg" alt="">
    <img src="images/meinv4.jpg" alt="">
    <img src="images/meinv5.jpg" alt="">
    <img src="images/meinv6.jpg" alt="">
   </div>
  </div>
  <div id="btnL"></div>
  <div id="btnR"></div>
  <ul id="num">
   <li class="select">1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
  </ul>
 </div>
 <script>
  var box=document.getElementById('box');
  var con=document.getElementById('con');
  var imgs=con.getElementsByTagName('img');
  var btnL=document.getElementById('btnL');
  var btnR=document.getElementById('btnR');
  var num=document.getElementById('num');
  var lis=num.getElementsByTagName('li');
  var timer1=null,timer2=null;
  var imgw=imgs[0].clientWidth;
  var x=0;
  function imgScroll(){//图片切换
   var start=box.scrollLeft;
   var end=imgw*x;
   var change=end-start;
   var minstep=0;
   var maxstep=30;
   var stepLength=change/maxstep;
    clearInterval(timer2);
    timer2=setInterval(function(){
     minstep++;
     // console.log(minstep);
     if (minstep>=maxstep) {
      clearInterval(timer2);
     }
     start+=stepLength;
     box.scrollLeft=start;
    },20) 
    for (var i = 0; i < lis.length; i++) {
     lis[i].className='none';
    }
    lis[x].className='select';
  }
  function move(){//默认向左每隔3s滚动
   clearInterval(timer1);
   timer1=setInterval(function(){
    x++;
    if (x>=imgs.length) {
     x=0;
    }
    imgScroll();
    for (var i = 0; i < lis.length; i++) {
     lis[i].className='none';
     lis[x].className='select';
    }
    },3000);
   }
  move();//启动默认滚动函数;
  btnR.onclick=function(){
   clearInterval(timer1);
   x++;
   if (x>=imgs.length) {
    x=0;
   }
   imgScroll();
   move();
  }
  btnL.onclick=function(){
   clearInterval(timer1);
   x--;
   if (x<0) {
    x=imgs.length-1;
   }
   imgScroll();
   move();
  }
  for (var i = 0; i < lis.length; i++) {
   lis[i].index=i;
   lis[i].onclick=function(){
    x=this.index;
    imgScroll();
    move();
   }
  }

 </script>
</body>
</html>

具体效果我是仿照hao123导航页面图片轮播的效果,大家可以去那个网站参考

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 Javascript
js实现简单的碰壁反弹效果
Aug 30 #Javascript
js控住DOM实现发布微博效果
Aug 30 #Javascript
AngularJS动态生成div的ID源码解析
Aug 29 #Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 #Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 #Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 #Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 #Javascript
You might like
PHP If Else(elsefi) 语句
2013/04/07 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
js下将字符串当函数执行的方法
2011/07/13 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
React Router基础使用
2017/01/17 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python操作gmail实例
2015/01/14 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
pyenv命令管理多个Python版本
2017/03/26 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
Python定时器线程池原理详解
2020/02/26 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
小孩百日宴答谢词
2014/01/15 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
保护校园环境倡议书
2015/04/28 职场文书
学校通报表扬范文
2015/05/04 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python