jquery轮播图
未知
2020-11-26 10:41:50
0次
问题描述：
用jquery做一个轮播图。效果如下图：
解决办法：
用jquery做一个轮播图。效果如下图：
解决办法：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>{$eyou.field.seo_title}</title>
<meta name="description" content="{$eyou.field.seo_description}" />
<meta name="keywords" content="{$eyou.field.seo_keywords}" />
</head>
<body>
<style>
.current{
border: 2px solid red;
}
</style>
<div class="aaaaa">
<div class="zhongjian_con">
<!-- <img class="datu" src=""/> -->
<div class="datu">
<img class="" src="/template/pc/skin/img/huodong2.jpg"/>
<img class="" src="/template/pc/skin/img/huodong3.jpg"/>
<img class="" src="/template/pc/skin/img/huodong4.jpg"/>
<img class="" src="/template/pc/skin/img/huodong5.jpg"/>
<img class="" src="/template/pc/skin/img/huodong6.jpg"/>
<img class="" src="/template/pc/skin/img/huodong7.jpg"/>
</div>
<ul class="clearfix" id="yuandian">
<li >
<a href="#">
<img src="/template/pc/skin/img/huodong2.jpg"/>
</a>
</li>
<li >
<a href="#">
<img src="/template/pc/skin/img/huodong3.jpg"/>
</a>
</li>
<li >
<a href="#">
<img src="/template/pc/skin/img/huodong4.jpg"/>
</a>
</li>
<li >
<a href="#">
<img src="/template/pc/skin/img/huodong5.jpg"/>
</a>
</li>
<li >
<a href="#">
<img src="/template/pc/skin/img/huodong6.jpg"/>
</a>
</li>
<li >
<a href="#">
<img src="/template/pc/skin/img/huodong7.jpg"/>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
/*i表示当前图片的下标和当前小图的下标（图片和小图是对应关系）*/
var i = 0;
var timer;
$(function(){
/*Step 1： 设置页面刚加载出来显示的是第一张图片*/
$(".datu img").eq(0).show().siblings().hide();
/*开始做图片轮播，使用定时器*/
start();
/*Step 2： 鼠标移入小圈的时候，首先清除定时器，找到当前小图的索引，改变当前显示的图片，使其变换成小图对应的图片，当前小图变换样式*/
$("#yuandian li").hover(function(){
clearInterval(timer);
i = $(this).index();
change();
}, function(){
/*鼠标移出的时候，重新启动定时器*/
start();
});
});
/*开始轮播函数*/
function start(){
/*定时器，每个图片在页面上停留的时间是2s*/
timer = setInterval(function(){
i++;
if(i == 7){
i = 0;
}
change();
}, 2000);
}
/*当前图片及对应小图变换函数*/
function change(){
/*当前图片显示，其他图片隐藏*/
$(".datu img").eq(i).show().siblings().hide();
/*当前小图添加类current，其他小图删除其类current*/
$("#yuandian li").eq(i).addClass("current").siblings().removeClass("current");
}
</script>
</body>
</html>
相关内容
热门资讯
JavaScript获取当前协...
JavaScript获取当前协议,域名,路径
解决Phpcms V9手机门户...
第一步：开启手机网站。位置：模块 》手机门户 》 添加手机站点，如果模块里面没有手机门户，那么就在模...
layui tooltip提示...
在layui表单中，我们想把一个标签做出提示，以标明这个表单元素是做什么有什么功能时，就可以用上提...
layui中出错Unexpec...
layui中出错Unexpected identifier
如何在html中禁止复制文字
问题描述： 如何禁止别人复制自己的文章？ 解决办法： 在body标签中添加以下代码： onconte...
JS实现html打印功能，打印...
!DOCTYPE htmlhtmlhead meta charset=utf-8 title打印功能...
bootstrap 图片文字居...
问题描述： 让图片和文字居中显示。 解决办法： !-- style--.navbars img{ m...
bootstrap图片排版布局
问题描述： 在使用bootstrap的时候，出现了这样的问题。 排版对不齐。 解决办法： 通过上图发...
手机端底部定位
问题描述： 需要实现的效果 解决办法： !-- 底部 -- div class=layui-row ...