gpt4 book ai didi

JQuery - 在悬停时循环从左到右移动图像

转载 作者:行者123 更新时间:2023-11-28 01:30:08 25 4
gpt4 key购买 nike

为了用 JQuery 制作一个旋转的轮播,我正在尝试编写一个脚本,如果您将鼠标悬停在一个元素上,该元素中的图像将在无限循环中从左向右移动。

我已经一半用下面的代码实现了目标,但是它没有循环,它总是向左。我怎样才能使这段代码工作?

var $content = $('#contS'); // Cache your selectors!
$(".cont").hover( function loop() {
$content.stop().animate({
marginLeft: '-=20'
}, 50, 'linear', loop);
}, function stop() {
$content.stop();
});
@font-face {
font-family: 'fira';
src: url('../font/fira-webfont.eot');
src: url('../font/fira-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/fira-webfont.woff') format('woff'),
url('../font/fira-webfont.ttf') format('truetype'),
url('../font/fira-webfont.svg#abril_fatfaceregular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-color:white;
height:100%;
width:100%;
padding:0px;
margin:0px;
font-family:'Lato', sans-serif !important;
}
ul {
list-style-type:none;
padding:0px;
margin:0px;
}
.hde img {
width:80px;
margin:18px 0px;
}
#content {
margin-top:10px;
float:left;
width:100%;
}
#content img {
width:100%;
}
li {
float:left;
}
.Homepage, .bgpink {
background-color:#ff2c7e !important;
color:White;
}
.Layout {
float:left;
width:100%;
}
h1 {
margin-top: 20%;
left: 0px;
text-align: left;
font-weight: bold;
letter-spacing: 1px;
font-family:'Lato', sans-serif !important;
color:#ffffcc;
}
.bottom_div {
text-align:left;
width:100%;
}
.logo_on_homepage {
margin-top:400px;
text-align:center;
color:White;
}
.logo_on_homepage img {
max-width: 188px;
margin-bottom: 10px;
margin-left: -3px;
}
.navigation ul li a {
color:White !important;
border:1px solid #ff2c7e;
border-radius:6px;
font-size:13px;
}
.navigation ul li a {
margin:0px 1px;
padding: 5px 11px;
}
a:hover {
text-decoration:none;
}
.navigation {
margin: 0px auto;
width: 100%;
text-align: center;
max-width: 233px;
margin-top: 8px;
font-size: 18px;
}
.navigation ul li a:hover {
border:1px solid #ffffff !important;
border-radius:6px;
}
.copyright {
vertical-align: 0px;
margin-top: 7px;
margin-left: 15px;
font-size: 12px;
letter-spacing: 0.2px;
display: inline-block;
}
.bottom_div ul li a img {
width:26px;
vertical-align:top !important;
}
.linkedinicon {
width:26px;
}
.fbicon {
width: 17px !important;
margin-top: 5px;
}
/*----------------------------stories--------------------------------------*/
.container {
width:90%;
margin:0px auto;
}
.WholeView {
overflow:hidden;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.08);
-o-box-shadow:0 1px 2px rgba(0, 0, 0, 0.08);
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.08);
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.08);
-ms-box-shadow:0 1px 2px rgba(0, 0, 0, 0.08);
width:100%;
margin-top:0px;
padding:0px;
height:auto;
}
/*.WholeView:hover
{
border-bottom:1px solid #ff2c7e;
transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-ms-transition:all 0.5s;
}*/
.LogoMid {
text-align: center;
margin-top: 21px;
margin-bottom: 5px;
margin-left: 35px;
}
a {
text-decoration:none !important;
}
.CommonNavigation {
width: auto;
margin: 0px auto;
font-size: 14px;
margin: 4px auto;
display: table;
margin-top: 9px;
}
.CommonNavigation ul li {
text-align: center;
margin: 0px 0px;
padding-bottom: 23px;
font-size: 14px;
}
.CommonNavigation ul li a {
color:#ff2c7e;
}
.active {
font-weight:bold;
}
.ImageSec {
cursor:pointer;
}
.ImageSec img {
width: 100%;
}
.WholeView h3 {
font-size: 14px;
text-align: center;
line-height: 18px;
text-transform: uppercase;
color: #333333;
display: inline-block;
width:100%;
min-height:45px;
}
.OverlaySec {
cursor: pointer;
background-size:100%;
z-index: 9999;
display:none;
}
/*
.img1hover
{
background-image: url(../img/work/1hover.png);
}
.img2hover
{
background-image: url(../img/work/2hover.png);
}
.img3hover
{
background-image: url(../img/work/3hover.png);
}
.img4hover
{
background-image: url(../img/work/4hover.png);
}
.img5hover
{
background-image: url(../img/work/5hover.png);
}
.img6hover
{
background-image: url(../img/work/6hover.png);
}
.img7hover
{
background-image: url(../img/work/7hover.png);
}

.img8hover
{
background-image: url(../img/work/1hover.png);
}
.img9hover
{
background-image: url(../img/work/9hover.png);
}
.img10hover
{
background-image: url(../img/work/10hover.png);
}
.img11hover
{
background-image: url(../img/work/11hover.png);
}
.img12hover
{
background-image: url(../img/work/12hover.png);
}
*/
.CircleBox {
height: 70px;
width: 70px;
margin: 0px auto;
margin-top: 39%;
background-image: url(../img/thumb.png);
background-size: 60px;
background-position: center;
background-repeat:no-repeat;
}
.Start {
text-align:center;
}
.always {
display: none;
position: fixed;
background-color: white;
}
.Total {
float:left;
width:100%;
margin-bottom:20px;
}
.dnn {
opacity:0;
transition:all 0.5s;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
-ms-transition:all 0.5s;
}
.dbb {
opacity:1;
transition:all 0.5s;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
-ms-transition:all 0.5s;
}
.kkkw {
float: left;
width: 100%;
background-color: white;
z-index: 999999;
}
.kkkwFn {
margin: 0px auto;
text-align: center;
left: 50%;
margin-left: 0px;
z-index: 999999;
}
.bgw {
width: 100%;
background-color: White;
float: left;
position: fixed;
z-index: 999999;
box-shadow:0 0 6px rgba(0, 0, 0, 0.25);
-o-box-shadow:0 0 6px rgba(0, 0, 0, 0.25);
-moz-box-shadow:0 0 6px rgba(0, 0, 0, 0.25);
-ms-box-shadow:0 0 6px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 0 6px rgba(0, 0, 0, 0.25);
}
/*.kkkwAct
{
background-color:White;
margin:0px auto;
position:fixed;
top:0px;
transition:top 1s;
-o-transition:top 1s;
-moz-transition:top 1s;
-webkit-transition:top 1s;
-ms-transition:top 1s;
}*/
.kiu {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
.stories h1 {
margin:0px;
padding:0px;
color:Gray;
text-align:center;
font-weight:normal;
font-family:'Lato', sans-serif !important;
color:#8c8c8c;
margin-top:64px;
font-size:44px;
font-weight:bold;
margin-bottom:60px;
margin-top:40px;
text-transform:uppercase;
}
.MobileNavi {
height:60px;
background-color:White;
text-align:left;
position:fixed;
width:100%;
z-index:999999;
margin-bottom:20px;
}
.MobileNavi span {
font-size: 26px;
margin-left: 14px;
color: #ff2c7e;
margin-top: 9px;
float: left;
}
.MobileNavi img {
width: 23px;
margin-top: 21px;
margin-left: 20px;
float: left;
}
/*----------------------people page-----------------------*/
.People {
margin-top:25px;
}
.People h1 {
margin: 0px;
padding: 0px;
color: #ff2c7e;
font-size: 53px;
text-align: right;
margin-top: 40px;
font-weight: bold;
letter-spacing: 0.5px;
text-transform: uppercase;
line-height: 52px;
font-family:'Lato', sans-serif !important;
}
.logo_people {
margin-top:30px;
}
.uimg img {
width: 100%;
float: left;
}
.block_for_user {
margin-top:30px;
}
.block_for_user h2 {
margin-top: 0px;
color:#333333;
}
.social_round img {
width:100%;
max-width:35px;
margin-right:5px;
}
.people_div {
margin-top:20px;
}
/*-----------------------contact page-----------------------------------*/
.outer_head {
background-color:#333333;
float:left;
width:100%;
}
.contact_black {
color:White;
font-family:'Lato', sans-serif !important;
padding-top:42px;
}
.fr {
text-align:right;
}
.fc {
text-align:center;
}
.fl {
text-align:left;
}
.big_text {
font-family:'Lato', sans-serif !important;
font-size: 45px;
color: White;
line-height: 96px;
font-weight: lighter;
letter-spacing: 0.5px;
margin-bottom: 32px;
}
.wt li a {
color:White !important;
}
.map {
min-height:100px;
}
.msgg {
min-height:100px;
background-color:#f3f3f3;
}
.link_social_connect li a img {
max-width: 35px;
margin: 0px 0px;
margin-right: 5px;
}
.contact_body input {
padding: 8px;
margin-top: 5px;
width: 100%;
float: left;
color: #808080;
margin-bottom: 15px;
}
.SendButton {
background-color: #ff2c7e;
color: white;
text-transform: uppercase;
text-align: center;
width: 210px;
padding: 6px 0px;
margin-top: 20px;
float: left;
margin-left: 0px;
font-size: 12px;
cursor: pointer;
letter-spacing: 1.5px;
}
.contact_body textarea {
margin-top: 4px;
padding:4px;
width: 100%;
height: 120px;
color: #808080;
font-family:'Lato', sans-serif !important;
}
.msgg span {
color:#808080;
}
.contact_body h3 {
text-align: center;
margin: 37px 0px;
font-size: 35px;
font-weight: lighter;
font-family:'Lato', sans-serif !important;
letter-spacing: 0.5px;
color: #808080;
}
.limi {
display: inline-block;
float: right;
margin-right: 38px;
}
.Mob_Black {
background-color:#333333;
}
.as1 {
text-align:right;
}
.as2 {
text-align:center;
}
.as3 {
text-align:left;
}
.col-md-5 {
position:static !important;
}
.map-container {
position: relative;
padding-bottom: 26.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.map-container iframe, .map-container object, .map-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pd30as {
padding:0px 30px !important;
}
/*----------------------mobi navigation------------------------*/
.LinkNav {
top:60px;
height:auto;
width:100%;
background-color:White;
position:fixed;
z-index:99999999;
color:#ff2c7e;
font-family:'Lato', sans-serif !important;
}
.LinkNav ul li {
float:left;
width:100%;
margin-left:20px;
}
.LinkNav ul li a {
color: #ff2c7e;
font-family:'Lato', sans-serif !important;
font-size: 21px;
line-height: 55px;
font-weight: normal;
letter-spacing: 0.5px;
}
.LinkNav {
display:none;
}
.click_nav {
cursor:pointer;
}
.pad_se li {
margin: 0px 12px;
font-family:'Lato', sans-serif !important;
font-size: 48px;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-left: 17px;
}
.pad_se {
width: auto;
display: table;
margin: 0px auto;
padding-left:35px;
}
.CommonNavigation ul li a {
border: 1px solid transparent;
border-radius: 6px;
padding:5px 11px;
margin-top:10px;
}
.CommonNavigation ul li a:hover {
border: 1px solid #ff2c7e;
border-radius: 6px;
padding:5px 11px;
}
.CommonNavigation ul li > .active {
border-radius: 0px;
padding: 5px 11px;
border-bottom: 2px dotted #ff2c7c;
}
.cnb ul li a {
border: 1px solid #333333;
border-radius: 6px;
padding:5px 11px;
margin-top:10px;
}
.cnb ul li a:hover {
border: 1px solid white;
border-radius: 6px;
padding:5px 11px;
}
@media (min-width:1023px) and (max-width:4000px) {
.threecolumn {
width:28%;
}
.fourpointfive {
width:35%;
}
}
.hde {
height:67px;
overflow:hidden;
margin-top:9px;
}
.Img_cl1 .hde img {
width: 112px;
margin: 18px 0px;
}
.cl1 img:hover {
margin-top:-35px;
}
.cl2 img:hover {
margin-top:-34px;
}
.hde1 {
visibility:hidden !important;
}
.kkkwAct {
display:none !important;
}
.cl3 img:hover {
margin-top:-35px;
}
.cl4 img:hover {
margin-top:-36px;
}
.cl5 img:hover {
margin-top:-48px;
}
.cl6 img:hover {
margin-top:-45px;
}
.cl7 img:hover {
margin-top:-34px;
}
.cl8 img:hover {
margin-top:-47px;
}
.cl9 img:hover {
margin-top:-51px;
}
.cl10 img:hover {
margin-top:-51px;
}
.cl11 img:hover {
margin-top:-37px;
}
.cl12 img:hover {
margin-top:-37px;
}
/*.ImageSecAc
{
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
*/
.ImageSec img {
-webkit-transition: -webkit-transform 0.4s ease;
-moz-transition: -moz-transform 0.4s ease;
-o-transition: -o-transform 0.4s ease;
transition: transform 0.4s ease;
}
.ImageSec img {
overflow: hidden;
width: 100%;
height: auto;
}
.later_change {
padding: 0px !important;
position: fixed !important;
top: 0px !important;
margin-top: -61px !important;
}
.loader_d {
width:100%;
position:absolute;
height:auto;
min-height:100%;
z-index:999999;
background-color:White;
text-align:center;
}
.icon_nnP2 h3 {
text-transform:uppercase;
}
.icon_nnP2 h3 span {
text-transform:lowercase;
float:left;
margin-top:-6px;
}
.link_social_connect {
float:left;
margin-top:3px;
}
.user1 {
background-position: right;
background-size: 21px;
background-image: url('../img/user.png');
background-repeat: no-repeat;
border:1px solid #808080;
}
.phone {
background-position: right;
background-size: 19px;
background-image: url('../img/phone.png');
background-repeat: no-repeat;
border:1px solid #808080;
}
.envelop {
background-position: right;
background-size: 25px;
background-image: url('../img/envelop.png');
background-repeat: no-repeat;
border:1px solid #808080;
}
.address {
font-family: inherit;
text-align: right;
padding: 0px;
margin: 0px;
margin-top: 20px;
font-size: 16px;
font-weight: normal;
}
.fbadd {
width: 25px;
vertical-align: text-bottom;
display: inline-block;
text-align: left;
margin-right: 5px;
}
.pnk {
color:#ff2c7e;
}
.threewords {
}
.threewords ul {
padding:0px;
display: table;
text-align: center;
margin: 0px auto;
margin-top:35px;
}
.threewords ul li {
padding: 0px;
float: left;
font-family:'Lato', sans-serif !important;
color: White !important;
margin: 0px 10px;
font-size: 78px;
font-weight: lighter;
letter-spacing: 0px;
}
.headtextlines ul {
margin-left:28px;
}
.headtextlines ul li {
width: 100%;
text-align: center;
color: White;
font-family:'Lato', sans-serif;
font-size: 14px;
margin-top: 20px;
line-height: 18px;
}
.wpb_wrapper {
}
.wpb_wrapper img {
width:auto !important;
}
.itemboxphilo {
/*background-color: #e1e1e1;*/
background-image:url('../img/bg_trans.png');
background-repeat:repeat;
width: 100%;
text-align: center;
padding: 0px 10px;
margin-top: 25px;
cursor: pointer;
}
.itemboxphilo img {
width:auto;
margin:0px auto;
max-width:90%;
}
.itmbb {
float:left;
width:100%;
}
.itmbb h3 {
float: left;
width: 100%;
font-size: 22px;
padding: 0px 22px;
margin-top: 32px;
margin-bottom: 26px;
text-transform: uppercase;
line-height: 29px;
color:white;
}
.itmbb h3:hover {
color:white !important;
}
.philohd h1 {
margin-top: 70px;
margin-bottom: 0px;
}
.MainImg img {
width:100%;
}
.whole_view {
overflow:hidden;
}
.Hover_shot {
position: absolute;
background-color: #ff2c7c;
z-index: 99999;
top: 0px;
width: 90%;
text-align: center;
opacity: 0.8;
color: white;
margin-top:2% 0%;
margin-top:40px;
}
.Hover_shot h3 {
margin: 0px;
padding: 0px;
font-size: 30px;
margin-top: 170px;
color: white;
text-align: center;
width: 100%;
vertical-align: middle;
line-height:35px;
}
.Hover_shot p {
font-size: 18px;
letter-spacing: 0.5px;
margin: 0px;
padding: 0px;
margin-top: -15px;
letter-spacing: 0.8px;
}
.bgtxt {
font-size: 44px !important;
font-weight: bold !important;
line-height: 51px !important;
}
#main .vc_text_separator div {
background-color:transparent !important;
color:#333;
}
.horiLogo img {
width:100%;
}
@media (min-width:100px) and (max-width:800px) {
.wpb_wrapper img {
width:100% !important;
height:auto !important;
}
}
.Img_cl1 .hde {
float:left !important;
width:200px !important;
text-align:center;
}
.fdfll {
width:2455px;
float:left;
overflow:hidden;
}
#cont1 {
float:left;
}
#contS {
width:100%;
float:left;
}
.WholeView {
width:90%;
margin-top:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="cont">
<div id="cont1">
<div id="contS" class="Img_cl1">
<div class="col-md-12 fdfll scroll-left">
<a target="_blank" href="http://www.meraevents.com/">
<div class=" cl1 hde ">
<img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
</div>
</a>
<a target="_blank" href="http://www.appvirality.com/">
<div class=" cl2 hde">
<img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
</div>
</a>
<a target="_blank" href="http://www.customfurnish.com/">
<div class=" cl3 hde ">
<img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
</div>
</a>
<a target="_blank" href="http://www.medplusmart.com/home.mart">
<div class=" cl4 hde ">
<img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
</div>
</a>
<a target="_blank" href="http://www.ishyd.org/">
<div class=" cl5 hde ">
<img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
</div>
</a>
<a target="_blank" href="http://www.stileeye.com/">
<div class=" cl6 hde ">
<img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
</div>
</a>
<a target="_blank" href="http://vuego.tv/index.html">
<div class=" cl7 hde ">
<img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
</div>
</a>
<a target="_blank" href="http://www.veooz.com/">
<div class=" cl8 hde ">
<img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
</div>
</a>
<a target="_blank" href="http://www.zapevent.com/">
<div class=" cl9 hde ">
<img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
</div>
</a>
<a target="_blank" href="https://www.doctrz.com/">
<div class=" cl10 hde ">
<img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
</div>
</a>
<a target="_blank" href="http://reveye.in/">
<div class=" cl11 hde ">
<img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
</div>
</a>
<a target="_blank" href="http://www.leonia.in/">
<div class=" hde cl12 ">
<img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
</div>
</a>
</div>
</div>
</div>
</div>

Jsfiddle

最佳答案

这是您的解决方案:

var $content = $('#imgsList'); // Cache your selectors!
$(".cont").hover( function loop() {
$content.stop().animate({ marginLeft: '-=1600' }, 5000, 'linear', function(){
$content.css({ marginLeft : "0px" });
loop();
});
}, function stop() {
$content.stop();
});

您只需要滚动浏览整个图像集,然后将左边距重置为 0px。

fiddle

关于JQuery - 在悬停时循环从左到右移动图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30615801/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com