幻灯片js

1.新建html

<div style='position:relative;'>
 <div class="images" id='tw_img_scroll'>
  <div class='silders' id="slides">
   <div class='imgInt'>
    <a href='#'><img src="./img/hs_xgg8_4.jpg" width='502' height='314' /></a>
    <a href='#'><img src="./img/hs_xgg8_5.jpg" width='502' height='314' /></a>
    <a href='#'><img src="./img/hs_banner_1.jpg" width='502' height='314' /></a>
    <a href='#'><img src="./img/hs_banner_2.jpg" width='502' height='314' /></a>
    <a href='#'><img src="./img/hs_banner_3.jpg" width='502' height='314' /></a>
   </div>
  </div>
  <div class='perp'></div>
  <div class='next'></div>
 </div>
<div>

 

用到的css

<style>
 .images{ width:502px; height:314px; overflow:hidden; position:relative;}
 .perp,.next{ width:20px; height:20px; background:red; position:absolute; left:0;}
 .next{ background:green; right:-477px;}
</style>

 

 

2.js文件

 (function($){  $.fn.hihwwslider = function(setting) {  

 //default options   

var opts = $.extend({},$.fn.hihwwslider.defaults, setting);   

var silder = $(this);  

 //add DOM   

silder.append('<div class="number" id="number"></div>');   

silder.append('<div class="info"></div>');   

silder.append('<div class="perp"></div>');   

silder.append('<div class="next"></div>');  

 //get OBJ   var silder_img = $("#slides a");   

var infobar = $(".info");   

var Prevlink = $(".perp");   

var Nextlink = $(".next");  

 var numbar = $("#number");  

 //IMG SIZE   

var silder_size = silder_img.length;   

var curr = 0;  

 //init  

 silder_img.not(":first").hide();   

silder.css({width:opts.size.width,height:opts.size.height});  

 $("img",silder_img).css({width:opts.size.width,height:opts.size.height});   

Prevlink.css("top",opts.size.height/2-Prevlink.height()/2);  

 Nextlink.css("top",opts.size.height/2-Prevlink.height()/2);   

if(!opts.btnenable){    Prevlink.hide();    Nextlink.hide();   }  

 if(!opts.barenable){    numbar.hide();   }  

 for (var i=1; i <= silder_size; i++) {    numbar.append("<a><span>"+i+"</span></a>");   };  

 //number click  

 if(silder_size == 0) {       Prevlink.hide();       Nextlink.hide();       infobar.hide();       return false;   }   

numbar.find("a").first().addClass("current");   

infobar.append("<a href="+silder_img.first().attr("href")+">"+silder_img.first().find("img").attr("alt")+"</a>");   

//number click  

 if(silder_size < 2) {       Prevlink.hide();       Nextlink.hide();       return false;   }   

numbar.find("a").bind(opts.mevent,function(){    curr = numbar.find("a").index(this);    obj = silder_img.fadeOut("slow").eq(curr);    obj.fadeIn("slow");    numbar.find("a").removeClass("current").eq(curr).addClass("current");    infobar.find("a").attr('href',obj.attr("href")).html(obj.find("img").attr("alt"));   }).hover(    function(){clearInterval(t);},    function(){t = setInterval(showAuto, opts.speed);   });   

//next click   

Nextlink.bind("click",function(){    if(curr == (silder_size-1)){     curr = 0;    }else{     curr++;    }   

 obj = silder_img.fadeOut("slow").eq(curr);    obj.fadeIn("slow");   

 numbar.find("a").removeClass("current").eq(curr).addClass("current");    

infobar.find("a").attr('href',obj.attr("href")).html(obj.find("img").attr("alt"));   }).hover(    function(){clearInterval(t);},    function(){t = setInterval(showAuto, opts.speed);   });   

//prev click   

Prevlink.bind("click",function(){    if(curr == 0){     curr = silder_size-1;    }else{     curr--;    }    obj = silder_img.fadeOut("slow").eq(curr);    obj.fadeIn("slow")    numbar.find("a").removeClass("current").eq(curr).addClass("current");    infobar.find("a").attr('href',obj.attr("href")).html(obj.find("img").attr("alt"));   }).hover(    function(){clearInterval(t);},    function(){t = setInterval(showAuto, opts.speed);   });   

//auto run   function showAuto(){    if(curr == (silder_size-1)){     curr = 0;    }else{     curr++;    }   

 obj = silder_img.fadeOut("slow").eq(curr);   

 obj.fadeIn("slow");    

numbar.find("a").removeClass("current").eq(curr).addClass("current");   

 infobar.find("a").attr('href',obj.attr("href")).html(obj.find("img").attr("alt"));   };

  var t = setInterval(showAuto,opts.speed);  

 silder_img.hover(function(){clearInterval(t);},function(){t = setInterval(showAuto, opts.speed);});      };  

$.fn.hihwwslider.defaults = {    size:{width:'502',height:'314'},    btnenable: true,    barenable: true,    speed :3000,    mevent:'click'   }; })(jQuery);