Easy Implementation of javascript image carousel special effect _ javascript tips-js tutorial

This article mainly helps you easily implement the special javascript image carousel effect. You can click a tag to switch between images, interested friends can refer to the examples in this article to introduce the code and Implementation ideas of the special effects of javascript image carousel. The details are as follows:

Let's take a look:

Code:

I. HTML code analysis

   
     
 
 
       
  
  
       
  
  
       
  
  
       
  
  
       
  
  
     
 
 
     
 
 
       
  
  
Version A is A mobile DOTA application that covers
       
  
  
Version A is A mobile app that covers
       
  
  
Version A is A mobile app that covers
       
  
  
Version A is A mobile app that covers
       
  
  
Version A is A mobile app that covers
     
 
 
   
  

The hierarchical structure of this effect is clear:
1. p whose class is data is the outermost container and can be used to control the entire display position.

2. ul with content id is used to store the scrolling picture on the left.

3. ul with the id of indicator is used to display the indicator column on the right.

Ii. CSS code

* {Margin: 0; padding: 0;} img {border: 0 ;}. dota {width: 570px; height: 230px; margin: 100px auto; position: relative; overflow: hidden ;}. dota # content {float: left; list-style: none; position: absolute; width: pixel; height: 230px ;}. dota # content img {width: pixel PX; height: 230px ;}. dota # indicator {float: right; list-style: none; width: 180px; height: 220px; padding: 5px; background-color: #100F13 ;}. dota # indicator li {width: 180px; height: 44px; background: url (images/anniu.png) 0-44px ;}. dota # indicator li. current {background-position: 0 0 ;}. dota # indicator li a {display: block; width: 160px; height: 34px; padding: 5px 0 5px 25px ;}. dota # indicator li a: link ,. dota # indicator li a: visited {text-decoration: none; color: #686477; font: 12px/145% "";}

Here, I will describe the li code in indicator:
The css code in. dota # indicator li is to set each item in the indicator bar on the right. Note that the background attribute is used here, that is, the li background is an image. The prepared image is as follows:

The size of the prepared image is 180*88. in dota # indicator li, the size of the position attribute set by the background attribute is 0-44px, that is, the lower half of the captured image. Therefore, all background images in indicator display the lower half and darker parts; however. dota # indicator li. the size of the position attribute of current is 0 0, so the first indicator is highlighted by default, and the rest is the dark part. Then, the JQuery code is used to control the current attribute on "who" to switch the selected status.

Iii. JQuery code