<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>slide.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{font-size:12px;}
.scontainer{width:490px;height:170px;float:left;overflow: hidden;}
.scontainer .container{width:100%;height:100%;float:left;position: relative;}
.scontainer .container .pic{float:left;list-style: none;height:850px;width:100%;margin:0 0;padding:0 0;position: absolute;}
.scontainer .container .pic li{float:left;height:170px;width:100%;}
.scontainer .container .sclick{position: absolute;list-style: none;bottom: 5px;right: 5px;margin:0 0;padding:0 0;}
.scontainer .container .sclick li{float:left;width:20px;height:20px;line-height: 20px;text-align: center;background: #fff;margin: 0 2px 0 0;opacity:0.7;color: #DE7D4B;font-size:13px;cursor: pointer;}
.scontainer .container .sclick li.hover{background: #FF6600;color: #fff;}
</style>
<script type="text/javascript">
window.onload=function(){
var btnsUl=getByClass("sclick")[0],
btns=btnsUl.getElementsByTagName("li"),
imgsUl=getByClass("pic")[0];
var sp=new SwitchPic(btns,imgsUl,170,1000);
}
var SwitchPic=function(buttons,picContainer,imgHeight,intvalTime,hoverClass){
this.buttons=buttons;
this.picContainer=picContainer;
this.intvalTime=intvalTime || 3000;
this.hoverClass=hoverClass || "hover";
this.imgHeight=imgHeight;
this.curIndex=-1;
this.start();
this.invoke(0);
for(var i=0;i<this.buttons.length;i++){
var btn=this.buttons[i];
var _this=this;
(function(i){
btn.onmouseover=function(){
_this.stop();
_this.invoke(i);
}
btn.onmouseout=function(){
_this.start();
}
})(i)
}
}
//方法扩展
SwitchPic.prototype={
start:function(){//开始切换
var _this=this;
this.stop();
this.intval=setInterval(function(){
var nextIndex=_this.next();
_this.invoke(nextIndex);
},this.intvalTime);
},
next:function(){
var nextIndex=(this.curIndex+1)<this.buttons.length ? (this.curIndex+1) : 0 ;
return nextIndex;
},
stop:function(){
clearInterval(this.intval);
},
invoke:function(itemIndex){
this.picContainer.style.top=(-this.imgHeight*itemIndex)+"px";
var btn=this.buttons[itemIndex];
this.removeClass();
btn.className=this.hoverClass;
this.curIndex=itemIndex;
},
removeClass:function(){
for(var i=0;i<this.buttons.length;i++){
this.buttons[i].className="";
}
}
};
function getByClass(className){
if(document.getElementByClassName){
return document.getElementByClassName(className);
}
var nodes=document.getElementsByTagName("*");
var arr=[];
for(var i=0;i<nodes.length;i++){
var curNode=nodes[i];
if(hasClass(className,curNode)){
arr.push(curNode);
}
}
return arr;
}
function hasClass(className,obj){
var names=obj.className.split(/\s+/);
for(var i=0;i<names.length;i++){
if(names[i]==className){
return true;
}
}
return false;
}
</script>
</head>
<body>
<div class="scontainer">
<div class="container">
<ul class="pic">
<li><a href="###"><img src="http://img01.taobaocdn.com/tps/i1/T1k.WIXltgXXXXXXXX-490-170.png"/></a></li>
<li><a href="###"><img src="http://i.mmcdn.cn/simba/img/T1QqCGXcJxXXXXXXXX.jpg?noq=y"/></a></li>
<li><a href="###"><img src="http://i.mmcdn.cn/simba/img/T1OBiIXcFlXXXXXXXX.jpg?noq=y"/></a></li>
<li><a href="###"><img src="http://img.alimama.cn/adbrand/adboard/picture/2011-03-01/119159330001110301225330.jpg"/></a></li>
<li><a href="###"><img src="http://img03.taobaocdn.com/tps/i3/T1wbOIXXViXXXXXXXX-490-170.png"/></a></li>
</ul>
<ul class="sclick">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
</ul>
</div>
</div>
</body>
</html>
相关推荐
淘宝首页的图片切换效果是网页动态设计中常见的一种技术，主要应用于电商网站的商品展示，能够提升用户体验，增加网站的互动性和吸引力。这个技术涉及到的知识点包括JavaScript、CSS3以及HTML，接下来我们将深入探讨...
在"仿淘宝商城图片切换"中，CSS将用于设置图片的初始样式，如大小、位置、边框等，并且通过CSS3的过渡（transition）和动画（animation）属性实现图片切换时的平滑过渡效果。例如，可以定义一个隐藏类，使得非当前...
【标题】"仿淘宝图片切换" 是一个网页开发项目，主要目标是实现类似淘宝网站上的商品图片展示功能。这个功能通常包括多张图片的切换、缩放、预览等交互效果，为用户提供更加直观的商品视图。对于初学者来说，这是一...
淘宝图片切换特效是一种常见的网页设计技术，主要用于提升用户体验，特别是在电商网站中，它能吸引用户的注意力，使商品展示更加生动和吸引人。这种特效通常在商品详情页中使用，允许用户浏览多张商品图片，而无需...
【仿淘宝首页切换图片】是一种常见的网页设计技术，主要用于提升用户体验，增强网站视觉吸引力。这种技术常见于电商网站...解压并研究这些文件，可以进一步学习和理解如何使用jQuery来实现类似淘宝首页的图片切换效果。
"仿淘宝图片切换效果"是一种常见的网页设计元素，它旨在为用户提供一个流畅、美观且交互性强的图片展示方式，增强网站的吸引力。淘宝作为中国最大的电商平台之一，其首页的轮播图效果已经成为一种设计典范，被许多...
本教程将详细讲解如何实现"淘宝图片切换特效"，它是一种常见的商品展示技术，适用于电脑及手机wap端，能够提升用户的浏览体验。 1. **悬停放大效果**： 这个特效的核心是当用户鼠标悬停在底部的小图上时，主图会...
在Android开发领域，创建一个高仿手机淘宝的商品展示与图片切换功能是一项常见的需求。这个功能主要涉及以下几个核心知识点： 1. **布局设计**：在Android中，我们可以使用XML来定义界面布局。对于商品展示，通常会...
html5 CSS3 仿京东淘宝轮播图片切换特效代码，jquery修正了图片地址，上次其实只是没有把jquery打包在里面，不过有些新手摸不着头绪了，反复说代码有误，这次不会了，请看效果图。图片 两侧显示箭头，下边显示两加点...
淘宝楼层图片切换效果是一种常见的网页交互设计，主要应用于电商网站，如淘宝，以提升用户体验，增强商品展示的吸引力。这种效果通常使用JavaScript库，如jQuery，来实现动态的图片展示和切换，使得用户在浏览商品时...
在JavaScript（JS）中实现淘宝宝贝图片切换放大效果是一项常见的前端技术挑战，它涉及到网页动态交互、图片处理和用户体验优化等多个方面。以下将详细介绍如何利用JS实现这一功能，并结合相关知识点进行深入探讨。 ...
函数内部使用`document.getElementById('sl').src = value`更新主图片展示区的源图片路径，实现图片切换。 - **事件绑定**： - 在预览图上通过`onclick`属性绑定`picture`函数，使得点击预览图时可以触发图片切换...
淘宝网首页的焦点图片切换效果是网页设计中一种常见的动态展示技术，主要用于吸引用户注意力并提供丰富的视觉体验。这种效果在电商网站中尤为常见，因为它们能够有效地展示商品或促销活动。接下来，我们将深入探讨...
在这个特定的压缩包中，我们关注的是一个焦点图片切换的功能，而且它是完全自定义的。这意味着开发者可以灵活地调整和定制这个功能，以满足自己应用的独特需求。 焦点图片切换是一种常见的UI设计元素，常用于商品...
本资源名为"仿淘宝网图片切换特效打包"，显然它提供了实现类似淘宝网图片展示功能的代码，这对于网页设计师和前端开发者来说是一份非常实用的学习材料。淘宝网作为中国最大的电子商务平台，其图片切换效果具有高度的...
标题“Flash淘宝折页手风琴图片切换支持自动轮播切换的手风琴”涉及到的是使用Flash技术制作的一款特定的图片展示组件，这个组件在淘宝等电商平台上常见，用于提升商品展示的吸引力。 首先，我们要理解“手风琴”...
在"仿淘宝图片切换代码"这个压缩包中，应该包含了实现这一特效的相关HTML、CSS和JavaScript文件。开发者可以通过查看源代码学习如何组织结构、编写样式和脚本，进而理解并掌握这种图片切换特效的实现方法。这对于...
1. 图片切换：在`image_slider_ad.html`和`image_slider.html`中，你可以找到实现图片轮播的代码。这些效果通常用于网站广告或展示产品图片。jQuery的`.slideUp()`和`.slideDown()`方法用于控制图片的显示和隐藏，`....
JavaScript图片切换展示效果是网页设计中常见的功能，用于在页面上动态展示多张图片，提升用户体验。这种效果可以通过JavaScript编程语言实现，结合HTML和CSS来完成。本项目中包含了一个简单的图片轮播示例，我们...
淘宝弹出代码，直接放入淘宝自定义模块就可以看到效果。自己研究代码可以变成图片切换效果 。图片切换，下拉菜单等 都是这个代码变换而来 。