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 相关文章推荐
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
js实现缓动动画
Nov 25 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的异常处理类Exception的使用及说明
2012/06/13 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
用Juery网页选项卡实现代码
2011/06/13 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
使用Python发现隐藏的wifi
2020/03/04 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
机关财务管理制度
2014/01/17 职场文书
初中生期末评语大全
2014/04/24 职场文书
高中生旷课检讨书
2014/10/08 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
创业计划书之寿司
2019/07/19 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL
浅谈MySQL user权限表
2021/06/18 MySQL
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js
virtualenv隔离Python环境的问题解析
2022/06/21 Python