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判断是否为360浏览器的实现代码
Jan 15 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
详解angular中的作用域及继承
May 31 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
小程序外卖订单界面的示例代码
Dec 30 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 第二节 数据类型之字符串类型
2012/04/28 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
详解Python中的__init__和__new__
2014/03/12 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
Python中的自省(反射)详解
2015/06/02 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
21行Python代码实现拼写检查器
2016/01/25 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
python检测IP地址变化并触发事件
2018/12/26 Python
python获取地震信息 微信实时推送
2019/06/18 Python
Python内置加密模块用法解析
2019/11/25 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
优秀党支部事迹材料
2014/01/14 职场文书
八一建军节感言
2014/02/28 职场文书
六查六看六改心得体会
2014/10/14 职场文书
2016春节慰问信范文
2015/03/25 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
Python实现8种常用抽样方法
2021/06/27 Python
Python pyecharts绘制条形图详解
2022/04/02 Python