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 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 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脚本
2006/11/26 PHP
global.php
2006/12/09 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
python安装以及IDE的配置教程
2015/04/29 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
python sorted方法和列表使用解析
2019/11/18 Python
python numpy实现rolling滚动案例
2020/06/08 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
高级Java程序员面试题
2016/06/23 面试题
数控机床专业自荐信
2014/05/19 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
标准版离职证明书
2014/09/12 职场文书
追悼会家属答谢词
2015/09/29 职场文书
学习计划是什么
2019/04/30 职场文书