jq demo 轮播图,图片可调用,向上,自动+鼠标点击切换

时间:2022-08-28 09:14:14
jq demo 轮播图,图片可调用,向上,自动+鼠标点击切换

 1 <!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JQ轮播图,图片可调用,自动+鼠标点击切换</title>
<script src="jquery-1.11.1.js"></script>
<style>
body,ul,ol,li,img{margin:0;padding:0;}
ul,ol,li{list-style:none;}
img{vertical-align:top;}
#img_box{width:470px;height:150px;margin:30px auto;position:relative;overflow: hidden;}
#img_box ul{position:absolute;top:0;left:0;z-index:1;}
#img_box ol{position:absolute;bottom:15px;right:15px;z-index:2;}
#img_box ol li{display:inline-block;cursor:pointer;width:20px;height:20px;margin-right:5px;line-height:20px;text-align:center;background:#fff; color:#f60;}
#img_box ol .active{background:#f60; color:#fff;padding:2px;bottom:2px;}
</style>
<script>
$(function(){
var iNow = 0;
var timer = null;
var $imgLi=$('#img_box ul li');
if($imgLi.length>0){
for(var i = 1; i <= $imgLi.length; i++){
var $olLi=$('<li>'+ i +'</li>');
$('#img_box ol').append($olLi);
}
$('#img_box ol li').eq(0).attr('class','active');
}; timer = setInterval(toRun,2000);
function toRun(){
if($imgLi.length>1){
if(iNow == $imgLi.length-1){
iNow = 0;
}
else{
iNow++;
}
$('#img_box ol li').attr('class','');
$('#img_box ol li').eq(iNow).attr('class','active');
$('ul').stop().animate({top : -150 * iNow},1000);
}
}
$('#img_box').mouseover(function(){
clearInterval(timer);
}).mouseout(function(){
timer=setInterval(toRun,2000);
});
$('#img_box ol li').click(function(ev){
//console.log($(this).html());
$('#img_box ol li').attr('class','');
$(this).attr('class','active');
iNow = $(this).html()-1;
$('ul').stop().animate({top : -150 * iNow},1000);
})
});
</script>
</head>
<body>
<div id="img_box">
<ul>
<li><img src="img/1.jpg" alt="" /></li>
<li><img src="img/2.jpg" alt="" /></li>
<li><img src="img/3.jpg" alt="" /></li>
<li><img src="img/4.jpg" alt="" /></li>
<li><img src="img/5.jpg" alt="" /></li>
<li><img src="img/3.jpg" alt="" /></li>
<li><img src="img/4.jpg" alt="" /></li>
<li><img src="img/5.jpg" alt="" /></li>
</ul>
<ol>
<!--<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>-->
</ol>
</div>
</body>
</html>

jq demo 轮播图,图片可调用,向上,自动+鼠标点击切换的更多相关文章

  1. jq demo 轮播图,图片可调用,向左,自动&plus;鼠标点击切换

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. iview Carousel 轮播图自适应宽高;iview 轮播图 图片重叠问题;iview tabs 高度互相影响问题;vue this问题;

    最终效果图: 一.轮播图中图片自适应宽高:  <Carousel loop v-bind:height="imgHeight+'px'" v-model="caro ...

  3. JQ 实现轮播图(3D旋转图片轮播效果)

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head&gt ...

  4. JQ万能轮播图

    lunbotu.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8">  ...

  5. 5 项目---自定义用户模型以及轮播图图片url返回格式

    创建自定义的用户模型类  1. 用命令创建users 应用 2. 将users 注册到settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'd ...

  6. jq龙禧轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JQ无缝轮播图-插件封装

    类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test&quot ...

  8. ionic3 slides轮播图手动滑动后无法自动播放问题

    我们都知道Ionic3为我们提供了一套丰富易用的UI组件库,然而凡事是都有不完美之处,今天我们来看一下ionic3 slides组件在实现轮播功能时候的小问题. 先开UI小姐姐给到的3张美美哒效果图 ...

  9. jq交叉轮播图变种【闪一下黑】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. ABAP 上传文件到内表

    http://www.cnblogs.com/jiangzhengjun/p/4265642.html http://www.xuebuyuan.com/1233478.html

  2. radio值未出现JQ获取值问题

    $('input:radio[name="modelExtend.manageType"]:checked').val(); 选中的获取的值不是空或者null而是on

  3. NDK SO 库开发与使用中的 ABI 构架选择

    Bugtags V1.2.7 引入了 NDK SO 库,在集成的时候,遇到不同的 SO 库打包到 APK 时,安装在某些机器上,出现 java.lang.UnsatisfiedLinkError 加载 ...

  4. HDOJ 2066 floyed优化算法

    一个人的旅行 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  5. C&num;与js的各种交互

    今天遇到一个问题,查到不错的资料,放上来记录一下,以防忘记地址,算是我的笔记吧! 很多人都向在服务器端调用客户端的函数来操作,也就是在asp中调用javascript脚本中已经定义好的脚本函数.经过研 ...

  6. sql with递归

       with temp as ( select Id, UserId, OfficeID, RoleId, DeptId, IsDelete, IsEnd, ParentId from [dbo]. ...

  7. GCD hdu1695容斥原理

    GCD Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  8. 读取Excel,单元格内容大于255个字符自动被截取的问题

    DataSet ds = new DataSet(); cl_initPage.v_DeBugLog("ExcelDataSource进入"); string strConn; s ...

  9. POI--各种样式的XSSFCellStyle的生成

    //背景色.フォント色.枠線より各種XSSFCellStyleの作成して.cellStyleMapに保存する private HashMap<String, XSSFCellStyle> ...

  10. Integer’s Power HDU - 3208(容斥原理)

    找出(l,r)内的所有的指数最大的次方和 因为一个数可能可以看成a^b和c^d,所以我需要去重,从后往前枚举幂数,然后找可以整除的部分,把低次幂的数去掉. 然后开n方的部分,先用pow()函数找到最接 ...