This article is mainly on the use of jquery simple to achieve banner picture switching sample code is introduced, the need for friends can come to the reference, I hope to help you.
Mainly used the principle of the timer, Bind,trigger application code as follows: <! DOCTYPE html> <html> <head> <meta charset= "Utf-8" > <title> Banner Switch Implementation </title> <style type= "Text/css" > / & nbsp * @description: Banner switch style * @author: Lanfeng (beryl) * @time: 2013- 02-26 / * reset*/ *{margin:0 Padd ing:0;} body{font:12px/1.5 Tahoma, ' 5b8b4f53 ', arial,tahoma,helvetica,sans-serif; color: #333333; Background-color: #ffffff;p osition:relative; { h1,h2,h3,h4,h5,h6{font-size:100%} Address,em{font-style:normal ;} Code,kbd,pre,samp{font-family:courier New,courier,monospace; UL , ol{list-style:none outside none;} &NBsp fieldset,img{border:0} Img{vertical-align:middle} table{ border-collapse:collapse;border-spacing:0;font-size:inherit;*font-size:100%;} input,button,textarea,select{vertical-align:middle;font:100% Helvetica,arial,sans-serif ; Color:inherit} . Clearfix:after{content: '. '; Display:block;height:0;clear:both;visibility:hidden;} . Clearfix{*zoom:1;} . clear{font-size:0;line-height:0;height:0; Clear:both;visibility:hidden;overflow:hidden;} . d-ftab{width:510px height:180px;position:relative margin:100px Auto;} &NB Sp D-fshow ul li{float:left width:510px height:180px;} d-fshow{width:510p X height:180px; Overflow:hidden;} . D-fshow img{width:510px height:180px float:left;} . d-fs-control{Position:absolute; width:510px; position:absolute; left:0; bottom:0; height:25px; line-height:25px; Background:rgba (0,0,0,0.4); filter:progid:DXImageTransform.Microsoft.Gradient (gradienttype=0,startcolorstr= ' # 66000000 ', endcolorstr= ' #66000000 '); &NBSP} : Root .d-fs-control{filter:progid:dximagetransform.microsoft.gradient ( Gradienttype=0,startcolorstr= ' #66000000 ' , endcolorstr= ' #66000000 ') 9;} . D-fs-control ul{position:absolute bottom:3px; right:5px height:16px;} &NB Sp D-fs-control ul li{width:16px;height:16px background: #777675; border-radius:2px 2px 2px 2px; float:left; margin-left:5px; color: #dcdcdc; Text-align:center;font-weight:700;cursor:pointer;line-height:16px;filter:alpha (opacity=70) ; opacity:0.7;} . D-fs-control UL Li:hover,.d-fs-control ul li.select{background: #ffffff; color:#ff6700;} </style> <script type= "Text/javascript" src= "Js/jquery-1.4.2.min.js" > </script> <script type= "Text/javascript" > $ (function () { &nbs P var wrap =$ ('. D-ftab '); var IMGs = Wrap.find ('. D-fshow ul >li '); var len=imgs.length ; var tabtime=100; var outtime=4000; var select= ' select '; var num = 0; var interval; var type = ' click '; var btns=wrap.find ('. D-fs-control ul>li '); Btns.bind (Type,function () { var _this=$ (this); _this.addclass (' select ').Siblings (). Removeclass (' select '); Num=_this.prevall (). length; imgs.stop () eq (num) fadeto (tabtime,1) ; imgs.not (': eq (' +num+ '). Filter (': Visible '). fadeout (Tabtime); return false; ). EQ (num). trigger (type); var interfunc=function () { num= (num+1)% Len BTNS.EQ (num) triggerhandler (type); { wrap.bind (' mouseover ', function () { &N Bsp clearinterval (interval); }. Bind (' Mouseout ', function () { Interval=setinterval (interfunc,outtime) &NBSP }) }) </script> </head> &L t;body> <div class= "D-ftab" > <div class= "D-fshow" > <ul> &NB Sp <li> <a href= "#" >&L T;img alt= "" src= "images/1.jpg"/> </a> &NB Sp </li> <li > <a href= "#" ><img alt= "" src= "Images/2.png" > &NB Sp </a> </li> <LI&G T <a href= "#" ><img alt= "" src= "images/3.jpg" > &nbs P &nbSp </a> </li> & nbsp <li> <a href= "><img alt=" sr c= "Images/4.jpg" > </a> </li> <li> <a href= "#" ><img alt= "" src= "images/5.jpg" > ;/a> </li> </ul> </D iv> <div class= "D-fs-control" > <ul> & nbsp <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li class= "select" >5</li> </ul> </div> &L T;/div> </body> </html> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
