jQuery轮播图

最新推荐文章于 2024-01-09 17:07:13 发布
最新推荐文章于 2024-01-09 17:07:13 发布
阅读量211 收藏 1
点赞数
分类专栏： 前端 原创 jQuery特效 jq轮播图 javascript 文章标签： jQuery特效 jq轮播图 javascript 前端 实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiRenxian0316/article/details/80934965
版权
原创 同时被 3 个专栏收录
12 篇文章 0 订阅
订阅专栏
前端
7 篇文章 0 订阅
订阅专栏
javascript
7 篇文章 0 订阅
订阅专栏

jQuery实现的轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出</title>
<style>
body,ul,li,a {
	margin:0;
	padding: 0;
	list-style-type: none;
	text-decoration: none;
}
.div1 {
	width: 592px;
	height: 472px;
	position: relative;
	border: 1px solid green;
	margin: 0 auto;
}
/* 图片 start */
.div1 .pic ul li {
	width: 590px;
	height: 470px;
	float:left;
	position: absolute;
	left:0;
	top:0;
	display: none;
}
/* 图片 end */
/* 小圆点start */
.div1 .btn-bot {
	width: 500px;
	height: 20px;
	position: absolute;
	left: 20%;
	bottom: 15px;
}
.div1 .btn-bot span {
	display: inline-block;
	width: 8px;
	height: 8px;
	border: 2px solid white;
	border-radius: 8px;
	cursor: pointer;
}
span.active {
	width: 10px;
	height: 10px;
	background-color: white;
}
/* 小圆点end
/* 左右键 start */
.btn-LR .le,.ri {
	width: 25px;
	height: 40px;
	position: absolute;
	top: 50%;
	margin-top: -20px;
	background-color: white;
	opacity: 0.3;
	cursor: pointer;
	text-align: center;
	line-height: 40px;
}
.btn-LR .le{
	left: 0;			
	float: left;
}
.btn-LR .ri {
	right: 0;
	float: right;
}
/* 左右键 end */
</style>
<script src="public/jquery.min.js"></script>
<script>
$(function()
{
    var $index = null;
    // 初始化 
    $('.div1 .btn-bot span').first().addClass('active').siblings('span').removeClass('active');
    $('.div1 .pic ul li').first().show();
    /**************************************/
    // 函数
    // 向右走
    function riMar ()
    {
	$index++; // 向右索引++
	if($index > 7)
	{
	    $index = 0;
	}
        $('.div1 .btn-bot span').eq($index).addClass('active').siblings('span').removeClass('active');
        $('.div1 .pic ul li').eq($index).fadeIn().siblings('li').fadeOut(); // 以索引值对应的图片淡入，其余的淡出
    }
    // 向左走
    function leMar ()
    {
	$index--; // 向左索引--
	if ($index < 0)
	{
	    $index = 7;
	}
	$('.div1 .btn-bot span').eq($index).addClass('active').siblings('span').removeClass('active');
	$('.div1 .pic ul li').eq($index).fadeIn().siblings('li').fadeOut(); // 以索引值对应的图片淡入，其余的淡出
    }
    // 小圆点移入事件
    function circleBtn()	// 添加单击事件
    {
	$index = $(this).index();	// 小点的索引
	$(this).addClass('active').siblings('span').removeClass('active');
	$('.div1 .pic ul li').eq($index).fadeIn().siblings('li').fadeOut();	// 相关连的图片淡入时，其他图片淡出
    }
    /************************************/
    /*************功能***************/
    // 鼠标移入控制
    $('.div1 .btn-bot span').mouseenter(circleBtn);
    // 左键控制
    $('.div1 .btn-LR .le').click(leMar);
    // 右键控制
    $('.div1 .btn-LR .ri').click(riMar);
    // 定时器控制
    var t = setInterval(riMar,2000);
    // 鼠标移进图片停止
    $('.div1 .pic ul li').mouseenter(function()
    {
	clearInterval(t);
    });
    // 鼠标移出图片播放
    $('.div1 .pic ul li').mouseleave(function()
    {
	t = setInterval(riMar,2000);
    });
});
</script>
</head>
<body>
<div class="div1">
    <div class="pic">
	<ul>
	    <li><a href="#" target="_blank"><img src="imgs/5add8464N9c52e077.jpg" alt=""></a></li>
	    <li><a href="#" target="_blank"><img src="imgs/5b3b4b38N9dffcd0e.jpg" alt=""></a></li>
	    <li><a href="#" target="_blank"><img src="imgs/5b3b4333N744b6569.jpg" alt=""></a></li>
	    <li><a href="#" target="_blank"><img src="imgs/5b3decccN3c3f598e.jpg" alt=""></a></li>
	    <li><a href="#" target="_blank"><img src="imgs/5b15dff1N8fec67b1.jpg" alt=""></a></li>
	    <li><a href="#" target="_blank"><img src="imgs/5b35c71eN06564f81.jpg" alt=""></a></li>
	    <li><a href="#" target="_blank"><img src="imgs/5b35ee58Nb0aa81d4.jpg" alt=""></a></li>
	    <li><a href="#" target="_blank"><img src="imgs/5b359609Ne8307b0f.jpg" alt=""></a></li>
	</ul>
    </div>
    <div class="btn-bot">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
    </div>
    <div class="btn-LR">
	<div class="le"><</div>
	<div class="ri">></div>
    </div>
