jquery 幻灯片 左右滚动

使用jquery封装的一个幻灯片插件 写的好差  参考了别人写的 后面再重构 现在这个应该可以直接用了

主要实现思路就是 添加当前选中状态 index相对应的 选中的图总是在第一位(也就是加选中状态的li 总是第一个) 这样不管前滚动还是后滚动都是选中的第一个

这里用的关键的jquery prepend()函数 在匹配元素内部 前置 就是一直第一位插入 使用方法$('p').prepend(获取到的元素)  这里获取的元素可以用$('.slide').find('ul').eq(1),不需要再获取下面的内容html()

自己整理修改的一个jquery 后面会在重构一下的

完整例子下载

http://pan.baidu.com/s/1ntJ08I1

 

使用讲解：

HTML 最外层的div控制位置和宽度  使用的是ul li  一个图片在一个li里就行

 

<div style=" width: 1366px; margin: 0px auto; overflow: hidden;">

  <div class="focus" id="focus001">
    <ul>
      <li><a href="#" target="_blank"><img src="images/slide.png"  height="520"  /></a>
        <div class="slide-text">
          <p class="slide-text-header">111111111111111111安全管控物联网应用平台</p>
          <p class="slide-text-content">安全管控物联网应用平台根据监狱实际情况，依托最新的物联网技术，结合视频监控智能分析等技术，建设相应系统。</p>
        </div>
      </li>
      <li>
        <a href="#" target="_blank"><img src="images/slide.png"  height="520"  /></a>
        <div class="slide-text">
          <p class="slide-text-header">222222222222222222安全管控物联网应用平台</p>
          <p class="slide-text-content">安全管控物联网应用平台根据监狱实际情况，依托最新的物联网技术，结合视频监控智能分析等技术，建设相应系统。</p>
        </div>
      </li>
      <li>
        <a href="#" target="_blank"><img src="images/slide.png"  height="520"  />
        </a>
        <div class="slide-text">
          <p class="slide-text-header">33333333333333333333安全管控物联网应用平台</p>
          <p class="slide-text-content">安全管控物联网应用平台根据监狱实际情况，依托最新的物联网技术，结合视频监控智能分析等技术，建设相应系统。</p>
        </div></li>
      <li>
        <a href="#" target="_blank"><img src="images/slide.png" height="520"  /></a>
        <div class="slide-text">
          <p class="slide-text-header">444444444444444444444444444安全管控物联网应用平台</p>
          <p class="slide-text-content">安全管控物联网应用平台根据监狱实际情况，依托最新的物联网技术，结合视频监控智能分析等技术，建设相应系统。</p>
        </div>
      </li>
    </ul>
  </div>

</div>

