内容发布更新时间 : 2025/1/24 2:09:45星期一 下面是文章的全部内容请认真阅读。
下面小编就为大家带来一篇Jquery实现的简单轮播效果【附实例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考
Jquery实现的简单轮播效果【附实例】 <!DOCTYPE html> <html lang=\ <head>
<meta charset=\ <title>Title</title>
<link rel=\ <script src=\ <script src=\ </head> <body>
<div class=\
<a href=\ <a href=\ <a href=\ <a href=\ <ul>
<li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html>
-------------------------------------------------------------------------- /*************初始化************/
*{margin:0;padding: 0;border: none;list-style: none} /*********轮播左右居中*************/ .main{
width: 1024px; height: 320px; margin: 0 auto; position: relative; }
.main a{
position: absolute; }
.main a img{
width: 100%;
height: 320px; }
/***********左边小图标************/ .main ul li.selected{
background: #f97157; }
.main ul{
position: absolute; z-index: 999; top: 120px; left: 20px; }
.main ul li{
width: 20px; height: 20px;
border-radius: 50%; background: #909090; cursor: pointer; text-align: center; }
---------------------------------------------------------------------------- /**
* Created by Administrator on 16-3-12. */
/***********定义全局变量和定时器*************/ var t=null;
var n=0;/**动态变化**/ var count;
/************************/ $(function(){
count=$(\给动态变化的n备用*/ /**让不是轮播中的第一个隐藏**/ $(\
/*点击当前li当前li对应的图片显示出来*/ $(\ var index=$(this).text()-1; n=index;
console.log(n);
/*****让当前显示的图片0.5S内渐隐，并匹配下一个渐显示*****/ $(\a\ /*******聚焦，给当前li追加类，改变背景色*******/ $(this).addClass(\
/****同时移除当前li的所有兄弟的类名为selected，还原背景色*****/
$(this).siblings().removeClass(\ });
/***定义定时器3秒执行一次****/ t=setInterval(\
/****当鼠标进入时候定时器停止，移除时候定时器开启****/ $(\function(){t = setInterval(\ });
/***定义自动轮播函数****/ function autoMove(){
if(n>=(count-1)){ n=0; }else{
++n; }
/*****给li执行匹配的事件*****/ $(\ }
以上这篇Jquery实现的简单轮播效果【附实例】就是小编分享给大家的全部内容了，
希望能给大家一个参考