jq实现图像旋转木马:轮焦点+关于控制+自己主动旋转木马
2015-07-14 10:16
381 查看
资源:http://www.ido321.com/862.html
html代码:
</script>
[/code]
css代码
[/code]
js代码:
[/code]
打包下载:http://download.csdn.net/detail/u011043843/7994017
html代码:
[code] <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JQ图片轮播</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- js -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="style.js">
</script>
</head>
<body>
<div id="ad">
<ul>
<li>
<a href="#" title="位置1"><img src="ad.png"></a>
</li>
<li>
<a href="#" title="位置2"><img src="1.jpg"></a>
</li>
<li>
<a href="#" title="位置3"><img src="2.jpg"></a>
</li>
<li>
<a href="#" title="位置4"><img src="3.jpg"></a>
</li>
</ul>
</div>
<div class="slideshortcut">
<a id="SlidePrev" class="prev"><</a>
<a id="SlideNext" class="next">></a>
</div>
<div class="jiaodiandiv">
<ul>
<li id="selectli"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
</ul>
</div>
</body>
</html>
[/code]
css代码
[code] #ad
{
width: 1350px;
height: 370px;
overflow: hidden;
margin-left:-5px;
position: relative;
}
#ad ul
{
list-style: none;
position: absolute;
margin-left: -40px;
}
#ad ul li
{
float: left;
width: 1350px;
height: 370px;
position: relative;
}
.slideshortcut a
{
color: #000000;
text-decoration: none;
background-color: #fff;
display: block;
position: absolute;
z-index: 500;
top: 150px;
width: 50px;
height: 50px;
border: 1px solid red;
font-size: 40px;
line-height: 40px;
text-align: center;
opacity: 0;
}
.slideshortcut a:hover
{
color: #000000;
text-decoration: none;
}
.prev
{
left: 150px;
}
.next
{
left: 1200px;
}
.jiaodiandiv
{
position: absolute;
z-index: 200;
top: 320px;
left: 42%
}
.jiaodiandiv ul
{
list-style: none;
}
.jiaodiandiv ul li
{
width: 30px;
height: 30px;
margin-left: 10px;
float: left;
border: 1px solid #B7B7B7;
background-color: #B7B7B7;
border-radius:15px;
text-align: center;
}
#selectli
{
background-color: #FF4400;
}
.jiaodiandiv li:hover
{
cursor: pointer;
}
.jiaodiandiv span
{
font-size: 20px;
line-height: 30px;
}
[/code]
js代码:
[code] $(document).ready(function()
{
/*轮播*/
var index = 0;
var jdlis = $('.jiaodiandiv li'); /*焦点li元素集合*/
var timer;
var liWidth = $('#ad').width();
var len = $("#ad ul li").length;
//左右滚动,即全部li元素都是在同一排向左浮动,所以这里须要计算出外围ul元素的宽度
$("#ad ul").css("width",liWidth * (len));
//上一张button
$("#SlidePrev").click(function(){
clearInterval(timer);
index -= 1;
if(index == -1){index = len - 1;}
showPic(index);
});
//下一张button
$("#SlideNext").click(function(){
clearInterval(timer);
index += 1;
if(index == len){index = 0;}
showPic(index);
});
//轮播
$('#ad').hover(
function()
{
clearInterval(timer); /*停止动画*/
$('.slideshortcut a').show().css('opacity','0.4');
},
function()
{
$('.slideshortcut a').hide();
timer=setInterval(function(){
showPic(index);
index++;
if(index == len){index = 0;}
},2000);
}).trigger("mouseleave");
/*显示index图片*/
function showPic(index){
var nowLeft = -index*liWidth;
jdlis.eq(index).css('backgroundColor','#FF4400');
jdlis.not(jdlis.eq(index)).css('backgroundColor','#B7B7B7');
$("#ad ul").stop(true,false).animate({"left":nowLeft},300);
/*$('#loginimg').hide().fadeIn(1000);*/
}
$('.slideshortcut a').mouseover(function()
{
$('.slideshortcut a').show();
});
$('.prev').mouseover(
function()
{
$(this).css({opacity:'0.95',cursor:'pointer'});
});
$('.next').mouseover(
function()
{
$(this).css({opacity:'0.95',cursor:'pointer'});
});
/*点击焦点区的div显示相应图*/
jdlis.click(
function(){
clearInterval(timer);
index = jdlis.index(this);
showPic(index);
});
});
[/code]
打包下载:http://download.csdn.net/detail/u011043843/7994017
相关文章推荐
- 【IMOOC学习笔记】多种多样的App主界面Tab实现方法(四)
- 思维题 UVA 10881 Piotr's Ants
- 关于Go语言daemon启动的方法.
- 大神给你分析HTTPS和HTTP的区别
- 悟空学Linux专栏----第38篇
- file's owner以及outlet与连线的理解
- 注册串口通讯控件MSCOMM32.OCX
- gym 100496 House of Representatives(树形dp)
- 读书笔记-深入理解JVM虚拟机-1.OOM初探
- ERP的管理思想
- dataBingding 使用 范例
- Elasticsearch_安装配置(对应插件)
- android在String资源文件中加入符号
- 42、使用存放在存assets文件夹下的SQLite数据库
- hdu 5073 Galaxy 2014 Asia AnShan Regional Contest
- shell脚本示例,start stop restart
- 悟空学Linux专栏----第37篇
- UVA - 1326 Jurassic Remains
- 一步一步JavaEE
- 网页中嵌入视频