凡客放大镜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>凡客</title>
<script type="text/javascript">
window.onload = function(){
left = document.getElementById('left');
cover = document.getElementById('cover');
container = document.getElementById('container');
right = document.getElementById('right');
img = document.getElementById('rpic')
cover.onmousemove = function(e){
// 获得事件对象
var ev = window.event||e;
var mount_left = ev.offsetX ||ev.layerX;
var mount_top = ev.offsetY||ev.layerY;
box_left = mount_left-100;
box_top = mount_top-110;
// if(box_left>200){
// box_left=200;
// }
box_left=box_left>200?200:Math.max(0,box_left);
console.log(box_left)
if (box_top>220) {
box_top=220;
}
// if (box_left<0) {
// box_left=0;
// }
if (box_top<0) {
box_top=0;
}
container.style.left=box_left+'px';
container.style.top = box_top+'px';
img.style.left=(box_left*-2)+'px';
img.style.top=(box_top*-2)+'px';
cover.onmouseover = function(){
container.style.display = 'block';
right.style.display='block';
}
cover.onmouseout = function(){
container.style.display = 'none';
right.style.display='none';
}
}
}
</script>
<style type="text/css">
#left{
400px;
height: 440px;
border: 2px solid blue;
background: url(400.jpg) no-repeat;
position: relative;
margin: 20px;
float: left;
}
#cover{
400px;
height: 440px;
border: 2px solid yellow;
position: relative;
margin: 20px;
opacity: 0;
}
#container{
200px;
height: 220px;
opacity: 0.5;
background: green;
border: 2px solid black;
position: absolute;
top: 0;
left: 0;
cursor: crosshair;
display: none;
}
#right{
400px;
height: 440px;
border: 2px solid orange;
overflow: hidden;
float: left;
position: relative;
display: none;
}
#rpic{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="left">
<div id="container">
</div>
<div id="cover"></div>
</div>
<div id="right">
<img src="800.jpg" id="rpic">
</div>
</body>
</html>
凡客首页轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>凡客</title>
<script type="text/javascript">
//用jquery实现
// $(function(){
// var c = 0;
// function run(){
// c++;
// console.log(c)
// c=c==5?0:c;
// $('#container img').eq(c).stop().fadeIn().siblings('img').stop().fadeOut();
// $('#container ul li').eq(c).css({'background':'red'}).siblings('li').css({'background':'black'});
// }
// var timer =setInterval(run ,1000);
// $('#container ul li').mouseenter(function(){
// clearInterval(timer)
// var counter = $(this) //指向ul li对象
// tt = setTimeout(function(){
// c =counter.index();
// $('#container img').eq(c).stop().fadeIn().siblings('img').stop().fadeOut();
// $('#container ul li').eq(c).css({'background':'red'}).siblings('li').css({'background':'black'});
// },200)
// })
// $('#container ul li').mouseleave(function(){
// clearTimeout(tt);
// timer =setInterval(run ,1000);
// })
// })
window.onload =function(){
var circile = document.getElementById('circile');
var container = document.getElementById('container')
var lis = container.getElementsByTagName('img');
var timer;
// var imgIndex=0;
var childs = circile.children;
container.onmouseout=function(){
if (timer) {
clearInterval(timer);
}
timer=setInterval(test,1000);
}
container.onmouseover=function(){
console.log('mouseover');
clearInterval(timer);
}
for (var i = 0; i < childs.length; i++) {
childs[i].num = i;
childs[i].onclick=function(){
clearInterval(timer);
common(this.num);
}
childs[i].onmouseover=function(){
clearInterval(timer);
x=this.num;
common(x);
}
}
function common(num){
for (var j = 0; j<lis.length; j++) {
lis[j].style.display='none';
childs[j].style.background='green';
}
lis[num].style.display='block';
childs[num].style.background='red';
}
var x = 0;
function test(){
x++;
if (x==lis.length) {
x=0;
}
common(x);
}
timer = setInterval(test,1000)
}
</script>
<style type="text/css">
#container{
1200px;
height: 535px;
border: 2px solid blue;
margin: 20px auto;
position: relative;
}
#container img{
position: absolute;
top: 0;
left: 0;
display: none;
}
#container ul{
position: absolute;
left: 548px;
bottom: 23px;
list-style: none;
}
#container ul li{
12px;
height: 12px;
border-radius: 50%;
background: green;
margin-right: 8px;
float: left;
}
</style>
</head>
<body>
<div id="container">
<img src="images/1.jpg" style="display: block;">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
<ul id="circile">
<li style="background: red"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>