jquery实现图片轮播实践案例

加入收藏设为首页

程序人生: jquery实现图片轮播实践案例
时间：2020/12/13 6:26:25 作者：枫叶来源：solgle.com 查看：408 评论：0
内容摘要：以前很多网站都采用flash，目前flash兼容性比较差，所以基本都用jquery来实现。首先肯定是要导入样式，具体尺寸大小可根据需要调整，本次所用的css代码如下： .bannerImgA01 { position: relative; overflow: aut...

以前很多网站都采用flash，目前flash兼容性比较差，所以基本都用jquery来实现。

首先肯定是要导入样式，具体尺寸大小可根据需要调整，本次所用的css代码如下：

<style>

.bannerImgA01 { position: relative; overflow: auto; text-align: center;}

.bannerImgA01 li { list-style: none; }

.bannerImgA01 ul li { float: left; }

#b05 { width: 290px;}

#b05 .dots { position: absolute; left: 0; right: 0; bottom: 20px;}

#b05 .dots li

{

display: inline-block;

width: 10px;

height: 10px;

margin: 0 4px;

text-indent: -999em;

border: 2px solid #fff;

border-radius: 6px;

cursor: pointer;

opacity: .4;

-webkit-transition: background .5s, opacity .5s;

-moz-transition: background .5s, opacity .5s;

transition: background .5s, opacity .5s;

}

#b05 .dots li.active

{

background: #fff;

opacity: 1;

}

#b05 .arrow { position: absolute; top: 100px;}

#b05 #al { left: 15px;}

#b05 #ar { right: 15px;}

</style>

这里有两个比较重要的js需要导入

<script language='javascript' type='text/javascript' src='jquery-1.11.1.min.js'></script>

<script language='javascript' type='text/javascript' src='unslider.min.js'></script>

<script language='javascript' type='text/javascript' >

//图片轮播的关键js

$(document).ready(function(e) {

var unslider05 = $('#b05').unslider({

dots: true

}),

data05 = unslider05.data('unslider');

$('.unslider-arrow05').click(function() {

var fn = this.className.split(' ')[1];

//data05('unslider')[fn](); /* 注释：这段代码有误，使用下面的 */

data05[fn]();

});

/* //以下三个方法可以不用或者先屏蔽，本次实例不采用按钮功能

$("#stop").click(function() {

data05.stop();

});

$("#start").click(function() {

data05.start();

});

$("#move").click(function() {

data05.move(1, function() {});

}); */

});

</script>



<div class="bannerImgA01" id="b05">

<ul>

<li><a href="http://www.solgle.com/news/393.html" ><img src="1.jpg" alt="" width="290" height="240" ></a>

<a href="http://www.solgle.com/news/393.html" >打卡一个网红地——甘海子，把枫叶带回家</a>

</li>

<li><a href="http://www.solgle.com/news/346.html" ><img src="2.jpg" alt="" width="290" height="240" ></a>

<a href="http://www.solgle.com/news/346.html" >这个秋天，漫步在五彩斑斓的松坪沟</a>

</li>

<li><a href="http://www.solgle.com/news/392.html" ><img src="3.jpg" alt="" width="290" height="240" ></a>

<a href="http://www.solgle.com/news/392.html" >毕棚沟，在这个秋天干一次扫黄</a>

</li>

<li><a href="http://www.solgle.com/news/391.html" ><img src="4.jpg" alt="" width="290" height="240" ></a>

<a href="http://www.solgle.com/news/391.html" >这里是稻城亚丁——小众化旅游的记忆</a>

</li>

<li><a href="http://www.solgle.com/news/383.html" ><img src="5.jpg" alt="" width="290" height="240" ></a>

<a href="http://www.solgle.com/news/383.html" >90%的人不懂得投资的意义</a>

</li>

</ul>



<a href="javascript:void(0);" class="unslider-arrow05 prev"><img class="arrow" id="al" src="arrowl.png" alt="prev" width="15" height="30"></a>

<a href="javascript:void(0);" class="unslider-arrow05 next"><img class="arrow" id="ar" src="arrowr.png" alt="next" width="15" height="32"></a>

</div>

以上就是案例实现的关键代码

案例展示页面：请到本网站首页查看

相关js复制后自己保存到相应目录
jquery-1.11.1.min.js
unslider.min.js

标签：jquery图片轮播实践


solgle.com 版权所有，欢迎分享！！！

上一篇：点击右下角按钮回到页面顶部实例
下一篇：话说银行数据仓库的概论

相关文章

相关评论

本类更新

5-18
百度地图车机版v5.0.1.6版本安装下载
6-24
Java webservice Response传递XML字符串被转义
5-8
java main 方法参数传递执行
12-25
弃用微博评论箱，加载股票组合的更新
12-13
点击右下角按钮回到页面顶部实例
12-13
jquery实现图片轮播实践案例
6-15
话说银行数据仓库的概论
6-9
关于批量的解读
4-27
java EE框架Spring Aop使用案例
4-26
java EE spring框架loC使用案例

本类推荐

本类排行

: 国家数据 | 中证指数 | Oracle官方文档 | 沪深行情 | 流量统计 | 深交所 | 上交所 | 中国证券登记 | 同业拆放利率 | 巨潮资讯 | 指数估值 | 看财报 |

联系我们 - 关于我们 - 网站同盟