<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wangyi</title>
<style type="text/css">
*{margin:0;padding: 0;}
.w-slider{
width: 310px;
height: 265px;
margin:100px auto;
position: relative;
/*overflow: hidden;*/
}
.slider{
width: 310px;
height: 220px;
}
.slider-main{
width: 620px;
height: 220px;
}
.slider-main-img{
position: absolute;
left: 0;
top: 0;
}
.slider-ctrl{
width: 310px;
height: 65px;
text-align: center;
padding-top: 5px;
}
.slider-ctrl-con{
width: 24px;
height: 20px;
display: inline-block;
margin: 0 5px;
background: url(./images/icon.png) no-repeat -24px -782px;
cursor: pointer;
text-indent: -5em;
overflow: hidden;
}
.current {
background-position: -24px -762px;
}
.slider-ctrl-prev,
.slider-ctrl-next{
width: 30px;
height: 35px;
position: absolute;
top: 50%;
margin-top: -20px;
opacity: 0.8;
cursor: pointer;
background: url(images/icon.png) no-repeat 6px top;
}
.slider-ctrl-prev{
left: 0;
}
.slider-ctrl-next{
right: 0;
background-position: -6px -45px;
}
</style>
</head>
<body>
<div class="w-slider" id="w_slider">
<div class="slider" id="slider">
<div class="slider-main" id="slider_main">
<div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""></a></div>
</div>
</div>
<div class="slider-ctrl" id="slider_ctrl">
<span class="slider-ctrl-prev"></span>
<span class="slider-ctrl-next"></span>
<!-- <span class="slider-ctrl-con current"></span> img.length个span
<span class="slider-ctrl-con"></span> -->
</div>
</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
//上面的设置
var imgs=$("slider_main").children;//
var w_slider=$("w_slider");
var offsetWidth=w_slider.offsetWidth;//大盒子的宽度
for(var i=1;i<imgs.length;i++){
imgs[i].style.left=offsetWidth+"px";
}
//下面的设置
var slider_ctrl=$("slider_ctrl");
for(var i=0;i<imgs.length;i++){
var spanNew=document.createElement("span");
spanNew.setAttribute("class","slider-ctrl-con");
spanNew.innerHTML=i+1;
slider_ctrl.appendChild(spanNew);
}
var spans=slider_ctrl.children;//spans的长度
slider_ctrl.children[spans.length-imgs.length].className="slider-ctrl-con current";
console.log(slider_ctrl);
//right button
var right_button=slider_ctrl.children[1];
//left button
var left_button=slider_ctrl.children[0];
//bottom button
console.log(right_button);
var iNow=0;
// for(var i=0;i<spans.length;i++){
for(var k in spans){
right_button.οnclick=function(){
autoPlay();
changColor()
}
left_button.οnclick=function(){
animate(imgs[iNow],{left:offsetWidth});
iNow--;
if(iNow<0){
iNow=imgs.length-1;
}
imgs[iNow].style.left=-offsetWidth+"px";
animate(imgs[iNow],{left:0});
changColor()
}
for(var j=0;j<spans.length-2;j++){
spans[j+2].οnclick=function(){
var that=this.innerHTML-1;//当前点击索引值
// console.log(that);
if(that>iNow){//right button
animate(imgs[iNow],{left:-offsetWidth});
imgs[that].style.left=offsetWidth+"px";
animate(imgs[that],{left:0});
iNow++;
console.log(iNow);
}else if(that<iNow){//left button
animate(imgs[iNow],{left:offsetWidth});
imgs[that].style.left=-offsetWidth+"px";
animate(imgs[that],{left:0});
iNow--;
console.log(iNow);
}
iNow=that;//让iNow=that为了让下次点击时重新计算
//imgs[5]此时点击第二张后，下次点击时从当前图片imgs[2]开始移动，而不是从5开始移动
// console.log(iNow)
changColor();
}
}
//给下面的span添加颜色
function changColor(){
for(var i=2;i<spans.length;i++){
spans[i].className="slider-ctrl-con";
}
spans[iNow+2].className="slider-ctrl-con current";
}
}
//添加定时器
var timer=null;
timer=setInterval(autoPlay,2000);
function autoPlay(){
animate(imgs[iNow],{left:-offsetWidth});
iNow++;
if(iNow>imgs.length-1){
iNow=0;
}
imgs[iNow].style.left=offsetWidth+"px";
animate(imgs[iNow],{left:0});
changColor();
}
//鼠标经过，清除定时器
w_slider.οnmοuseοver=function(){
clearInterval(timer);
}
w_slider.οnmοuseοut=function(){
clearInterval(timer);
timer=setInterval(autoPlay,2000);
}
function animate(obj,json,fn) { // 给谁 json
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面
for(var attr in json){ // attr 属性 json[attr] 值
//开始遍历 json
// 计算步长 用 target 位置 减去当前的位置 除以 10
// console.log(attr);
var current = 0;
if(attr == "opacity"){
current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
console.log(current);
}
else{
current = parseInt(getStyle(obj,attr)); // 数值
}
// console.log(current);
// 目标位置就是 属性值
var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//判断透明度
if(attr == "opacity"){ // 判断用户有没有输入 opacity
if("opacity" in obj.style){ // 判断 我们浏览器是否支持opacity
// obj.style.opacity
obj.style.opacity = (current + step) /100;
}
else{ // obj.style.filter = alpha(opacity = 30)
obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";
}
}
else if(attr == "zIndex"){
obj.style.zIndex = json[attr];
}
else{
obj.style[attr] = current + step + "px" ;
}
if(current != json[attr]){ // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面
flag = false;
}
}
if(flag){ // 用于判断定时器的条件
clearInterval(obj.timer);
//alert("ok了");
if(fn){ // 很简单 当定时器停止了。 动画就结束了 如果有回调，就应该执行回调
fn(); // 函数名 + （） 调用函数 执行函数
}
}
},10)
}
function getStyle(obj,attr) { // 谁的 那个属性
if(obj.currentStyle){ // ie 等
return obj.currentStyle[attr]; // 返回传递过来的某个属性
}else{
return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器
}
}
</script>
</body>
</html>
3754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
