jquery轮播图特效

需自己导入图片和jquery.js插件,图片宽度为1038px,个数为6个，如要更改需改动js代码块的变量值。

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>js轮播特效</title>
  5     <style type="text/css">
  6         *{
  7             margin: 0;
  8             padding: 0;
  9             list-style: none;
 10         }
 11         img{
 12              1038px;
 13             height: 583px;
 14         }
 15         #box{
 16              1038px;
 17             height: 585px;
 18             margin: 100px auto;
 19             overflow: hidden;
 20             border: 1px solid #000;
 21             position: relative;
 22         }
 23         #box .menu{
 24              600%;
 25             position: absolute;
 26             left: 0;
 27             bottom: 0;
 28         }
 29         #box .menu ul li{
 30             float: left;
 31         }
 32         #box .pave-ul{
 33              180px;
 34             height: 20px;
 35             position: absolute;
 36             bottom: 15px;
 37             
 38             left: 275px;
 39         }
 40         #box .pave-ul ul{
 41             position: absolute;
 42         }
 43         #box .pave-ul ul li{
 44              20px;
 45             height: 20px;
 46             border: 1px solid silver;
 47             float: left;
 48             margin: 0 2px;
 49             cursor: pointer;
 50             border-radius: 50%;
 51             background-color: #ccc;
 52             opacity: 0.5
 53         }
 54         #box .pave-ul ul li:hover{
 55             background-color: #888;
 56             opacity: 1;
 57         }
 58         #box .pave-ul ul li.act{
 59             background-color: #888;
 60             opacity: 1;
 61         }
 62         
 63     </style>
 64     <meta charset="utf-8">
 65 </head>
 66 <body>
 67     <div id="box">
 68         <div class="menu">
 69             <ul>
 70                 <li><img src="1.jpg"></li>
 71                 <li><img src="2.jpg"></li>
 72                 <li><img src="3.jpg"></li>
 73                 <li><img src="4.jpg"></li>
 74                 <li><img src="6.jpg"></li>
 75                 <li><img src="8.jpg"></li>
 76             </ul>
 77         </div>
 78 
 79         <div class="pave-ul">
 80             <ul>
 81                 <li class="act"></li>
 82                 <li></li>
 83                 <li></li>
 84                 <li></li>
 85                 <li></li>
 86                 <li></li>
 87             </ul>
 88         </div>
 89     </div>
 90 </body>
 91     <script src="jquery.js"></script>
 92     <script type="text/javascript">
 93         $(function(){
 94             var _index = 0;//定义图片下标
 95             var window_width = 1038;//定义轮播图片的宽度
 96             var timer = null;//定义定时器
 97             var images_count = 6; //定义图片总数
 98 
 99             function nextPlay(){
100                 if(_index > images_count-1){
101                     _index = 0;
102                     $('#box .menu').stop().animate({left:-window_width*_index},500);
103                     
104                 }else{
105                     $('#box .menu').stop().animate({left:-window_width*_index},500);
106                 }
107                 if(_index > images_count-1){
108                     _index = 0;
109                     $('#box .pave-ul ul li').eq(0).addClass('act').siblings().removeClass('act');;
110                     
111                 }else{
112                     $('#box .pave-ul ul li').eq(_index).addClass('act').siblings().removeClass('act');
113                 
114             }
115             _index++;
116         }
117             timer = setInterval(nextPlay,2000);
118 
119         });
120     </script>
121 </html>

相关阅读:
Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除
 Javascript Fromdata 与jQuery 实现Ajax文件上传
 web.xml配置
 servlet反射、生命周期、接口
 Tomcat
java--反射原理及操作
 CSS基础--属性选择器、伪类选择器
 webStom常用快捷键备忘
 HTML5--sessionStorage、localStorage、manifest
ES6
原文地址：https://www.cnblogs.com/a252336799/p/8593450.html