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 相关文章推荐
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
去除html代码里面的script正则方法
May 19 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
vuex actions异步修改状态的实例详解
Nov 06 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 常用类汇总 推荐收藏
2010/05/13 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
php中执行系统命令的方法
2015/03/21 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
浅谈Python爬虫基本套路
2019/03/25 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
python statsmodel的使用
2020/12/21 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
个人职业及收入证明
2014/10/13 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
课程设计感想范文
2015/08/11 职场文书
初中生物教学反思
2016/02/20 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python