jquery图片轮播

83453065 2013-09-15

   jquery图片轮播插件easyslider(version:1.7),使用简单方便,只有一个js文件和一个css文件,下载文件夹下面的ds_store 文件不影响使用,可以删除。

html:

<!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>Easy Slider jQuery Plugin Demo</title>
 <meta http-equiv="content-type" content="text/html;charset=UTF-8" />   
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/easySlider1.7.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){ 
   $("#slider").easySlider({
    auto: true,
    continuous:true
   });
  }); 

  /**
  其他配置项:
    numeric: true,//数字显示图片次序
    nextId: "slider1next",//下一张
    prevId: "slider1prev"//上一张
  
  */
 </script> 
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
 
</head>
<body>

<div id="container">
 <div id="content">
  <div id="slider">
   <ul>    
    <li><a href="http://www.163.com"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
    <li><a><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
    <li><a><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
    <li><a><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
    <li><a"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>   
   </ul>
  </div>
</div>

</body>
</html>

相关推荐

Web全栈笔记 / 0评论 2020-06-15