Now there are a lot of Mobile Phone applications, and we have made a general jquery focus chart, which is not good on mobile phones. Although jquery now has a mobile jquery plug-in, but I have not tried it myself. Here I am also based on jquery. touchwipe enables you to slide between the left and right of the mobile phone to switch between image instances.
The effect is as follows:
Code snippet
| The Code is as follows: |
Copy code |
<! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable = no ">
<Title> jquery focus chart mobile edition switch effect </title>
<Style>
* {Padding: 0; margin: 0 ;}
Body {word-wrap: break-word;-webkit-text-size-adjust: none;-webkit-font-smoothing: antialiased; font-size: 20px ;}
# Wrap {max-width: 780px; margin: 0 auto; padding: 2px ;}
# Title {font-size: 0.8em; line-height: 1.5em; margin: 2em 0 ;}
# PicSlide {position: relative; max-width: 680px; overflow: hidden; margin: 0 auto ;}
# PicSlide li {float: left; list-style: none ;}
# PicSlide li img {width: 100% ;}
# PicSlide. tab {position: absolute; bottom: 0.3em; left: 0; width: 100%; text-align: center ;}
# PicSlide. tab em {width: 0.8em; height: 0.8em; display: inline-block; border-radius: 0.8em;-webkit-border-radius: 0.8em; background: rgba (9, 13, 19, 0.5); text-indent:-9999px ;}
# PicSlide. tab em. active {background: rgba (11,119,); cursor: default; box-shadow:-1px 1px 2px #51b780 inset;-webkit-box-shadow: -1px 1px 2px #51b780 inset; border-bottom: 1px solid #0d3f20; border-left: 1px solid #086534 ;}
</Style>
<Script type = "text/javascript" src = "jquery. min. js"> </script>
<Script type = "text/javascript" src = "jquery. touchwipe. js"> </script>
<Script type = "text/javascript" src = "jquery. picSlide. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('# PicSlide'). picSlide ();
})
</Script>
</Head> <Body>
<Div id = "wrap">
<Center id = "title"> pull out your smartphone and browse this page! <Br/> you can slide between the left and right of your phone to manually switch the image. </Center>
<Div id = "picSlide">
<Ul>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
<P class = "tab">
<Em> 1 </em>
<Em> 2 </em>
<Em> 3 </em>
</P>
</Div>
</Div>
</Body>
</Html> |
Source code download: Http://file.bKjia. c0m/upload/2013/11/Focal Point picture carousel mobile. Zip
