求一个能自动播放,鼠标放上去就暂停播放的jquery插件

aa2012022044 2016-04-25 11:00:43
类似于图中shirt1到shirt5自动滚动,对应的图片自动播放,我想要的插件的功能是在此基础上鼠标放到shirt1到shirt5其中一个tab上能播放对应的图片,而且此时停止播放,直到鼠标离开tab后恢复自动播放。一直找不到这样的插件,麻烦大家帮帮忙,万分感谢!
...全文
293 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
aa2012022044 2016-04-27
  • 打赏
  • 举报
回复
@流水不腐 这段代码真的实现起来跟jquery差不多,就是有个小问题,自动播放的时候会闪一下,怎么解决这个问题呢,让它不闪,多谢。
aa2012022044 2016-04-27
  • 打赏
  • 举报
回复
太厉害了你们,多谢!
Justin Woo 2016-04-26
  • 打赏
  • 举报
回复
看到LZ的这个提问,我就把它当做练习题,自己用来练练手学习学习 作为新手,觉得特效要求不是很高的都可以自己尝试, 所以最后还是没有回答LZ问题,顺便水了一下!!!!

<!Doctype Html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="expires" content="Thursday 10 December 2020 00:00 GMT" />
    <meta name="keywords" content="" >
    <meta name="description" content="" >
    <title>test html</title>
    <style>
		* { padding: 0; margin: 0;}
		ul,li { list-style: none;}
		
		#demoWrap { width: 770px; height: 391px; border: 1px solid #eee; margin: 100px auto;}
		#demoHeader { height: 50px; background: #e0edff; border-bottom: 1px solid #acb8c8;}
		#demoHeader .demoTab1 { height: 46px; padding-top: 4px;}
		#demoHeader .demoTab1 li { width: 90px; height: 45px; font: 16px/45px Arial, Helvetica, sans-serif; text-align: center; margin-left: 8px; float: left; -webkit-border-top-left-radius: 7px; -moz-border-top-left-radius: 7px; border-top-left-radius: 7px; border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; -moz-border-top-right-radius: 7px; border-top-right-radius: 7px; border-top-right-radius: 7px; border: 1px solid #acb8c8;}
		#demoHeader .demoTab1 li.actived { background: #fff; border-bottom-color: #fff;}		
		
		#demoCon { height: 340px;}
		#demoCon .demoTab2 { width: 770px; height: 340px;}
		#demoCon .demoTab2 li { -moz-opacity: 0; -webkit-opacity: 0; opacity: 0; z-index: -1; width: 770px; height: 340px; position: absolute; transition: opacity 300ms; -moz-transition: opacity 300ms; -webkit-transition: opacity 300ms; -o-transition: opacity 300ms;}
		#demoCon .demoTab2 li.actived { -moz-opacity: 1; -webkit-opacity: 1; opacity: 1; z-index: 1;}
		
	</style>
</head>

<body>

<div id="demoWrap">
	<div id="demoHeader">
    	<ul class="demoTab1">
        	<li>Shirt1</li>
        	<li>Shirt2</li>
        	<li>Shirt3</li>
        	<li>Shirt4</li>
        	<li>Shirt5</li>
        </ul>
    </div>
    <div id="demoCon">
    	<ul class="demoTab2">
        	<li>
            	<br>
            	11111111111111111111111111111
            </li>
        	<li>
            	<br>
            	22222222222222222222222222222
            </li>
        	<li>
            	<br>
                33333333333333333333333333333
            </li>
        	<li>
            	<br>
                44444444444444444444444444444
            </li>
        	<li>
            	<br>
                55555555555555555555555555555
            </li>
        </ul>
    </div>
</div>

<script type="text/javascript" language="javascript">
	var tab1=document.getElementsByClassName('demoTab1')[0].children;
	var tab2=document.getElementsByClassName('demoTab2')[0].children;
	var num=1;
	function tab1Turn(){
		if(num==tab1.length){num=0}
		for(i=0;i<tab1.length;i++){
			tab1[i].setAttribute('class','');
			tab2[i].setAttribute('class','')
		}
		tab1[num].setAttribute('class','actived');
		tab2[num].setAttribute('class','actived');
		num++;
	}
	tab1[0].setAttribute('class','actived');
	tab2[0].setAttribute('class','actived');
	var myturn=setInterval(tab1Turn,4000);
	for(j=0;j<tab1.length;j++){
		tab1[j].onmouseover = tab2[j].onmouseover = (function(x){
			return function(){
				clearInterval(myturn);
				num=x;
				tab1Turn();
			}
		})(j)
		tab1[j].onmouseout = tab2[j].onmouseout = function(){
			myturn=setInterval(tab1Turn,4000);
		}
	}	
</script>
</body>
</html>
啊仇 2016-04-26
  • 打赏
  • 举报
回复
吧点击播放的那个按钮的时间改成mouseover 应该就可以了吧 。

87,899

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