jquery优化轮播图2
继续优化
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>轮播图</title>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- <script type="text/javascript" src="js/lunbo.js"></script> -->
<style type="text/css">
*{
margin: 0;
padding: 0;
} body {
font-size: 14px;
line-height: 1.5;
font-family: 'Microsoft Yahei', 'arial', 'tahoma', 'simsun';
color: #666;
background-color: #fff
} img {
border: 0;
} a {
text-decoration: none;
color: #666;
}
.public_scroll {
position: relative;
min-width: 1100px;
max-width: 100%;
height: 793px; overflow: hidden; }
.public_s_list{ overflow: hidden;} .public_s_list a {
position: absolute; display: block;
width: 100%;
} .public_s_list a img {
width: 100%;
display: block; }
.public_s_dot{ overflow: hidden; text-align: center; position: absolute; bottom:25px; z-index: 2; width: 100%; }
.public_s_dot i{ width: 10px; height: 10px; background-color: #fff; margin:0 8px; display: inline-block; cursor: pointer; border-radius: 50%;}
.public_s_dot .active{ background-color: #808080 }
</style>
</head> <body>
<div class="public_scroll" id="publicScroll">
<div class="public_s_list">
<a href="javascript:;" class="J_pic"><img src="http://www.emoi.com/media/pc-cn/201810/1540853894181026841.jpg" alt="1"></a>
<a href="javascript:;" class="J_pic"><img src="http://www.emoi.com/media/pc-cn/201805/1525203825936416255.jpg" alt="2"></a>
<a href="javascript:;" class="J_pic"><img src="http://www.emoi.com/media/pc-cn/201712/1513641621162167882.jpg" alt="3"></a>
</div>
<div class="public_s_dot" id="publicDot"></div>
</div>
<script type="text/javascript">
$(function() {
var index = 0;
var timer;
//获取id为publicScroll 所有的img
var imgList = $('#publicScroll .J_pic');
//img的个数
var imgNum = imgList.length;
if(imgNum>1){
//第一张图显示
$('.J_pic').eq(0).show().siblings().hide();
$('.J_pic').mouseover(function(){
clearInterval(timer); //鼠标经过停止自动播放
});
$('.J_pic').mouseout(function(){
showTime(); //鼠标离开继续自动播放
});
// 填充分页
var bPage=$('#publicDot');
var html='';
for(var i=0,max=imgNum;i<max;i++){
html+=(i==0)?'<i class="active"></i>':'<i></i>';
}
bPage.append(html);
// //鼠标点击分页
bPage.children('i').on('click',function(){
index=$(this).index();
showBg();
})
function showBg() {
$('.J_pic').eq(index).fadeIn(300).siblings().fadeOut(300);
bPage.children('i').eq(index).addClass('active').siblings().removeClass('active');
}
function showTime() {
timer = setInterval(function() {
index++;
if (index == imgNum) {
index = 0;
}
showBg();
}, 4000);
}
//自动播放图片
showTime();
}
});
</script>
</body> </html>
jquery优化轮播图2的更多相关文章
- 用jQuery实现轮播图效果，js中的排他思想
---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 自实现PC端jQuery版轮播图
最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...
- JQuery实现轮播图及其原理
源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...
- Jquery无缝轮播图的制作
轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...
- jquery改造轮播图1
g改造轮播图1:https://www.cnblogs.com/huanghuali/p/8677338.html <!DOCTYPE html> <html lang=" ...
- jQuery无缝轮播图思路详解-唯品会
效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...
- jQuery封装轮播图插件
// 布局要求,必须有一个容器,图片和两个按钮,布局方式自定,小圆点样式固定 // <div class="all"> // <img src="img ...
- 自己随意写了个简单的依赖jquery的轮播图
//轮播图 function Switcher(obj){ this.box = $(obj.box); this.width = this.box.width(); this.banner = $( ...
随机推荐
- 关于directshow的SmartTee
可以通过CLSID_SmartTee创建: CComPtr<IBaseFilter> pSmartTee; // Create the Smart Tee (CLSID_SmartTee) ...
- .net core 一个避免跨站请求的中间件
前提: 前几天看到博客园首页中有这么一篇文章:跨站请求伪造(CSRF),刚好前段时间自己一直也在搞这个东西,后来觉得每次在form表单里添加一个@Html.AntiForgeryToken,在对应的方 ...
- 5月23日Google就宣布了Chrome 36 beta
对于开发人员来说,本次更新的重点还有element.animate().HTML Imports.Object.observe()的引入,以及一个改进后的throttled async touchmo ...
- Redis OBJECT命令
[Redis OBJECT命令] 1.OBJECT subcommand [arguments [arguments]] OBJECT 命令允许从内部察看给定 key 的 Redis 对象. 它通常用 ...
- SpringBoot进行单元测试
SpringBoot进行单元测试,需要在maven中加入以下依赖 <dependency> <groupId>org.springframework.boot</grou ...
- 2015年传智播客JavaEE 第168期就业班视频教程day45-ERP项目-0107-其他子系统
一套ERP系统中一定会有CRM,不可能说我所有数据都是散着放的,你想用就随便写一个.你出去和人聊,一定得说我这里有什么有什么,然后你就可以和人说你做的是进销存.人家要问CRM或者说财务系统你就说那不是 ...
- SQLite3学习笔记----创建数据库的两种方式
今天研究学习SQLite,刚开始创建数据库,就遇到了一个坑,是自己粗心了,特记录一下. 实验环境: OS:Ubuntu18.04 创建数据库名称:test.db 实验步骤: 1.检查是否已经安装了SQ ...
- c#获取本地IP和MAC地址
1>通过wmi获取 using System; using System.Management; using System.Net; public class Program { static ...
- unix时间戳与时间
[root@pserver ~]# date -d "@1381371010" Thu Oct :: CST [root@pserver ~]# date --date=" ...
- 报错提示：mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given in..的处理方式
PHP操作数据库的时候如果出现报错: mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given in.. ...