图片滚动切换效果

//本人作为学生第一次写博客，里面涉及到很多问题，希望各位大神多多指点

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
	  <script src="jquery-1.11.3.js"></script>
     <style>
    * {
      margin: 0;
      padding: 0
    }
 
    ul {
      list-style: none
    }
 
    img {
      vertical-align: top;
	  width: 550px;
      height: 200px;
    }
 
    .box {
      width: 550px;
      height: 200px;
      margin: 100px auto;
      padding: 5px;
      border: 1px solid #ccc;
    }
 
    .inner {
      width: 550px;
      height: 200px;
      background-color: pink;
      overflow: hidden;
      position: relative;
    }
 
    .inner ul {
      width: 1000%;
      position: absolute;
      top: 0;
      left: 0;
    }
 
    .inner li {
      float: left;
    }
 
    .square {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
 
    .square span {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: #fff;
      text-align: center;
      line-height: 20px;
      cursor: pointer;
    }
    .square span.current {
      background-color: orangered;
      color: #fff;
    }
  </style>
  </head>
  <body>
    <div class="box" id="box">
      <div class="inner">
        <ul id="ulhd">
          <li><a href="#"><img src="banner_01.jpg" /></a></li>
          <li><a href="#"><img src="banner_02.jpg" /></a></li>
          <li><a href="#"><img src="banner_03.jpg" /></a></li>
          <li><a href="#"><img src="banner_04.jpg" /></a></li>
          <li><a href="#"><img src="banner_05.jpg" /></a></li>
        </ul>
        <div class="square">
          <span class="current">1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>5</span>
        </div>
      </div>
    </div>
  <script>
var timer=null;
function ulhudong(){
//首先获取Ul的left的值；
var lleft=parseInt($("#ulhd").css("left"));
//每次向左滑动一张图片的宽（-550px）;
	$("#ulhd").animate({"left":(lleft-550)});
//找到带有class为current属性的后一个span元素，并添加class为current的属性
   $(".current+span").attr("class","current");
//将其原本有class为current属性的元素的class移除
	$(".current:first").removeAttr("class","current");
//如果left值一直小于-1650，
	if(lleft>=-1650){
//用定时器每个3s执行一次ulhudong（），
		timer=setTimeout(ulhudong,3000);
	}
	else{
//当最后一张图加载完毕后，重新加载页面
	location.reload();
	//ulhudong();
	}
}
	 timer=setTimeout(ulhudong,3000);
//找到所有span元素，添加鼠标移动事件
	 $(".square>span").mouseover(function(event){
//清空计时器
		 clearTimeout(timer);
		 timer=null;
//获取源对象
		 var e=window.event||arguments[0];
		 var src= e.srcElement||e.target;
//判断是否是SPAN元素
		 if(src.nodeName=="SPAN"){
//如果是将鼠标放上的元素添加样式,并通过文本内容判断为是哪个span元素，将图片位置与span元素对应
			 $(".current").removeAttr("class","current");
			 $(src).attr("class","current");
			 if($(src).text()=="1"){
				$(ulhd).css("left",0); 
			 }
			else if($(src).text()=="2"){
				$(ulhd).css("left",-550); 
			 }
			else if($(src).text()=="3"){
				$(ulhd).css("left",-1100);
			}
			else if($(src).text()=="4"){
				$(ulhd).css("left",-1650); 
			 }
		    else{
				$(ulhd).css("left",-2150); 
			}
		 } 
	 });
//当鼠标离开时，再次调用ulhudong();
	 $(".square>span").mouseout(function(event){
		 var e=window.event||arguments[0];
		 var src= e.srcElement||e.target; 
		  if(src.nodeName=="SPAN"){
			ulhudong();
		  }
	 });
  </script>
  </body>
</html>
图片滚动切换效果

猜你喜欢
