Home > Article > Web Front-end > jQuery simulates 360 browser screen switching effect slideshow (with demo source code download)_jquery

jQuery simulates 360 browser screen switching effect slideshow (with demo source code download)_jquery

WBOYOriginal: 2016-05-16 15:17:061701browse

This article describes an example of jQuery simulating the 360 browser screen switching effect slide, which is shared with everyone for your reference. The details are as follows:

The screenshot of the running effect is as follows:

Click here to view the online demonstration .

The specific code 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>
  <title>360效果幻灯片</title>
  <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
  <script type="text/javascript" >
    function changeDesktopBg(index) {
      $("#desktopList").animate({"margin-left": -(index*1000)+"px", "speed": 2000});
    }
  </script>
  <style type="text/css" >
    body { margin:0; padding: 0;}
    #desktop ul { padding:0; border-bottom-style:none; width:5000px; list-style:none; }
    #desktop li { padding:0; float:left;}
    .desktop_li_img { width:1000px; height:600px;}
    #desktop { width:1000px; overflow:hidden; height:600px;}
    #controller ul { width:250px; list-style:none;}
    #controller li { width:40px; float:left; padding:0; text-align:center; margin-left:5px; }
    .controller_li_block { background:#F2F2F2; height:10px; line-height:10px; border:2px solid gray; cursor:pointer;}
  </style>
</head>
<body>
<center>
  <div id="desktop">
    <ul id="desktopList">
      <li><img src="img/1.jpg" class="desktop_li_img" alt="jQuery simulates 360 browser screen switching effect slideshow (with demo source code download)_jquery" /></li>
      <li><img src="img/2.jpg" class="desktop_li_img" alt="jQuery simulates 360 browser screen switching effect slideshow (with demo source code download)_jquery" /></li>
      <li><img src="img/3.jpg" class="desktop_li_img" alt="jQuery simulates 360 browser screen switching effect slideshow (with demo source code download)_jquery" /></li>
      <li><img src="img/4.jpg" class="desktop_li_img" alt="jQuery simulates 360 browser screen switching effect slideshow (with demo source code download)_jquery" /></li>
      <li><img src="img/5.jpg" class="desktop_li_img" alt="jQuery simulates 360 browser screen switching effect slideshow (with demo source code download)_jquery" /></li>
    </ul>
  </div>
  <div id="controller">
    <ul >
      <li><div class="controller_li_block" onclick="changeDesktopBg(0)">1</div></li>
      <li><div class="controller_li_block" onclick="changeDesktopBg(1)">2</div></li>
      <li><div class="controller_li_block" onclick="changeDesktopBg(2)">3</div></li>
      <li><div class="controller_li_block" onclick="changeDesktopBg(3)">4</div></li>
      <li><div class="controller_li_block" onclick="changeDesktopBg(4)">5</div></li>
    </ul>
  </div>
</center>
</body>
</html>

Click here for complete example codeDownload from this site.

Readers who are interested in more content related to jQuery special effects can check out the special topics on this site: "Summary of jQuery animation and special effects usage" and "Summary of common classic special effects of jQuery"

I hope this article will be helpful to everyone in jQuery programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Discuss the execution process of JavaScript statements_javascript skillsNext article：Discuss the execution process of JavaScript statements_javascript skills

See more

jQuery simulates 360 browser screen switching effect slideshow (with demo source code download)_jquery

Related articles