仿淘宝首页JS图片切换效果

zoukankan html css js c++ java

仿淘宝首页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/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript 图片切换展示效果</title>
</head>
<body>
<style type="text/css">
.container, .container *{margin:0; padding:0;} .container{width:408px; height:168px; overflow:hidden;position:relative;}.slider{position:absolute;}
.slider li{ list-style:none;display:inline;}
.slider img{ width:408px; height:168px; display:block;}.slider2{width:2000px;}
.slider2 li{float:left;}.num{ position:absolute; right:5px; bottom:5px;}
.num li{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
.num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}
</style>
<div class="container" id="idTransformView">
<ul class="slider" id="idSlider">
    <li><img src="http://www.bangso.com/images/newhome/a/h.jpg"/></li>
    <li><img src="http://www.bangso.com/images/newhome/a/food.jpg"/></li>
    <li><img src="http://www.bangso.com/images/newhome/a/2.jpg"/></li>
</ul>
<ul class="num" id="idNum">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</div>
<script type="text/javascript">
          var $ = function(id) {
              return "string" == typeof id ? document.getElementById(id) : id;
          };
          var Class = {
              create: function() {
                  return function() {
                      this.initialize.apply(this, arguments);
                  }
              }
          };
          Object.extend = function(destination, source) {
              for (var property in source) {
                  destination[property] = source[property];
              }
              return destination;
          };
          var TransformView = Class.create();
          TransformView.prototype = {
              //容器对象,滑动对象,切换参数,切换数量
              initialize: function(container, slider, parameter, count, options) {
                  if (parameter <= 0 || count <= 0) return;
                  var oContainer = $(container), oSlider = $(slider), oThis = this; this.Index = 0; //当前索引

                  this._timer = null; //定时器
                  this._slider = oSlider; //滑动对象
                  this._parameter = parameter; //切换参数
                  this._count = count || 0; //切换数量
                  this._target = 0; //目标参数

                  this.SetOptions(options);

                  this.Up = !!this.options.Up;
                  this.Step = Math.abs(this.options.Step);
                  this.Time = Math.abs(this.options.Time);
                  this.Auto = !!this.options.Auto;
                  this.Pause = Math.abs(this.options.Pause);
                  this.onStart = this.options.onStart;
                  this.onFinish = this.options.onFinish;

                  oContainer.style.overflow = "hidden";
                  oContainer.style.position = "relative";

                  oSlider.style.position = "absolute";
                  oSlider.style.top = oSlider.style.left = 0;
              },
              //设置默认属性
              SetOptions: function(options) {
                  this.options = {//默认值
                      Up: true, //是否向上(否则向左)
                      Step: 20, //滑动变化率
                      Time: 10, //滑动延时
                      Auto: true, //是否自动转换
                      Pause: 2000, //停顿时间(Auto为true时有效)
                      onStart: function() { }, //开始转换时执行
                      onFinish: function() { } //完成转换时执行
                  };
                  Object.extend(this.options, options || {});
              },
              //开始切换设置
              Start: function() {
                  if (this.Index < 0) {
                      this.Index = this._count - 1;
                  } else if (this.Index >= this._count) { this.Index = 0; }

                  this._target = -1 * this._parameter * this.Index;
                  this.onStart();
                  this.Move();
              },
              //移动
              Move: function() {
                  clearTimeout(this._timer);
                  var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow);

                  if (iStep != 0) {
                      this._slider.style[style] = (iNow + iStep) + "px";
                      this._timer = setTimeout(function() { oThis.Move(); }, this.Time);
                  } else {
                      this._slider.style[style] = this._target + "px";
                      this.onFinish();
                      if (this.Auto) { this._timer = setTimeout(function() { oThis.Index++; oThis.Start(); }, this.Pause); }
                  }
              },
              //获取步长
              GetStep: function(iTarget, iNow) {
                  var iStep = (iTarget - iNow) / this.Step;
                  if (iStep == 0) return 0;
                  if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
                  return iStep;
              },
              //停止
              Stop: function(iTarget, iNow) {
                  clearTimeout(this._timer);
                  this._slider.style[this.Up ? "top" : "left"] = this._target + "px";
              }
          }; window.onload = function() {
              function Each(list, fun) {
                  for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
              };

              var objs = $("idNum").getElementsByTagName("li");

              var tv = new TransformView("idTransformView", "idSlider", 168, 3, {
                  onStart: function() { Each(objs, function(o, i) { o.className = tv.Index == i ? "on" : ""; }) } //按钮样式
              });

              tv.Start();

              Each(objs, function(o, i) {
                  o.onmouseover = function() {
                      o.className = "on";
                      tv.Auto = false;
                      tv.Index = i;
                      tv.Start();
                  }
                  o.onmouseout = function() {
                      o.className = "";
                      tv.Auto = true;
                      tv.Start();
                  }
              })

              Each(objs2, function(o, i) {
                  o.onmouseover = function() {
                      o.className = "on";
                      tv2.Auto = false;
                      tv2.Index = i;
                      tv2.Start();
                  }
                  o.onmouseout = function() {
                      o.className = "";
                      tv2.Auto = true;
                      tv2.Start();
                  }
              })

          }
</script>
</body>
</html>

查看全文

相关阅读:
Memcached学习(一)
了解下SoftReference
Java Thread UncaughtExceptionHandler
csdn 不登录浏览全文　chrome 浏览器
 postgresql 主从　patroni
熔断，限流，降级
 CentOS7.4 源码安装MySQL8.0
CentOS BIND9安装及配置
 Linux安全之SYN攻击原理及其应对措施
 fping常用参数介绍

原文地址：https://www.cnblogs.com/yeagen/p/1867486.html