带标题和描述的JS幻灯片特效

<script  type="text/javascript">
//选择器
function $a(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}

//焦点滚动图 点击移动
function movec()
{
    var o=$a("bd1lfimg","");
    var oli=$a("bd1lfimg","dl");
    var oliw=oli[0].offsetWidth; //每次移动的宽度
    var ow=o.offsetWidth-2;
    var dnow=0; //当前位置
    var olf=oliw-(ow-oliw+10)/2;
        o["scrollLeft"]=olf+(dnow*oliw);
    var rqbd=$a("bd1lfsj","ul")[0];
    var extime;

    <!--for(var i=1;i<oli.length;i++){rqbd.innerHTML+="<li>"+i+"</li>";}-->
    var rq=$a("bd1lfsj","li");
    for(var i=0;i<rq.length;i++){reg(i);};
    oli[dnow].className=rq[dnow].className="show";
    var wwww=setInterval(uu,2000);

    function reg(i){rq[i].onclick=function(){oli[dnow].className=rq[dnow].className="";dnow=i;oli[dnow].className=rq[dnow].className="show";mv();}}
    function mv(){clearInterval(extime);clearInterval(wwww);extime=setInterval(bc,15);wwww=setInterval(uu,8000);}
    function bc()
    {
        var ns=((dnow*oliw+olf)-o["scrollLeft"]);
        var v=ns>0?Math.ceil(ns/10):Math.floor(ns/10);
        o["scrollLeft"]+=v;if(v==0){clearInterval(extime);oli[dnow].className=rq[dnow].className="show";v=null;}
    }
    function uu()
    {
        if(dnow<oli.length-2)
        {
            oli[dnow].className=rq[dnow].className="";
            dnow++;
            oli[dnow].className=rq[dnow].className="show";
        }
        else{oli[dnow].className=rq[dnow].className="";dnow=0;oli[dnow].className=rq[dnow].className="show";}
        mv();
    }
    o.onmouseover=function(){clearInterval(extime);clearInterval(wwww);}
    o.onmouseout=function(){extime=setInterval(bc,15);wwww=setInterval(uu,8000);}
}

</script>
时间: 2024-10-29 14:02:43

带标题和描述的JS幻灯片特效的相关文章

支持移动手机的响应式产品展示幻灯片特效

在线预览   源码下载 Mono是一款支持移动手机的响应式产品展示js幻灯片特效.该特效在每一个幻灯片slide中展示一个产品大图,以及产品的名称,并且每一个幻灯片slide的背景颜色可以进行平滑的切换过渡.它的特点还有: 响应式.支持视口大于320像素的浏览器. 支持移动手机. 跨浏览器.在IE8和IE9浏览器中,该特效会自动进行回退.你可以使用respond.js来是该特效在IE8中使用 media query. 使用简单. Mono是Sequence.js的一个主题.Sequence.js

js 时钟特效

时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的canvas标签实现的 款式一 借助jQuery插件实现 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="

15款jQuery带缩略图的图片轮播切换特效代码

JQuery宽屏电影大图幻灯片轮播切换代码 jquery带文字缩略图的图片轮播切换代码 jQuery OwlCarousel图片滚动插件世界杯图片轮播滚动代码 jQuery仿中国建设银行带缩略图控制滚动图片轮播切换 jquery图片滑动切换效果左右按钮控制图片滑动轮播切换效果 jQuery幻灯片插件可自动轮播和暂停的图片幻灯片代码 jQuery带缩略图的焦点图代码_带标题的焦点图代码 jquery图片轮播插件带小缩略图片的焦点图切换效果代码 原生js图片插件缩略图片控制大图淡出淡进切换支持图片轮

基于jQuery仿迅雷影音官网幻灯片特效

分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrapper"> <div id="content" class="content"> <div class="s_arr"> <a class=&quo

基于jQuery带标题的图片3D切换焦点图

今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 在线预览   源码下载 实现的代码. html代码: <div id="wowslider-container"> <div class="ws_images"> <ul> <li><a href="#"> &

超酷不同风格页面布局幻灯片特效

这是一款效果非常炫酷的不同风格页面布局幻灯片特效.该特效中,通过前后导航按钮来切换幻灯片,每个幻灯片中的图片均为不同的布局效果. 在线预览   源码下载 该幻灯片特效使用anime.js来制作幻灯片的动画特效,并使用很多CSS3属性,需要最新版本的现代浏览器才能看到效果.对于IE浏览器,前面几种效果可以在IE11及以上的浏览器看到效果,最后一种效果由于IE浏览器不支持SVG clip-path属性,所以是看不到效果的. 使用方法 HTML结构 该幻灯片的基本HTML结构如下:每一个幻灯片都有各自

幻灯片特效

开篇先来个简单的,写一个幻灯片特效. 效果图: 这是这个例子中完整的代码: html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

HTML5 canvas炫酷棱镜效果的幻灯片特效

这是一款效果非常炫酷华丽的HTML5 canvas带棱镜效果的幻灯片特效.这个特效在每一个幻灯片的前面放置一个图形,并将图形制作为三棱镜效果,它底下的幻灯片图片会被"折射"到棱镜上面,形成一种棱镜折射效果. 所有的现代浏览器都支持这个幻灯片特效,包括IE9. 效果演示:http://www.htmleaf.com/Demo/201504011607.html 下载地址:http://www.htmleaf.com/html5/html5-canvas/201504011606.html

网页标题随机显示名言JS代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-