在之前的文章 [jQuery 如何实现焦点图轮播效果?(代码示例一) https://www.html.cn/web/javascript/17467.html ] 介绍了一种使用 jQuery 实现焦点图轮播效果的方法. 下面本篇文章给大家介绍另一种使用 jQuery 实现的焦点图轮播效果.
JQ 实现焦点图轮播效果 (二)
效果图:
图片素材 :
左右按钮素材 (icon.PNG) :
左右按钮 IE6 版本素材 (icon_ie6.PNG):
代码如下, 复制即可使用:
- (不过里面的 JQ 路径和图片路径需要自己改成自己的 JQ 路径和图片路径, 否则是没有效果显示的哦)
- (适用浏览器: IE8,360,Firefox,Chrome,Safari,Opera, 傲游, 搜狗, 世界之窗.)
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- JQ 实现焦点图轮播效果 (二)
- </title>
- <!-- 此处需要改为自己的 JQ 路径 -->
- <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js">
- </script>
- <style>
- /* CSS Document */ body, ul, li { padding: 0; margin: 0; } ul, li { list-style:
- none; } img { border: none; } a { color: #6cf; } a:hover { color: #84B263;
- } .box { width: 980px; margin: 0 auto; position: relative; overflow: hidden;
- _height: 100%; } .picbox { width: 980px; height: 115px; overflow: hidden;
- position: relative; } .piclist { height: 115px; position: absolute; left:
- 0px; top: 0px } .piclist li { background: #eee; margin-right: 20px; padding:
- 5px; float: left; } .swaplist { position: absolute; left: -3000px; top:
- 0px } /* 这里需要改成自己的图片路径 */ .og_prev, .og_next { width: 30px; height: 50px;
- background: url(icon.PNG) no-repeat; background: url(icon_ie6.PNG) no-repeat\9;
- position: absolute; top: 33px; z-index: 99; cursor: pointer; filter: alpha(opacity=70);
- opacity: 0.7; } .og_prev { background-position: 0 -60px; left: 4px; } .og_next
- { background-position: 0 0; right: 4px; }
- </style>
- </head>
- <body>
- <div style="margin-top:50px;">
- <div>
- <ul class="piclist mainlist">
- <!-- 此处需要改为自己的图片路径 -->
- <li>
- <a href="#" target="_blank">
- <img src="1.jpg" width="220" height="105" />
- </a>
- </li>
- <li>
- <a href="#" target="_blank">
- <img src="2.jpg" />
- </a>
- </li>
- <li>
- <a href="#" target="_blank">
- <img src="3.jpg" />
- </a>
- </li>
- <li>
- <a href="#" target="_blank">
- <img src="4.jpg" />
- </a>
- </li>
- <li>
- <a href="#" target="_blank">
- <img src="1.jpg" />
- </a>
- </li>
- <li>
- <a href="#" target="_blank">
- <img src="2.jpg" />
- </a>
- </li>
- <li>
- <a href="#" target="_blank">
- <img src="3.jpg" />
- </a>
- </li>
- <li>
- <a href="#" target="_blank">
- <img src="4.jpg" />
- </a>
- </li>
- </ul>
- <ul class="piclist swaplist">
- </ul>
- </div>
- <div>
- </div>
- <div>
- </div>
- </div>
- <script>
- // JavaScript Document
- $(document).ready(function(e) {
- /*** 不需要自动滚动, 去掉即可 ***/
- time = Windows.setInterval(function() {
- $('.og_next').click();
- },
- 5000);
- /*** 不需要自动滚动, 去掉即可 ***/
- linum = $('.mainlist li').length; // 图片数量
- w = linum * 250; //ul 宽度
- $('.piclist').CSS('width', w + 'px'); //ul 宽度
- $('.swaplist').HTML($('.mainlist').HTML()); // 复制内容
- $('.og_next').click(function() {
- if ($('.swaplist,.mainlist').is(':animated')) {
- $('.swaplist,.mainlist').stop(true, true);
- }
- if ($('.mainlist li').length > 4) { // 多于 4 张图片
- ml = parseInt($('.mainlist').CSS('left')); // 默认图片 ul 位置
- sl = parseInt($('.swaplist').CSS('left')); // 交换图片 ul 位置
- if (ml <= 0 && ml > w * -1) { // 默认图片显示时
- $('.swaplist').CSS({
- left: '1000px'
- }); // 交换图片放在显示区域右侧
- $('.mainlist').animate({
- left: ml - 1000 + 'px'
- },
- 'slow'); // 默认图片滚动
- if (ml == (w - 1000) * -1) { // 默认图片最后一屏时
- $('.swaplist').animate({
- left: '0px'
- },
- 'slow'); // 交换图片滚动
- }
- } else { // 交换图片显示时
- $('.mainlist').CSS({
- left: '1000px'
- }) // 默认图片放在显示区域右
- $('.swaplist').animate({
- left: sl - 1000 + 'px'
- },
- 'slow'); // 交换图片滚动
- if (sl == (w - 1000) * -1) { // 交换图片最后一屏时
- $('.mainlist').animate({
- left: '0px'
- },
- 'slow'); // 默认图片滚动
- }
- }
- }
- }) $('.og_prev').click(function() {
- if ($('.swaplist,.mainlist').is(':animated')) {
- $('.swaplist,.mainlist').stop(true, true);
- }
- if ($('.mainlist li').length > 4) {
- ml = parseInt($('.mainlist').CSS('left'));
- sl = parseInt($('.swaplist').CSS('left'));
- if (ml <= 0 && ml > w * -1) {
- $('.swaplist').CSS({
- left: w * -1 + 'px'
- });
- $('.mainlist').animate({
- left: ml + 1000 + 'px'
- },
- 'slow');
- if (ml == 0) {
- $('.swaplist').animate({
- left: (w - 1000) * -1 + 'px'
- },
- 'slow');
- }
- } else {
- $('.mainlist').CSS({
- left: (w - 1000) * -1 + 'px'
- });
- $('.swaplist').animate({
- left: sl + 1000 + 'px'
- },
- 'slow');
- if (sl == 0) {
- $('.mainlist').animate({
- left: '0px'
- },
- 'slow');
- }
- }
- }
- })
- });
- $(document).ready(function() {
- $('.og_prev,.og_next').hover(function() {
- $(this).fadeTo('fast', 1);
- },
- function() {
- $(this).fadeTo('fast', 0.7);
- })
- })
- </script>
- </body>
- </HTML>
更多 Web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/javascript/17468.html