两个基于jQuery的渐隐渐显图片轮换幻灯片
- <!DOCTYPE html>
- <html>
- <head>
- <title>两个基于jQuery的渐隐渐显图片轮换幻灯片</title>
- <style>
- div,ul, ol, li, h1,h2, p{margin:0;padding:0}
- body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑"; line-height:1.2}
- a{color:#047;text-decoration:none}
- a:hover{color:#a40000;text-decoration:none}
- h1{font-size:1em; font-weight:normal; line-height:1.8em}
- h1 a{background:#CFF; padding:2px 3px; text-decoration:none}
- h1 a:hover{background:#eee; text-decoration:underline}
- h2{font-size:1em; font-weight:normal; color:#a40000; margin:1em auto}
- ul,li{list-style:none}
- /*第一个幻灯样式*/
- #i_focus{width:460px; height:231px;background:#eee; padding:5px 5px 0 5px; margin:0 auto }
- #i_focus_pic{width:376px; height:226px;display:inline; position:relative;float:left;overflow:hidden}
- #i_focus_piclist { position:absolute}
- #i_focus_piclist li { width:378px; height:226px; overflow:hidden; display:none}
- #i_focus_piclist img { width:374px; height:224px; border:1px solid #fff}
- #i_focus_btn {float:right; width:77px}
- #i_focus_btn li {cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)}
- #i_focus_btn img { width:75px; height:70px; border:1px solid #fff; margin-bottom:2px}
- #i_focus_btn .i_cur {opacity:1; -moz-opacity:1; filter:alpha(opacity=100)}
- #i_focus_opdiv { position:absolute; left:0; bottom:0; width:374px; height:40px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); border:1px solid #fff; border-top:0}
- #i_focus_tx span{font-family:"微软雅黑"; font-size:16px; font-weight:bold; line-height:22px; display:block}
- #i_focus_tx { position:absolute; left:8px; bottom:2px; color:#FFF}
- #i_focus_tx .normal {display:none}
- /*第二个幻灯样式*/
- .slides { position:relative; overflow:hidden; width:704px; height:250px; border:5px solid #eee; margin:0 auto }
- .slide-pic{ overflow:hidden;width:703px}
- .slide-pic img{ width:701px; height:248px;border:1px solid #E4E4E4}
- .slide-pic li { display:none}
- .slide-pic li.cur { display:block}
- .slide-li { position:absolute; left:0; bottom:0; }
- .slide-li li { float:left; width:175px; height:30px; line-height:30px; margin-right:1px; text-align:center}
- .slide-li a:visited,.slide-li a:link { display:block; width:174px; height:30px; font-size:14px; color:#FFF}
- .slide-li .cur a:visited, .slide-li .cur a:link, .slide-li a:hover { color:#333; text-decoration:none}
- .op li { background:#666; opacity: 0.6; filter:alpha(opacity=60)}
- .op li.cur { background:#FFF}
- .slide-txt span { display:none}
- </style>
- </head>
- <body class="box">
- <h2>两个基于jQuery的渐隐渐显图片轮换幻灯片——如果不运行请刷新页面</h2>
- <!--*第一个幻灯*-->
- <div id="i_focus">
- <div id="i_focus_pic">
- <ul id="i_focus_piclist" style="left:0; top:0;">
- <li><a href="#" target="_blank"><img src="https://www.wenjiangs.com/wp-content/uploads/chinaunix/202207/e9a920bea5486e6e46bdcf249f6eec6fa20d4c21_m.jpg" alt="提示" /></a></li>
- <li><a href="#" target="_blank"><img src="https://www.wenjiangs.com/wp-content/uploads/chinaunix/202207/a5ab9199c2e8cf2d608134ebbed8e110c5447597_m.jpg" alt="提示" /></a></li>
- <li><a href="#" target="_blank"><img src="https://www.wenjiangs.com/wp-content/uploads/chinaunix/202207/a42d5ab0d6ed4d87c4e3ea262363519173e1068b_m.jpg" alt="提示" /></a></li>
- </ul>
- <div id="i_focus_opdiv"></div>
- <!--slide大图374*224-->
- <ul id="i_focus_tx">
- <li class="normal"><span>Springs Best Accessories</span>The 7 key trends for the season b2</li>
- <li class="normal"><span>HAHA OHOH</span>THINK EVERY DAY</li>
- <li class="normal"><span>Okay okay okay okay</span>scrip jquery ue seo</li>
- </ul>
- </div>
- <!--slide右侧小缩略图75*70-->
- <ul id="i_focus_btn">
- <li class="i_cur" id="p0"><img src="https://www.wenjiangs.com/wp-content/uploads/chinaunix/202207/e9a920bea5486e6e46bdcf249f6eec6fa20d4c21_m.jpg" alt="提示" /></li>
- <li id="p1"><img src="https://www.wenjiangs.com/wp-content/uploads/chinaunix/202207/a5ab9199c2e8cf2d608134ebbed8e110c5447597_m.jpg" alt="提示" /></li>
- <li id="p2"><img src="https://www.wenjiangs.com/wp-content/uploads/chinaunix/202207/a42d5ab0d6ed4d87c4e3ea262363519173e1068b_m.jpg" alt="提示" /></li>
- </ul>
- </div>
- <!--//end-->
- <br />
- <!--*第二个幻灯*-->
- <div class="slides">
- <ul class="slide-pic">
- <li><a href="#"><img src="https://www.wenjiangs.com/wp-content/uploads/chinaunix/202207/b2431f3432bcee4c0358fcb3bf8103c1288e70c3_m.jpg" alt="Modified@Mr.Think" /></a></li>
- <li class="cur"><a href="#"><img src="https://www.wenjiangs.com/wp-content/uploads/chinaunix/202207/0d3a093594c71b7c969a247b7a18306abd6175f2_m.jpg" alt="专注前端技术" /></a></li>
- <li><a href="#"><img src="https://www.wenjiangs.com/wp-content/uploads/chinaunix/202207/0d3a093594c71b7c969a247b7a18306abd6175f2_m.jpg" alt="天边夕阳再次映上" /></a></li>
- <li><a href="#"><img src="https://www.wenjiangs.com/wp-content/uploads/chinaunix/202207/c80f38277bc3cf89be3c76cefebdc608c6fe512d_m.jpg" alt="曾梦想仗剑走天涯" /></a></li>
- </ul>
- <ul class="slide-li op">
- <li></li>
- <li class="cur"></li>
- <li></li>
- <li></li>
- </ul>
- <ul class="slide-li slide-txt">
- <li><a href="#">Modified@Mr.Think</a></li>
- <li class="cur"><a href="#">专注前端技术</a></li>
- <li><a href="#">天边夕阳再次映上</a></li>
- <li><a href="#">曾梦想仗剑走天涯</a></li>
- </ul>
- </div>
- <!--//end-->
- <script src="/ajaxjs/jquery1.3.2.js"></script>
- <script>
- $(document).ready(function() {
- var i_curIndex = 0;
- var beauBeauSlide; //函数对象
- var i_curID = 0; //取得鼠标下方的对象ID
- var pictureID = 0; //索引ID
- $("#i_focus_piclist li").eq(0).show(); //默认
- autoScroll();
- $("#i_focus_btn li").hover(function() {
- StopScrolll();
- $("#i_focus_btn li").removeClass("i_cur") //所有的li去掉当前的样式加上正常的样式
- $(this).addClass("i_cur"); //而本身则加上当前的样式去掉正常的样式
- i_curID = $(this).attr("id"); //取当前元素的ID
- pictureID = i_curID.substring(i_curID.length - 1); //取最后一个字符
- $("#i_focus_piclist li").eq(pictureID).fadeIn("slow"); //本身显示
- $("#i_focus_piclist li").not($("#i_focus_piclist li")[pictureID]).hide(); //除了自身别的全部隐藏
- $("#i_focus_tx li").hide();
- $("#i_focus_tx li").eq(pictureID).show();
- },
- function() {
- //当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步
- i_curID = $(this).attr("id"); //取当前元素的ID
- pictureID = i_curID.substring(i_curID.length - 1); //取最后一个字符
- i_curIndex = pictureID;
- autoScroll();
- });
- //自动滚动
- function autoScroll() {
- $("#i_focus_btn li:last").removeClass("i_cur");
- $("#i_focus_tx li:last").hide();
- $("#i_focus_btn li").eq(i_curIndex).addClass("i_cur");
- $("#i_focus_btn li").eq(i_curIndex - 1).removeClass("i_cur");
- $("#i_focus_tx li").eq(i_curIndex).show();
- $("#i_focus_tx li").eq(i_curIndex - 1).hide();
- $("#i_focus_piclist li").eq(i_curIndex).fadeIn("slow");
- $("#i_focus_piclist li").eq(i_curIndex - 1).hide();
- i_curIndex++;
- i_curIndex = i_curIndex >= 3 ? 0 : i_curIndex;
- beauBeauSlide = setTimeout(autoScroll, 2000);
- }
- function StopScrolll() //当鼠标移动到对象上面的时候停止自动滚动
- {
- clearTimeout(beauBeauSlide);
- }
- });
- //第二个渐隐幻灯开始
- var defaultOpts = {
- interval: 3000,
- fadeInTime: 300,
- fadeOutTime: 200
- };
- var _titles = $("ul.slide-txt li");
- var _titles_bg = $("ul.op li");
- var _bodies = $("ul.slide-pic li");
- var _count = _titles.length;
- var _current = 0;
- var _intervalID = null;
- var stop = function() {
- window.clearInterval(_intervalID);
- };
- var slide = function(opts) {
- if (opts) {
- _current = opts.current || 0;
- } else {
- _current = (_current >= (_count - 1)) ? 0 : (++_current);
- };
- _bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime,
- function() {
- _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);
- _bodies.removeClass("cur").eq(_current).addClass("cur");
- });
- _titles.removeClass("cur").eq(_current).addClass("cur");
- _titles_bg.removeClass("cur").eq(_current).addClass("cur");
- }; //endof slide
- var go = function() {
- stop();
- _intervalID = window.setInterval(function() {
- slide();
- },
- defaultOpts.interval);
- }; //endof go
- var itemMouseOver = function(target, items) {
- stop();
- var i = $.inArray(target, items);
- slide({
- current: i
- });
- }; //endof itemMouseOver
- _titles.hover(function() {
- if ($(this).attr('class') != 'cur') {
- itemMouseOver(this, _titles);
- } else {
- stop();
- }
- },
- go);
- //_titles_bg.hover(function() { itemMouseOver(this, _titles_bg); }, go);
- _bodies.hover(stop, go);
- go();
- var slideX = {
- _this: $('.catalog .imgbox'),
- _btnLeft: $('.catalog .left'),
- _btnRight: $('.catalog .right'),
- init: function() {
- slideX._btnLeft.click(slideX.slideLeft);
- slideX._btnRight.click(slideX.slideRight);
- },
- slideLeft: function() {
- slideX._btnLeft.unbind('click', slideX.slideLeft);
- for (i = 0; i < 2; i++) {
- slideX._this.find('li:last').prependTo(slideX._this);
- }
- slideX._this.css('marginLeft', -224);
- slideX._this.animate({
- 'marginLeft': 0
- },
- 500,
- function() {
- slideX._btnLeft.bind('click', slideX.slideLeft);
- });
- return false;
- },
- slideRight: function() {
- slideX._btnRight.unbind('click', slideX.slideRight);
- slideX._this.animate({
- 'marginLeft': -224
- },
- 500,
- function() {
- slideX._this.css('marginLeft', '0');
- for (i = 0; i < 2; i++) {
- slideX._this.find('li:first').appendTo(slideX._this)
- }
- slideX._btnRight.bind('click', slideX.slideRight);
- });
- return false;
- }
- }
- $(document).ready(function() {
- slideX.init();
- })
- $(document).ready(function() {
- var newTime = new Date();
- var newTime = newTime.getTime();
- var $imgTmp = $('#topromotion').find('img:first');
- var osrc = $imgTmp.attr('src');
- $imgTmp.attr('src', osrc + '?' + newTime);
- });
- </script>
- </body>
- </html>
复制代码
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论