首页 > 网页代码

图片轮播代码

网页代码 2021-11-21 10:04:18 0
  <!doctype html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>jQuery轮播图代码-jq22.com</title>
  <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <style>
  * {
  margin: 0;
  padding: 0;
  }
   
  ul, li {
  list-style: none;
  }
   
  img {
  border: none;
  }
   
  .clear {
  clear: both;
  zoom: 1;
  }
   
  .clear:after {
  content: '';
  height: 0;
  display: visibility;
  clear: both;
  overflow: hidden;
  }
   
  #box {
  width: 500px;
  height: 300px;
  margin: 10px auto;
  position: relative;
  }
   
  #img {
  height: 100%;
  }
   
  #img img {
  width: 100%;
  height: 100%;
  display: none;
  }
   
  #num li {
  float: left;
  background-color: gray;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  color: #fff;
  font-weight: bold;
  margin-left: 5px;
  cursor: pointer;
  }
   
  #num {
  position: absolute;
  bottom: 5px;
  right: 5px;
  }
   
  #num li:hover {
  background-color: #f80;
  }
   
  #num li.active {
  background-color: #f80;
  }</style>
  </head>
  <body>
  <div id="box">
  <div id="img">
  <img src="http://www.jq22.com/img/cs/500x500-1.png" alt=""> <img src="http://www.jq22.com/img/cs/500x500-2.png" alt="">
  <img src="http://www.jq22.com/img/cs/500x500-3.png" alt=""> <img src="http://www.jq22.com/img/cs/500x500-4.png" alt="">
  <img src="http://www.jq22.com/img/cs/500x500-5.png" alt=""> <img src="http://www.jq22.com/img/cs/500x500-6.png" alt="">
  </div>
  <ul id="num">
   
  </ul>
  </div>
   
  <script>
  $(function() {
  init();
  changImg(); //解决第一次第一张到第二张的时间间隔
  start();
   
  });
  //初始化
  function init() {
  var len = $('#img img').length; //获取图片有多少张
  var html = '';
  //拼html
  for (var i = 0; i < len; i++) {
  html += '<li onmouseover="changImg(' + i +
  ')" onmouseout="reStart(' + i + ')">' + (i + 1) + '</li>';
  }
  //写进ul
  $('#num').html(html);
  //显示第一张图片
  $('#img img').first().css('display', 'block');
  //第一个数字背景颜色
  $('#num li').eq(0).addClass('active');
  }
  //图片轮播
  function changImg(num) {
  if (num == 'auto') { //定时器自动调用
  num = index;
  } else { //鼠标放上的时候 清楚定时器
  clearInterval(timer);
  }
  //链式写法
  $('#img img').eq(num).css('display', 'block').siblings().css('display',
  'none');
  $('#num li').eq(num).addClass('active').siblings()
  .removeClass('active');
  index++;
  if (index == $('#img img').length) { //最后一张
  index = 0; //第一张
  }
  }
  var index = 0;
  var timer; //定时器
  //定时器 播放
  function start() {
  timer = setInterval('changImg("auto")', 1000);
  }
  //鼠标离开之后 又要自动播放
  function reStart(num) {
  index = num;
  changImg(num);
  start();
  }
  </script>
   
  </body>
  </html>
   
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:http://www.kumi6.com/cyzd/181.html

留言与评论(共有 条评论)

   
验证码: