博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一个jQ版大图滚动
阅读量:6988 次
发布时间:2019-06-27

本文共 2469 字,大约阅读时间需要 8 分钟。

难得周末能休息,也是越发的代码难受,手就想敲点东西,这不闲着无聊敲了一个Jq版的大图滚动,不足之处大家批评指正:

运作环境win7,代码编辑器是:sublime; 我把源码复制了一下,

<!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#outer{width: 314px;height: 220px;position: relative;margin: 30px auto;}
#inner{width: 314px;height: 220px;position: absolute;z-index: -1;}
#inner img{width: 314px;height: 220px;position: absolute;left: 0;top: 0; z-index: 0; opacity: 0;}
#xiabiao{width: 100px;overflow: hidden;position: absolute;bottom: 10px;left: 100px;list-style: none;}
#xiabiao li{width: 15px;height: 15px;font-size: 12px; float: left;margin-left: 5px;background: #fff;text-align: center;cursor: pointer;}
#left{width: 30px;height: 60px;position: absolute;left: 0;top: 80px;background: #aaa;opacity: 0.5;cursor: pointer;}
#right{width: 30px;height: 60px;position: absolute;right: 0;top: 80px;background: #aaa;opacity: 0.5;cursor: pointer;}
#inner .show{opacity: 1;}
#xiabiao .select{background: red;color: #fff;}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<img class="show" src="img/01.jpg" alt="">
<img src="img/02.jpg" alt="">
<img src="img/03.jpg" alt="">
<img src="img/04.jpg" alt="">
<img src="img/06.jpg" alt="">
</div>
<ul id="xiabiao">
<li class="select">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<p id="left"></p>
<p id="right"></p>
</div>

<script src="jquery.js"></script>

<script>
var x=0;
var y;
var timer1=null,timer2=null,timer3=null;
$(function () {
function everygo(){
var a=0;
if (x>=$('#inner img').length) {
x=0;
};
$('#xiabiao li').eq(x).css({'background':'red','color':'#fff'}).siblings().css({'background':'#fff','color':'black'});
$('#inner img').eq(x).css('z-index','1').siblings().css('z-index','0');
timer1=setInterval(function(){
a++;
if (a>=10) {
clearInterval(timer1);
$('#inner img').eq(x).siblings().css('opacity','0');
};
var b=a/10;
$('#inner img').eq(x).css('opacity',b);
},30)
};
function autogo(){
timer2=setInterval(function () {
x++;
everygo();
},2000)
};
autogo();
$('#xiabiao li').click(function () {
clearInterval(timer1);
clearInterval(timer2);
x=$(this).index();
everygo();
autogo();
})
$('#left').click(function () {
clearInterval(timer1);
clearInterval(timer2);
x--;
everygo();
autogo();
})
$('#right').click(function(){
clearInterval(timer1);
clearInterval(timer2);
x++;
everygo();
autogo();
})
});

</script>

</body>
</html>

忙的时候想休息,休息的时候想代码,也是没有谁了,呵呵口水大军淹死我吧。

转载于:https://www.cnblogs.com/lrbee/p/6035552.html

你可能感兴趣的文章
python笔记二 基础
查看>>
nohup /dev/null 2>&1 含义详解
查看>>
Micropython教程之TPYBoard DIY超声波测距仪实例演示
查看>>
我的友情链接
查看>>
Android切近实战(六)
查看>>
mysqlbinlog 使用
查看>>
RHCS中GFS2共享存储扩容
查看>>
Excel如何把非打印区域设置成灰色
查看>>
条件语句整理
查看>>
Office365 SKU-1
查看>>
汉语国际传播思索
查看>>
apache .htaccess重写去除index.php
查看>>
linux Cp .md
查看>>
迅雷软件或将成最大×××散播工具
查看>>
Windows中UltraEdit ctags的配置(2010.4.28更新)
查看>>
TODO:排列组合问题:n个数中取m个
查看>>
27.chown更换所有者
查看>>
grep、egrep以及正则表达式的使用
查看>>
rsync加inotify实现无间隔文件同步
查看>>
系统最小化安装后,使用命令时提示“command not found”
查看>>