</div>
</body>
</html>

李任贤
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery轮播图插件，背景图实现轮播图，轮播图可增加文字
02-27
jQuery轮播图插件 jQuery轮播图、图片切换、图片轮播 代码简介：兼容IE8的jQuery轮播图插件是一款兼容性很好的，使用非常简单的网站焦点图代码，依赖jquery和pageSwitch.js来实现轮播效果，轮播图以背景图的方式插入到当前页面进行轮播，并且可自定义轮播间隔时间等一系列属性和轮播图增加文字显示。
插件jQuery — jQuery+js 实现轮播图 带圆点 箭头 自动 手动 轮播
Mr.Zheng
10-11 3053
网上有很多轮播图代码，有些效果不是很理想，现在分享给各位同学一个源码，效果还可以，仅供参考学习！ 说明：1、需要引入jQuery文件，请自行下载引入。 2、需要添加图片 在这里特意感谢sunny06-17，其上传的代码思路很好。 代码如下： <!DOCTYPE html> <html> <head> <meta charset="ut...
jQ事件与动画效果
Wzc0720的博客
09-21 558
jQ事件与动画效果
jQuery图片轮播
weixin_30639719的博客
12-03 53
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>lb</title> <script src="js/jquery-1.8.3.min.js"></script> <style...
jQuery 轮播图
最新发布
weixin_65127444的博客
01-09 589
【代码】jQuery。
jquery轮播图
软糖妹纸的学习记录
06-28 580
轮播图的原理就是当前的图片集整体上移框架的一个高度，，到达图片界限是返回原高度例子：框架图：jquery代码图:
jQuery轮播图(详细注释)
m0_62816172的博客
12-19 1786
js渣渣也能简单做出 在理想情况下用 吧外层div的class名起为banner ul li的布局 下面是css代码放图片的li记得浮动； .banner { width: 15rem; height: 5.22rem; position: relative; overflow: hidden; } .banner ul { width: 60rem; height: 5.22rem; position: absolute; } .banner ul li { f..
jQuery实现轮播图
qq_58460470的博客
11-21 3898
jQuery动画的显示与隐藏、淡入淡出、滑动效果的常用方法 实现广告图片的轮播展示效果
简单实现jquery轮播图
执 。
05-26 521
首先需要定义个切换图片的方法 function changeimg(a){ $('.imgs li ').eq(a).fadeIn(500).css("transform" ,"scale(1.1)").siblings().fadeOut('slow').css("transform" ,"scale(1.0)"); $('.btn-list li').eq(a).addClass('...
jquery轮播图画廊轮播图幻灯片
12-07
jquery轮播图jquery轮播图图片画廊轮播图幻灯片
Jquery轮播图_Jquery轮播图_
10-01
使用代码运行在网页端实现Jquery对图片进行轮播操作。
jQuery实现轮播图代码
日常笔记/总结/系列知识梳理
12-20 920
一个简单的jQuery轮播图代码，首先，定义了一个slideshow-container的div容器，其中包含了所有轮播图幻灯片。每个幻灯片都包含一个mySlides的类名，并且使用CSS将其隐藏。在showSlides()函数中，遍历所有幻灯片并将它们隐藏，然后显示当前索引的幻灯片。最后，我们使用setTimeout()函数来每隔2秒钟调用showSlides()函数，从而实现了轮播效果。它使事情变得更简单，使用jQuery能够以最小的努力在Web上构建复杂的交互性。
jQuery实现二级下拉菜单
LiRenxian0316的博客
07-08 1890
jQuery实现二级下拉菜单&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;二级下拉菜单&lt;/title&gt; &lt;style&gt; /* 公共样式 */ body,ul,li {
前端--鼠标跟随特效
LiRenxian0316的博客
03-03 1867
鼠标跟随特效个人原创，转载请注明出处里面的内容涉及：Element.setAttribute()，document.createElement()，document.createTextNode()，Element.appendChild()，onmousemove，document.getElementsByTagName,clientX,clientY,document.documentEle...
学生信息管理系统--C语言版
LiRenxian0316的博客
02-25 1481
学生管理系统--C语言版个人原创，转载请注明出处这个学生管理系统是bug的，但是是可以正常运行的，如果要修改学生人数，可以在常量中修改。欢迎各位大神指正和各位朋友的意见！#include &lt;stdio.h&gt; #include &lt;stdlib.h&gt; #include &lt;string.h&gt; #define STU_MAX 2 /*******************...
前端-分享侧面弹出栏
LiRenxian0316的博客
02-25 828
分享侧面弹出栏个人原创，转载请注明出处重发的博客下面是最近写的一个小特效，很适合前端初学者练手，本从也是菜鸟一个。代码中如有不足之处还请大神们指正，谢谢。/*******************************HTML代码**********************************/&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &l...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值