Jquery.focus.js

;(function($) {$.fn.myfocus=function(options) {varobj = $.extend ({}, $.fn.myfocus.defaults, Options | | {}); return$( This). each (function(){            //methods.init ();            var$_this = $ ( This), Swidth=$_this.width (), Len= $_this.find (' ul Li '). Length, Index= 0, Pictimer; $_this.find (' UL '). Width (swidth*Len); varBTN = "<div class= ' btnbg ' ></div><div class= ' btn ' >";  for(vari=0; i < Len; i++) {btn+ = "<span></span>"; } btn+ = "</div><div class= ' prenext pre ' ></div><div class= ' Prenext Next ' ></div>";            $_this.append (BTN); $_this.find ('. BTN span '). CSS ("opacity", 0.4). Click (function() {index= $_this.find ('. btn span '). Index ( This);            Showpics (index); }). EQ (0). Trigger ("click"); $_this.hover (function() {clearinterval (Pictimer); },function() {Pictimer= SetInterval (function() {showpics (index); Index++; if(index = = len) {index = 0}                 },4000);            }); $_this.find ('. Pre '). Click (function() {index-= 1; if(Index = =-1) {index = len-1;}            Showpics (index);            }); $_this.find ('. Next '). Click (function() {index+ = 1; if(index = = len) {index = 0;}            Showpics (index);            }); functionShowpics (index) {//Normal switching                varNowleft =-index*swidth;//calculates the left value of the UL element based on the index value$_this.find (' ul '). Stop (true,false). Animate ({"Left": nowleft},300);//Adjust the UL element by Animate () to the calculated position                //$ (". Focus. BTN span"). Removeclass ("on"). EQ (index), addclass ("on");//switch to the selected effect for the current button$_this.find ('. btn span '). Stop (true,false). Animate ({"opacity": "0.4"},300). EQ (index). Stop (true,false). Animate ({"Opacity": "1"},300);//switch to the selected effect for the current button            }                                });    }; $.fn.myfocus.defaults={nexttarget:10    };}) (jQuery);

$ (' #focus '). Myfocus ();

<Divclass= "Focus"ID= "Focus">        <ul>            <Li><ahref="#"Target= "_blank"><imgsrc= "Img/1.jpg"alt="" /></a></Li>            <Li><ahref="#"Target= "_blank"><imgsrc= "Img/2.jpg"alt="" /></a></Li>            <Li><ahref="#"Target= "_blank"><imgsrc= "Img/3.jpg"alt="" /></a></Li>        </ul></Div>

<style type= "Text/css" >*{margin:0;padding:0;}Body{font-size:12px;Color:#222;font-family:Verdana,arial,helvetica,sans-serif;background:#f0f0f0;}. Clearfix:after{content: ".";Display:Block;Height:0;Clear:both;Visibility:Hidden;}. Clearfix{Zoom:1;}Ul,li{List-style:None;}img{Border:0;}. Wrapper{width:800px;margin:0 Auto;Padding-bottom:50px;}H1{Height:50px;Line-height:50px;font-size:22px;Font-weight:Normal;font-family:"Microsoft Yahei", Simhei;}. shuoming{Margin-top:20px;Border:1px solid #ccc;Padding-bottom:10px;}. shuoming DT{Height:30px;Line-height:30px;Font-weight:Bold;text-indent:10px;}. shuoming DD{Line-height:20px;padding:5px 20px;}/*Qqshop Focus*/. Focus{width:800px;Height:450px;Overflow:Hidden;position:relative;}. Focus UL{Height:450px;position:Absolute;}. Focus UL Li{float: Left;width:800px;Height:450px;Overflow:Hidden;position:relative;}. Focus ul Li Div{position:Absolute;Overflow:Hidden;}. Focus. BTNBG{position:Absolute;width:800px;Height:20px; Left:0;Bottom:0;background:#000;}. Focus. BTN{position:Absolute;width:780px;Height:10px;padding:5px 10px; Right:0;Bottom:0;text-align: Right;}. Focus. BTN Span{Display:Inline-block;_display:inline;_zoom:1;width:25px;Height:10px;_font-size:0;Margin-left:5px;cursor:Pointer;background:#fff;}. focus. BTN Span.on{background:#fff;}. Focus. Prenext{width:45px;Height:100px;position:Absolute;Top:90px;background:URL (img/sprite.png) no-repeat 0 0;cursor:Pointer;}. Focus. Pre{ Left:0;}. Focus. Next{ Right:0;background-position:Right top;}</style>

Jquery.focus.js