A simple image switching effect implemented using html + css + js

Source: Internet
Author: User

.


This image switching effect is easy to implement and has good compatibility.

The html page is as follows:
Copy codeThe Code is as follows:
<Div class = "wrapper">
<Div id = "focus">
<Ul>
<Li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> </ a> </li>
<Li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> </ a> </li>
<Li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> </> </li>
<Li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> </> </li>
<Li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> </> </li>
</Ul>
</Div>

</Div> <! -- Wrapper end -->
</Body>

Css style
Copy codeThe Code is as follows:
<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 ;}

/* Qqshop focus */
# Focus {width: 800px; height: 280px; overflow: hidden; position: relative ;}
# Focus ul {height: pixel PX; position: absolute ;}
# Focus ul li {float: left; width: 800px; height: 280px; overflow: hidden; position: relative; background: #000 ;}
# 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>

Js script
Copy codeThe Code is as follows:
$ (Function (){
Var sWidth = $ ("# focus"). width (); // obtain the width of the focus chart (display area)
Var len = $ ("# focus ul li"). length; // obtain the number of focal points.
Var index = 0;
Var picTimer;

// The following Code adds the number button and the translucent bar after the button, as well as the previous and next buttons
Var btn = "<div class = 'btnbg '> </div> <div class = 'btn'> ";
For (var I = 0; I <len; I ++ ){
Btn + = "<span> </span> ";
}
Btn + = "</div> <div class = 'prenext pre'> </div> <div class = 'prenext next'> </div> ";
$ ("# Focus"). append (btn );
$ ("# Focus. btnBg" 2.16.css ("opacity", 0.5 );

// Add a mouse slide event for the small button to display the corresponding content
$ ("# Focus. btn span" example .css ("opacity", 0.4). mouseenter (function (){
Index = $ ("# focus. btn span"). index (this );
ShowPics (index );
}). Eq (0). trigger ("mouseenter ");

// Display the transparency of previous and next pages
$ ("# Focus. preNext" detail .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 );
});

// Previous page button
$ ("# Focus. pre"). click (function (){
Index-= 1;
If (index =-1) {index = len-1 ;}
ShowPics (index );
});

// Next page button
$ ("# Focus. next"). click (function (){
Index + = 1;
If (index = len) {index = 0 ;}
ShowPics (index );
});

// In this example, it is left-side scrolling, that is, all li elements are floating to the left in the same row. Therefore, the width of the peripheral ul element needs to be calculated here.
$ ("# Focus ul" ).css ("width", sWidth * (len ));

// Stop automatic playback when you move the mouse over the focus chart, and start automatic playback when the mouse slides out.
$ ("# Focus"). hover (function (){
ClearInterval (picTimer );
}, Function (){
PicTimer = setInterval (function (){
ShowPics (index );
Index ++;
If (index = len) {index = 0 ;}
}, 4000); // This 4000 represents the automatic playback interval, in milliseconds
}). Trigger ("mouseleave ");

// The image display function displays the corresponding content based on the received index value.
Function showPics (index) {// normal switchover
Var nowLeft =-index * sWidth; // calculate the left value of the ul element based on the index value.
$ ("# Focus ul "). stop (true, false ). animate ({"left": nowLeft}, 300); // use animate () to adjust the ul element to scroll to the position calculated
// $ ("# Focus. btn span "). removeClass ("on "). eq (index ). addClass ("on"); // switch the current button to the selected Effect
$ ("# Focus. btn span "). stop (true, false ). animate ({"opacity": "0.4"}, 300 ). eq (index ). stop (true, false ). animate ({"opacity": "1"}, 300); // switch the current button to the selected Effect
}
});

Switch between left and right images

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.