Home>

The full screen picture carousel effect with progress bar transfer implemented by jquery is a full screen picture carousel special effect code with a progress bar on the homepage of the oppo mobile phone's official website based on jquery.Achieve effect atmosphere,Simple and elegant

Tip:If the browser does not work properly,Try switching the browsing mode.

(1) Introduce css style in the head area:

link rel="stylesheet" type="text/css" href="css/style.css">

(2) JS code:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var i=0;
jummper ();
function jummper () {
 $(". pic ul li"). eq (i) .find ("img"). css ("left", "-1180px");
 $(". pic ul li"). eq (i) .find ("p"). css ("width", "0px");
 $(". pic ul li"). eq (i) .find ("img"). animate ({left:"0px"}, 500, function () {
 //Load the progress bar when the picture is moved
 //alert ("Do something when the picture moves");
 $(". pic ul li"). eq (i) .find ("p"). animate ({width:"1174px"}, 8000, function () {
 $(". pic ul li"). eq (i) .find ("img"). animate ({left:"1180px"}, 500, function () {
 i ++;
 if (i>2)
 i=0;
 $(". pic ul li"). eq (i) .fadein (100) .siblings (). fadeout (100);
 });
 });
 });
}
setinterval ("jummper ()", 9100);
</script>

The jquery full-screen picture carousel special effect code with progress bar for everyone to share is as follows

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jquery full screen picture carousel code with progress bar</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div>
 <ul>
 <li>
 <img src="images/con1.png">
 <div></div>
 <div><p></p></div>
 </li>
 <li>
 <img src="images/con2.png">
 <div></div>
 <div><p></p></div>
 </li>
 <li>
 <img src="images/con3.png">
 <div></div>
 <div><p></p></div>
 </li>
 </ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var i=0;
jummper ();
function jummper () {
 $(". pic ul li"). eq (i) .find ("img"). css ("left", "-1180px");
 $(". pic ul li"). eq (i) .find ("p"). css ("width", "0px");
 $(". pic ul li"). eq (i) .find ("img"). animate ({left:"0px"}, 500, function () {
 //Load the progress bar when the picture is moved
 //alert ("Do something when the picture moves");
 $(". pic ul li"). eq (i) .find ("p"). animate ({width:"1174px"}, 8000, function () {
 $(". pic ul li"). eq (i) .find ("img"). animate ({left:"1180px"}, 500, function () {
 i ++;
 if (i>2)
 i=0;
 $(". pic ul li"). eq (i) .fadein (100) .siblings (). fadeout (100);
 });
 });
 });
}
setinterval ("jummper ()", 9100);
</script>
<divmicrosoft yahei ";">
<p>Applicable browsers:ie8, 360, firefox, chrome, safari, opera, Maxthon, Sogou, Window of the World.
</p>
</div>
</body>
</html>
  • Previous Solution to cannot enable Enable property of Checkbox control in Aspnet using JavaScript script
  • Next jQuery focus map switching special effects code sharing