JS+HTML+CSS实现轮播效果

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

1.lunbo.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>大轮播</title>
  <link rel="stylesheet" type="text/css" href="CSS/lunbo.css"/>
  <script src="JS/lunbo.js" type="text/javascript"></script>
</head> 

<body>
<div id="container">
  <div id="list" style="left: -1350px;">
    <img src="image/banner_3.jpg"/>
    <img src="image/banner_1.jpg"/>
    <img src="image/banner_2.jpg"/>
    <img src="image/banner_3.jpg">
    <img src="image/banner_1.jpg"/></div>
  <div id="buttons">
    <span index="1"></span>
    <span index="2"></span>
    <span index="3"></span>
  </div>
  <a href="javascript:;" id="prev" class="arrow" style="font-size:100px; text-align:center;"><</a>
  <a href="javascript:;" id="next" class="arrow" style="font-size:100px; text-align:center;">></a></div>
</body> 

</html>

2.CSS/lunbo.css代码：

body {
  margin: 0px;
  padding: 0px;
  width: 1350px;
  height: 618px;
} 

a {
  text-decoration: none;
} 

#container {
  width: 1350px;
  height: 618px;
  overflow: hidden;
  position: relative;
  border-top: 1px solid #ac6a0a;
} 

#list {
  width: 6750px;
  height: 618px;
  position: absolute;
  z-index: 1;
} 

#list img {
  float: left;
  width: 1350px;
  height: 618px;
} 

#buttons {
  position: absolute;
  height: 20px;
  width: 60px;
  z-index: 2;
  bottom: 20px;
  left: 50%;
} 

#buttons span {
  cursor: pointer;
  float: left;
  border: 1px solid #ad6a0a;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  margin-right: 5px;
} 

#buttons .on {
  background: orangered;
} 

.arrow {
  cursor: pointer;
  display: none;
  line-height: 100px;
  text-align: center;
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 2;
  top: 180px;
  background-color: RGBA(0, 0, 0, 0);
  color: #fff;
} 

.arrow:hover {
  background-color: RGBA(0, 0, 0, 0);
} 

#container:hover .arrow {
  display: block;
} 

#prev {
  left: 10px;
  color: #ffffff;
} 

#next {
  right: 10px;
  color: #ffffff;
}

3.JS/lunbo.js代码：

window.onload = function () {
  var container = document.getElementById('container');
  var list = document.getElementById('list');
  var buttons = document.getElementById('buttons').getElementsByTagName('span');
  var prev = document.getElementById('prev');
  var next = document.getElementById('next');
  var index = 1;
  var len = 3;
  var animated = false;
  var interval = 3000;
  var timer;
  var size = 1350; 

  function animate(offset) {
    if (offset == 0) {
      return;
    }
    animated = true;
    var time = 300;
    var inteval = 10;
    var speed = offset / (time / inteval);
    console.log("speed:" + speed);
    var left = parseInt(list.style.left) + offset; 

    var go = function () {
      if ((speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
        list.style.left = parseInt(list.style.left) + speed + 'px';
        console.log(list.style.left);
        setTimeout(go, inteval);
      } else {
        list.style.left = left + 'px';
        if (left > -200) {
          list.style.left = -size * len + 'px';
        }
        if (left < ( -size * len)) {
          list.style.left = '-' + size + 'px';
        }
        animated = false;
        console.log("left:" + list.style.left);
      }
    }
    go();
  } 

  function showButton() {
    for (var i = 0; i < buttons.length; i++) {
      if (buttons[i].className == 'on') {
        buttons[i].className = '';
        break;
      }
    }
    buttons[index - 1].className = 'on';
  } 

  function play() {
    timer = setTimeout(function () {
        next.onclick();
        play();
      },
      interval);
  } 

  function stop() {
    clearTimeout(timer);
  } 

  next.onclick = function () {
    if (animated) {
      return;
    }
    if (index == len) {
      index = 1;
    } else {
      index += 1;
    }
    animate(-size);
    showButton();
  }
  prev.onclick = function () {
    if (animated) {
      return;
    }
    if (index == 1) {
      index = len;
    } else {
      index -= 1;
    }
    animate(size);
    showButton();
  }
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function () {
      if (animated) {
        return;
      }
      if (this.className == 'on') {
        return;
      }
      var myIndex = parseInt(this.getAttribute('index'));
      var offset = -size * (myIndex - index); 

      animate(offset);
      index = myIndex;
      showButton();
    }
  }
  container.onmouseover = stop;
  container.onmouseout = play;
  play();
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 原生js和jquery实现图片轮播特效

    原生js和jquery实现图片轮播特效

    (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

  • 使用html+js+css 实现页面轮播图效果(实例讲解)

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=

  • js图片轮播效果实现代码

    js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示:   1.遍历所有放数字索引的li,将每个li上的类去掉.   2.根据传递过来的index值找到对应的li给

  • js图片自动轮播代码分享(js图片轮播)

    1.利用图片width显示位置来播放图片,技术:.offsetWidth .aBtn[i].index = i .setInterval() .oUl[0].style.left =  .onclick()2.利用数组放入图片经行轮播,技术:setInterval().没有onclick() 图片轮播12js.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http:

  • JS实现简易图片轮播效果的方法

    JS实现简易图片轮播效果的方法

    本文实例讲述了JS实现简易图片轮播效果的方法.分享给大家供大家参考.具体如下: 这里使用JS制作简易图片轮播效果: 制作比较粗糙,使用的图片是width:660ppx,height:550px; 效果图如下: 代码部分如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; char

  • 最简单的JavaScript图片轮播代码(两种方法)

    最简单的JavaScript图片轮播代码(两种方法)

    通过改变每个图片的opacity属性: 素材图片: 代码一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: ; padding: ; } ul { list-style-type: non

  • 原生js和css实现图片轮播效果

    本文实例为大家分享了javascript图片轮播效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>图片轮播</title> <style> #box { width:506px; height:306px; margin: 20px auto; b

  • js 图片轮播(5张图片)

    演示地址:http://img.jb51.net/online/picPlayer/picplay.htm 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

  • 基于cssSlidy.js插件实现响应式手机图片轮播效果

    基于cssSlidy.js插件实现响应式手机图片轮播效果

    cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"> <figure id="slidy"> <a href='#' target='_blank'><img src="img/2.jpg" alt="jQuery.nicescroll美化滚动条" data-cap

  • 带左右箭头图片轮播的JS代码

    带左右箭头图片轮播的JS代码

    轮播图实现效果见下图,图片能自己轮播,点击左右按钮进行翻页轮播,鼠标悬停图片或者标题上,停止轮播: 效果图为: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/19

随机推荐