　css  这个我写在页面内里 可以单独拿出来 弄个css 注意图片的路径位置即可

  /*slide*/

    .focus {width:100%; height:520px; overflow:hidden; position:relative; font-family: "\5FAE\8F6F\96C5\9ED1"}
    .focus ul {
      height:520px;
      position:absolute;
      padding-left: 0px;
      margin-left: 0px\9
    }
    .focus ul li {float:left;  height:520px; overflow:hidden;
      position:relative;

      background:#000;}

    .focus ul li div.slide-text{ position:absolute; color:#fff; top:42%; left:25%; }
    .focus ul li div.slide-text .slide-text-header{ font-size: 24px; }
    .focus ul li div.slide-text .slide-text-content{ font-size: 14px; width: 480px;}

    .focus ul li div {position:absolute; overflow:hidden;}
    .focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000; display:none;}
    .focus .btn {
      position:absolute;
      /* width:780px;*/
      height:23px;
      padding:0px 10px 0px 0px;
      left:612px;
      top:90%;
      /* margin-left: -10%;*/
      bottom:6px;
      text-align:left;
    }
    .focus .btn span {
      display:inline-block;
      _display:inline;
      _zoom:1;
      width:18px;
      height:18px;
      line-height:18px;
      text-align:center;
      _font-size:0;
      margin-left:5px;
      cursor:pointer;
      background:#fff;
      border-radius: 18px;
      text-indent:-99999px;
    }
    .focus .btn span.on {background:#fff;}
    .focus .preNext {width:45px; height:100px; position:absolute; top:90px;cursor:pointer;}
    .focus .pre {left:170px;top:40%; background:url('images/prev.png') no-repeat left center;}
    .focus .next {right:170px;top:40%; background:url('images/next.png') no-repeat right center;}

　JS 这个就是封装的插件  jquery的插件 然后 复制下来保存一个js文件 比如1.js

$(function() {
	jQuery.focus = function(slid) {


        var sWidth = $(slid).width(); //获取焦点图的宽度（显示面积）
        var len = $(slid).find("ul li").length; //获取焦点图个数
		var index = 0;
		var picTimer;
		/*为图片添加可视宽度*/
		$(slid).find('ul li a img').css({"width":sWidth});


		/*添加img  index索引位置*/

		for(var j= 0,jj=$(slid).find('ul li').length;j<jj;j++){
			$(slid).find('ul').find('li').eq(j).attr({"img-index":j});

		}

		//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
		var btn = "<div class='btnBg'></div><div class='btn'>";
		for(var i=0; i < len; i++) {
			var ii = i;
			btn += "<span>"+ii+"</span>";
		}
		btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
		$(slid).append(btn);
		$(slid).find("div.btnBg").css("opacity",0.5);
	
		//为小按钮添加鼠标滑入事件，以显示相应的内容
		$(slid+" div.btn span").css("opacity",0.4).mouseenter(function() {
			index = $(slid+" .btn span").index(this);

			showPics(index);

		}).eq(0).trigger("mouseenter");
	
		//上一页、下一页按钮透明度处理
		$(slid+" .preNext").css("opacity",0.2).hover(function() {
			$(this).stop(true,false).animate({"opacity":"0.5"},300);
		},function() {
			$(this).stop(true,false).animate({"opacity":"0.2"},300);
		});
	
		//上一页按钮
		$(slid+" .pre").click(function() {
			index -= 1;
			if(index == -1) {index = len-1;}

			showPics(index);
		});
	
		//下一页按钮
		$(slid+" .next").click(function() {
			index += 1;
			if(index == len) {
            index = 0;

			}
			showPics(index);
		});

		//左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
		$(slid+" ul").css("width",sWidth * (len));
		
		//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
		$(slid).hover(function() {
			clearInterval(picTimer);
		},function() {
			picTimer = setInterval(function() {
				showPics(index,'next');
				index++;
				if(index == len) {
					index = 0;

				}
			},2000); //此4000代表自动播放的间隔，单位：毫秒
		}).trigger("mouseleave");
		
		//显示图片函数，根据接收的index值显示相应的内容
		function showPics(index) {

			addState(index);
			/*向左滚动一个图片宽度*/
			var nowLeft = - sWidth;


			if(index !== 0){

				scrollLeft(nowLeft);
			}
			else{
				/*索引为0时候 第一个元素如果是最后的索引值 就添加到队尾*/
				var first_li =$(slid).find("ul li").first();
				/*最后一个元素单独执行 添加到队尾*/
				if(first_li.attr('img-index') == len-1){

					scrollLeft(nowLeft);
				}
				if(index == 0){
					scrollLeft(nowLeft);
				}
			}


		}
		/*执行animate滚动效果*/
		function scrollLeft(nowLeft){

			$(slid+" ul").animate({"left":nowLeft},"normal",function(){

				/*var li_first =	$(slid).find("ul li").first();
				$(slid).find("ul").append(li_first);*/
				$(this).css({"left":"0px"});
			});


	}
		function addState(index){

			var lis =$(slid).find("ul li").length;
			var first_li =$(slid).find('ul li').first();
			for(var j= 0,jj=lis;j<jj;j++){
				var attr =$(slid).find("ul li").eq(j).attr('img-index');

				if( attr == index){

					$(slid).find("ul li").eq(j).addClass("on").siblings().removeClass("on");
					/*当前的li总是在第一个*/
					  $(slid).find("ul").prepend($(slid).find("ul li").eq(j));

					$(slid+" .btn span").removeClass("on").eq(attr).addClass("on");
					$(slid+" .btn span").stop(true,false).animate({"opacity":"0.4"},500).eq(attr).stop(true,false).animate({"opacity":"1"},500);

				}

			}

		}



	
	};
	
});

　记得加载js文件  头部底部都可以 最好底部

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/1.js"></script>